import classNames from 'classnames';
import { useRef } from 'react';
import { useTranslation } from 'react-i18next';
import ReactModal from 'react-modal';

import CloseIcon from '@/assets/icons/close-icon.svg';
import Button from '@/components/Button';
import IconButton from '@/components/Button/IconButton';
import { onKeyDownHandler } from '@/utils/a11y';

import * as modalStyles from '../../scss/modal.module.scss';
import * as styles from './Acmodal.module.scss';
import type { ModalProps } from './type';

const AcModal = ({
  className,
  isOpen = false,
  children,
  cancelText = 'action.cancel',
  confirmText = 'action.confirm',
  onConfirm,
  onClose,
}: ModalProps) => {
  const { t } = useTranslation();

  const contentRef = useRef<HTMLDivElement>(null);

  return (
    <ReactModal
      role="dialog"
      isOpen={isOpen}
      className={classNames(styles.modal, className)}
      overlayClassName={classNames(modalStyles.overlay, styles.overlay)}
      onAfterOpen={() => {
        contentRef.current?.focus();
      }}
    >
      <div
        ref={contentRef}
        className={styles.container}
        role="button"
        tabIndex={0}
        onKeyDown={onKeyDownHandler({
          Enter: onConfirm ?? onClose,
          ' ': onConfirm ?? onClose,
          Escape: onClose,
        })}
      >
        <div className={styles.header}>
          {t('description.reminder')}
          <IconButton onClick={onClose}>
            <CloseIcon />
          </IconButton>
        </div>
        <div className={styles.content}>{children}</div>
        <div className={styles.footer}>
          <Button title={cancelText} type="secondary" size="small" onClick={onClose} />
          {onConfirm && <Button title={confirmText} size="small" onClick={onConfirm} />}
        </div>
      </div>
    </ReactModal>
  );
};

export default AcModal;
