/* eslint-disable */
import React, { memo, useMemo, useState } 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 { DialogItemObject } from './types';
import Styles from './index.module.css';

/* Dialog Item */
function DialogItem(props: DialogItemObject): React.ReactElement {
  /* Global & Local States */
  const { i18n } = useLang();
  const { dialog, requestRemoveDialog } = props;
  const [hiddenDebugMessage, setHiddenDebugMessage] = useState(false);
  /* Functions */
  const onConfirmClick = (): void => {
    if (dialog.onConfirm) dialog.onConfirm();
    requestRemoveDialog();
  };
  /* Views */
  return (
    <div className={classNames(Styles.dialogItemContainer)}>
      <div className={classNames(Styles.dialogItemTitle)}>
        <Typography className={classNames(Styles.dialogItemTitleStyle)} variant="h2" color="textPrimary">
          {dialog.typeTitle}
        </Typography>
      </div>
      <div className={classNames(Styles.dialogItemSubTitle)}>
        <Typography variant="body1" color="textPrimary" style={{ whiteSpace: 'pre-wrap' }}>
          {dialog.typeContent && dialog.typeContent}
        </Typography>
      </div>
      {dialog.typeHiddenMessage && hiddenDebugMessage && (
        <div className={classNames(Styles.dialogItemDebug)}>
          <Typography variant="body2" color="textSecondary" style={{ whiteSpace: 'pre-wrap' }}>
            {dialog.typeHiddenMessage && dialog.typeHiddenMessage}
          </Typography>
        </div>
      )}
      <div className={classNames(Styles.dialogItemActionContainer)}>
        {dialog.typeHiddenMessage && (
          <Button
            className={classNames(Styles.dialogItemDebugAction)}
            variant="text"
            color="primary"
            onClick={() => setHiddenDebugMessage(!hiddenDebugMessage)}
          >
            {hiddenDebugMessage ? i18n.t('frontend.global.operation.debugopenclose') : i18n.t('frontend.global.operation.debugopen')}
          </Button>
        )}
        <Button
          className={classNames(Styles.dialogItemActionButtonStyle)}
          variant="contained"
          color="primary"
          onClick={onConfirmClick}
        >
          {dialog.confirmText ? dialog.confirmText : i18n.t('frontend.global.operation.confirm')}
        </Button>
      </div>
    </div>
  );
}

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

export default memo(ModalDialog);