import React, { useCallback } from "react";
import styles from "styles/app.module.scss";
import { useSelector } from "react-redux";
import {
  selectSelectedFileTask,
  selectIsLoading,
  PRIORITY,
} from "features/dictation";
import { getTranslationID } from "translation";
import { useTranslation } from "react-i18next";
import close from "../../assets/images/close.svg";
import lock from "../../assets/images/lock.svg";

interface FilePropertyPopupProps {
  onClose: (isChanged: boolean) => void;
  isOpen: boolean;
}

export const FilePropertyPopup: React.FC<FilePropertyPopupProps> = (props) => {
  const { onClose, isOpen } = props;
  const [t] = useTranslation();
  const isLoading = useSelector(selectIsLoading);

  // ポップアップを閉じる処理
  const closePopup = useCallback(() => {
    onClose(false);
  }, [onClose]);
  const selectedFileTask = useSelector(selectSelectedFileTask);

  return (
    <div className={`${styles.modal} ${isOpen ? styles.isShow : ""}`}>
      <div className={styles.modalBox}>
        <p className={styles.modalTitle}>
          {t(getTranslationID("dictationPage.label.fileProperty"))}
          <button
            type="button"
            onClick={closePopup}
            style={{ pointerEvents: isLoading ? "none" : "auto" }}
          >
            <img src={close} className={styles.modalTitleIcon} alt="close" />
          </button>
        </p>
        <dl className={`${styles.formList} ${styles.property} ${styles.hasbg}`}>
          <dt className={styles.formTitle}>
            {t(getTranslationID("filePropertyPopup.label.general"))}
          </dt>
          <dt>{t(getTranslationID("dictationPage.label.fileName"))}</dt>
          <dd>{selectedFileTask?.fileName.replace(".zip", "") ?? ""}</dd>
          <dt>{t(getTranslationID("dictationPage.label.fileSize"))}</dt>
          <dd>{selectedFileTask?.fileSize ?? ""}</dd>
          <dt>{t(getTranslationID("dictationPage.label.fileLength"))}</dt>
          <dd>{selectedFileTask?.audioDuration ?? ""}</dd>
          <dt>{t(getTranslationID("dictationPage.label.authorId"))}</dt>
          <dd>{selectedFileTask?.authorId ?? ""}</dd>
          <dt>{t(getTranslationID("dictationPage.label.workType"))}</dt>
          <dd>{selectedFileTask?.workType ?? ""}</dd>
          <dt>{t(getTranslationID("dictationPage.label.priority"))}</dt>
          <dd>
            {selectedFileTask?.priority === "01"
              ? PRIORITY.HIGH
              : PRIORITY.NORMAL}
          </dd>
          <dt>
            {t(getTranslationID("dictationPage.label.recordingStartedDate"))}
          </dt>
          <dd>{selectedFileTask?.audioCreatedDate ?? ""}</dd>
          <dt>
            {t(getTranslationID("dictationPage.label.recordingFinishedDate"))}
          </dt>
          <dd>{selectedFileTask?.audioFinishedDate ?? ""}</dd>
          <dt>{t(getTranslationID("dictationPage.label.uploadDate"))}</dt>
          <dd>{selectedFileTask?.audioUploadedDate ?? ""}</dd>
          <dt>{t(getTranslationID("dictationPage.label.encryption"))}</dt>
          <dd>
            {selectedFileTask?.isEncrypted ? (
              <img src={lock} alt="encrypted" />
            ) : (
              ""
            )}
          </dd>
          <dt>{t(getTranslationID("dictationPage.label.optionItem1"))}</dt>
          <dd>{selectedFileTask?.optionItemList[0].optionItemValue}</dd>
          <dt>{t(getTranslationID("dictationPage.label.optionItem2"))}</dt>
          <dd>{selectedFileTask?.optionItemList[1].optionItemValue}</dd>
          <dt>{t(getTranslationID("dictationPage.label.optionItem3"))}</dt>
          <dd>{selectedFileTask?.optionItemList[2].optionItemValue}</dd>
          <dt>{t(getTranslationID("dictationPage.label.optionItem4"))}</dt>
          <dd>{selectedFileTask?.optionItemList[3].optionItemValue}</dd>
          <dt>{t(getTranslationID("dictationPage.label.optionItem5"))}</dt>
          <dd>{selectedFileTask?.optionItemList[4].optionItemValue}</dd>
          <dt>{t(getTranslationID("dictationPage.label.optionItem6"))}</dt>
          <dd>{selectedFileTask?.optionItemList[5].optionItemValue}</dd>
          <dt>{t(getTranslationID("dictationPage.label.optionItem7"))}</dt>
          <dd>{selectedFileTask?.optionItemList[6].optionItemValue}</dd>
          <dt>{t(getTranslationID("dictationPage.label.optionItem8"))}</dt>
          <dd>{selectedFileTask?.optionItemList[7].optionItemValue}</dd>
          <dt>{t(getTranslationID("dictationPage.label.optionItem9"))}</dt>
          <dd>{selectedFileTask?.optionItemList[8].optionItemValue}</dd>
          <dt>{t(getTranslationID("dictationPage.label.optionItem10"))}</dt>
          <dd>{selectedFileTask?.optionItemList[9].optionItemValue}</dd>
          <dt>{t(getTranslationID("dictationPage.label.comment"))}</dt>
          <dd>{selectedFileTask?.comment ?? ""}</dd>
          <dt className={styles.formTitle}>
            {t(getTranslationID("filePropertyPopup.label.job"))}
          </dt>
          <dt>{t(getTranslationID("dictationPage.label.jobNumber"))}</dt>
          <dd>{selectedFileTask?.jobNumber ?? ""}</dd>
          <dt>{t(getTranslationID("dictationPage.label.status"))}</dt>
          <dd>{selectedFileTask?.status ?? ""}</dd>
          <dt>
            {t(
              getTranslationID("dictationPage.label.transcriptionStartedDate")
            )}
          </dt>
          <dd>{selectedFileTask?.transcriptionStartedDate ?? ""}</dd>
          <dt>
            {t(
              getTranslationID("dictationPage.label.transcriptionFinishedDate")
            )}
          </dt>
          <dd>{selectedFileTask?.transcriptionFinishedDate ?? ""}</dd>
          <dt>{t(getTranslationID("dictationPage.label.transcriptionist"))}</dt>
          <dd>{selectedFileTask?.typist?.name ?? ""}</dd>
          <dd className={`${styles.full} ${styles.alignRight}`}>
            {/* eslint-disable-next-line jsx-a11y/click-events-have-key-events, jsx-a11y/no-static-element-interactions */}
            <a onClick={closePopup} className={`${styles.buttonText}`}>
              <img src={close} className={styles.modalTitleIcon} alt="close" />
              {t(getTranslationID("filePropertyPopup.label.close"))}
            </a>
          </dd>
        </dl>
      </div>
    </div>
  );
};
