import React, { memo, useMemo } from 'react';
import classNames from 'classnames';
import Button from '@material-ui/core/Button';
import Typography from '@material-ui/core/Typography';
import useLang from '@Hooks/useLang';
import useMessage from '@Hooks/useMessage';
import useMappedState from '@Hooks/useMappedState';
import Modal from '@Components/Base/Modal';
import { ConfirmItemObject } from './types';
import Styles from './index.module.css';

/* Confirm Item */
function ConfirmItem(props: ConfirmItemObject): React.ReactElement {
  /* Global & Local States */
  const { i18n } = useLang();
  const { confirm, requestRemoveConfirm } = props;
  /* Functions */
  const onConfirmClick = (): void => {
    if (confirm.onConfirm) confirm.onConfirm();
    requestRemoveConfirm();
  };
  const onCancelClick = (): void => {
    if (confirm.onCancel) confirm.onCancel();
    requestRemoveConfirm();
  };
  /* Main */
  return (
    <div className={classNames(Styles.confirmItemContainer)}>
      <div className={classNames(Styles.confirmItemTitle)}>
        <Typography className={classNames(Styles.confirmItemTitleStyle)} variant="h2" color="textPrimary">
          {confirm.typeTitle}
        </Typography>
      </div>
      <div className={classNames(Styles.confirmItemSubTitle)}>
        <Typography variant="body1" color="textPrimary" style={{ whiteSpace: 'pre-wrap' }}>
          {confirm.typeContent && confirm.typeContent}
        </Typography>
      </div>
      <div className={classNames(Styles.confirmItemActionContainer)}>
        <Button
          className={classNames(Styles.confirmItemActionButtonStyle)}
          variant="text"
          color="default"
          onClick={onCancelClick}
        >
          {confirm.cancelText ? confirm.cancelText : i18n.t('frontend.global.operation.cancel')}
        </Button>
        <Button
          className={classNames(Styles.confirmItemActionButtonStyle)}
          variant="contained"
          color="primary"
          onClick={onConfirmClick}
        >
          {confirm.confirmText ? confirm.confirmText : i18n.t('frontend.global.operation.confirm')}
        </Button>
      </div>
    </div>
  );
}

function ModalConfirm(): React.ReactElement {
  /* Global & Local States */
  const reduxMessage = useMessage();
  const storeMessage = useMappedState((state) => state.message);
  /* Functions */
  const requestRemoveConfirm = (): void => {
    reduxMessage.removeConfirm();
  };
  /* Views */
  const RenderMessages = useMemo(() => {
    if (storeMessage.messageConfirmList.list.length > 0) {
      return (
        <ConfirmItem confirm={storeMessage.messageConfirmList.list[0]} requestRemoveConfirm={requestRemoveConfirm} />
      );
    }
    return <React.Fragment />;
  }, [storeMessage.messageConfirmList]);
  const RenderIsMessageOpen = useMemo(() => {
    if (storeMessage.messageConfirmList.list.length > 0) {
      return true;
    }
    return false;
  }, [storeMessage.messageConfirmList]);
  /* Main */
  return (
    <Modal
      open={RenderIsMessageOpen}
      onClose={requestRemoveConfirm}
      typeSize="sm"
      disableCancelButton
      disableConfirmButton
    >
      {RenderMessages}
    </Modal>
  );
}

export default memo(ModalConfirm);