import React, { useState } from "react";
import { AppDispatch } from "app/store";
import { useTranslation } from "react-i18next";
import { useDispatch, useSelector } from "react-redux";
import styles from "styles/app.module.scss";
import {
  DisplayInfoType,
  selectDisplayInfo,
  changeDisplayInfo,
} from "features/dictation";
import { getTranslationID } from "translation";
import table from "../../assets/images/table.svg";

export const DisPlayInfo: React.FC = (): JSX.Element => {
  const dispatch: AppDispatch = useDispatch();
  const [t] = useTranslation();

  const [openDisplayInfo, setOpenDisplayInfo] = useState(false);

  // 各カラムの表示/非表示
  const displayColumn = useSelector(selectDisplayInfo);

  const updateDisplayInfo = (column: DisplayInfoType) => {
    localStorage.setItem("displayInfo", JSON.stringify(column));
  };

  return (
    <>
      <ul className={`${styles.menuAction} ${styles.alignRight}`}>
        <li>
          {/* eslint-disable-next-line jsx-a11y/click-events-have-key-events,jsx-a11y/no-static-element-interactions */}
          <a
            className={`${styles.menuLink} ${styles.isActive}`}
            onClick={() => {
              setOpenDisplayInfo(!openDisplayInfo);
            }}
          >
            <img src={table} alt="" className={`${styles.menuIcon}`} />
            {t(getTranslationID("dictationPage.label.displayInfomation"))}
          </a>
        </li>
      </ul>
      <ul
        className={`${styles.displayOptions} ${styles.form} ${
          openDisplayInfo ? styles.isShow : ""
        }`}
      >
        <li>
          <label htmlFor="jobNumber">
            <input
              id="jobNumber"
              type="checkbox"
              value="clm1"
              className={styles.formCheck}
              checked={displayColumn.JobNumber}
              onChange={(e) => {
                const column: DisplayInfoType = {
                  ...displayColumn,
                  JobNumber: e.target.checked,
                };
                updateDisplayInfo(column);
                dispatch(changeDisplayInfo({ column }));
                dispatch(changeDisplayInfo({ column }));
              }}
            />
            {t(getTranslationID("dictationPage.label.jobNumber"))}
          </label>
        </li>
        <li>
          <label htmlFor="status">
            <input
              id="status"
              type="checkbox"
              value="clm2"
              className={styles.formCheck}
              checked={displayColumn.Status}
              onChange={(e) => {
                const column: DisplayInfoType = {
                  ...displayColumn,
                  Status: e.target.checked,
                };
                updateDisplayInfo(column);
                dispatch(changeDisplayInfo({ column }));
              }}
            />
            {t(getTranslationID("dictationPage.label.status"))}
          </label>
        </li>
        <li>
          <label htmlFor="priority">
            <input
              id="priority"
              type="checkbox"
              value="clm3"
              className={styles.formCheck}
              checked={displayColumn.Priority}
              onChange={(e) => {
                const column: DisplayInfoType = {
                  ...displayColumn,
                  Priority: e.target.checked,
                };
                updateDisplayInfo(column);
                dispatch(changeDisplayInfo({ column }));
              }}
            />
            {t(getTranslationID("dictationPage.label.priority"))}
          </label>
        </li>
        <li>
          <label htmlFor="encryption">
            <input
              id="encryption"
              type="checkbox"
              value="clm4"
              className={styles.formCheck}
              checked={displayColumn.Encryption}
              onChange={(e) => {
                const column: DisplayInfoType = {
                  ...displayColumn,
                  Encryption: e.target.checked,
                };
                updateDisplayInfo(column);
                dispatch(changeDisplayInfo({ column }));
              }}
            />
            {t(getTranslationID("dictationPage.label.encryption"))}
          </label>
        </li>
        <li>
          <label htmlFor="authorId">
            <input
              id="authorId"
              type="checkbox"
              value="clm5"
              className={styles.formCheck}
              checked={displayColumn.AuthorId}
              onChange={(e) => {
                const column: DisplayInfoType = {
                  ...displayColumn,
                  AuthorId: e.target.checked,
                };
                updateDisplayInfo(column);
                dispatch(changeDisplayInfo({ column }));
              }}
            />
            {t(getTranslationID("dictationPage.label.authorId"))}
          </label>
        </li>
        <li>
          <label htmlFor="workType">
            <input
              id="workType"
              type="checkbox"
              value="clm6"
              className={styles.formCheck}
              checked={displayColumn.WorkType}
              onChange={(e) => {
                const column: DisplayInfoType = {
                  ...displayColumn,
                  WorkType: e.target.checked,
                };
                updateDisplayInfo(column);
                dispatch(changeDisplayInfo({ column }));
              }}
            />
            {t(getTranslationID("dictationPage.label.workType"))}
          </label>
        </li>
        <li>
          <label htmlFor="fileName">
            <input
              id="fileName"
              type="checkbox"
              value="clm7"
              className={styles.formCheck}
              checked={displayColumn.FileName}
              onChange={(e) => {
                const column: DisplayInfoType = {
                  ...displayColumn,
                  FileName: e.target.checked,
                };
                updateDisplayInfo(column);
                dispatch(changeDisplayInfo({ column }));
              }}
            />
            {t(getTranslationID("dictationPage.label.fileName"))}
          </label>
        </li>
        <li>
          <label htmlFor="fileLength">
            <input
              id="fileLength"
              type="checkbox"
              value="clm8"
              className={styles.formCheck}
              checked={displayColumn.FileLength}
              onChange={(e) => {
                const column: DisplayInfoType = {
                  ...displayColumn,
                  FileLength: e.target.checked,
                };
                updateDisplayInfo(column);
                dispatch(changeDisplayInfo({ column }));
              }}
            />
            {t(getTranslationID("dictationPage.label.fileLength"))}
          </label>
        </li>
        <li>
          <label htmlFor="fileSize">
            <input
              id="fileSize"
              type="checkbox"
              value="clm9"
              className={styles.formCheck}
              checked={displayColumn.FileSize}
              onChange={(e) => {
                const column: DisplayInfoType = {
                  ...displayColumn,
                  FileSize: e.target.checked,
                };
                updateDisplayInfo(column);
                dispatch(changeDisplayInfo({ column }));
              }}
            />
            {t(getTranslationID("dictationPage.label.fileSize"))}
          </label>
        </li>
        <li>
          <label htmlFor="recordingStartedDate">
            <input
              id="recordingStartedDate"
              type="checkbox"
              value="clm10"
              className={styles.formCheck}
              checked={displayColumn.RecordingStartedDate}
              onChange={(e) => {
                const column: DisplayInfoType = {
                  ...displayColumn,
                  RecordingStartedDate: e.target.checked,
                };
                updateDisplayInfo(column);
                dispatch(changeDisplayInfo({ column }));
              }}
            />
            {t(getTranslationID("dictationPage.label.recordingStartedDate"))}
          </label>
        </li>
        <li>
          <label htmlFor="recordingFinishedDate">
            <input
              id="recordingFinishedDate"
              type="checkbox"
              value="clm11"
              className={styles.formCheck}
              checked={displayColumn.RecordingFinishedDate}
              onChange={(e) => {
                const column: DisplayInfoType = {
                  ...displayColumn,
                  RecordingFinishedDate: e.target.checked,
                };
                updateDisplayInfo(column);
                dispatch(changeDisplayInfo({ column }));
              }}
            />
            {t(getTranslationID("dictationPage.label.recordingFinishedDate"))}
          </label>
        </li>
        <li>
          <label htmlFor="uploadDate">
            <input
              id="uploadDate"
              type="checkbox"
              value="clm12"
              className={styles.formCheck}
              checked={displayColumn.UploadDate}
              onChange={(e) => {
                const column: DisplayInfoType = {
                  ...displayColumn,
                  UploadDate: e.target.checked,
                };
                updateDisplayInfo(column);
                dispatch(changeDisplayInfo({ column }));
              }}
            />
            {t(getTranslationID("dictationPage.label.uploadDate"))}
          </label>
        </li>
        <li>
          <label htmlFor="transcriptionStartDate">
            <input
              id="transcriptionStartDate"
              type="checkbox"
              value="clm13"
              className={styles.formCheck}
              checked={displayColumn.TranscriptionStartedDate}
              onChange={(e) => {
                const column: DisplayInfoType = {
                  ...displayColumn,
                  TranscriptionStartedDate: e.target.checked,
                };
                updateDisplayInfo(column);
                dispatch(changeDisplayInfo({ column }));
              }}
            />
            {t(
              getTranslationID("dictationPage.label.transcriptionStartedDate")
            )}
          </label>
        </li>
        <li>
          <label htmlFor="transcriptionFinishedDate">
            <input
              id="transcriptionFinishedDate"
              type="checkbox"
              value="clm14"
              className={styles.formCheck}
              checked={displayColumn.TranscriptionFinishedDate}
              onChange={(e) => {
                const column: DisplayInfoType = {
                  ...displayColumn,
                  TranscriptionFinishedDate: e.target.checked,
                };
                updateDisplayInfo(column);
                dispatch(changeDisplayInfo({ column }));
              }}
            />
            {t(
              getTranslationID("dictationPage.label.transcriptionFinishedDate")
            )}
          </label>
        </li>
        <li>
          <label htmlFor="transcriptionist">
            <input
              id="transcriptionist"
              type="checkbox"
              value="clm15"
              className={styles.formCheck}
              checked={displayColumn.Transcriptionist}
              onChange={(e) => {
                const column: DisplayInfoType = {
                  ...displayColumn,
                  Transcriptionist: e.target.checked,
                };
                updateDisplayInfo(column);
                dispatch(changeDisplayInfo({ column }));
              }}
            />
            {t(getTranslationID("dictationPage.label.transcriptionist"))}
          </label>
        </li>
        <li>
          <label htmlFor="comment">
            <input
              type="checkbox"
              value="clm16"
              className={styles.formCheck}
              checked={displayColumn.Comment}
              onChange={(e) => {
                const column: DisplayInfoType = {
                  ...displayColumn,
                  Comment: e.target.checked,
                };
                updateDisplayInfo(column);
                dispatch(changeDisplayInfo({ column }));
              }}
            />
            {t(getTranslationID("dictationPage.label.comment"))}
          </label>
        </li>
        <li>
          <label htmlFor="optionItem1">
            <input
              id="optionItem1"
              type="checkbox"
              value="op1"
              className={styles.formCheck}
              checked={displayColumn.OptionItem1}
              onChange={(e) => {
                const column: DisplayInfoType = {
                  ...displayColumn,
                  OptionItem1: e.target.checked,
                };
                updateDisplayInfo(column);
                dispatch(changeDisplayInfo({ column }));
              }}
            />
            {t(getTranslationID("dictationPage.label.optionItem1"))}
          </label>
        </li>
        <li>
          <label htmlFor="optionItem2">
            <input
              id="optionItem2"
              type="checkbox"
              value="op2"
              className={styles.formCheck}
              checked={displayColumn.OptionItem2}
              onChange={(e) => {
                const column: DisplayInfoType = {
                  ...displayColumn,
                  OptionItem2: e.target.checked,
                };
                updateDisplayInfo(column);
                dispatch(changeDisplayInfo({ column }));
              }}
            />
            {t(getTranslationID("dictationPage.label.optionItem2"))}
          </label>
        </li>
        <li>
          <label htmlFor="optionItem3">
            <input
              id="optionItem3"
              type="checkbox"
              value="op3"
              className={styles.formCheck}
              checked={displayColumn.OptionItem3}
              onChange={(e) => {
                const column: DisplayInfoType = {
                  ...displayColumn,
                  OptionItem3: e.target.checked,
                };
                updateDisplayInfo(column);
                dispatch(changeDisplayInfo({ column }));
              }}
            />
            {t(getTranslationID("dictationPage.label.optionItem3"))}
          </label>
        </li>
        <li>
          <label htmlFor="optionItem4">
            <input
              id="optionItem4"
              type="checkbox"
              value="op4"
              className={styles.formCheck}
              checked={displayColumn.OptionItem4}
              onChange={(e) => {
                const column: DisplayInfoType = {
                  ...displayColumn,
                  OptionItem4: e.target.checked,
                };
                updateDisplayInfo(column);
                dispatch(changeDisplayInfo({ column }));
              }}
            />
            {t(getTranslationID("dictationPage.label.optionItem4"))}
          </label>
        </li>
        <li>
          <label htmlFor="optionItem5">
            <input
              id="optionItem5"
              type="checkbox"
              value="op5"
              className={styles.formCheck}
              checked={displayColumn.OptionItem5}
              onChange={(e) => {
                const column: DisplayInfoType = {
                  ...displayColumn,
                  OptionItem5: e.target.checked,
                };
                updateDisplayInfo(column);
                dispatch(changeDisplayInfo({ column }));
              }}
            />
            {t(getTranslationID("dictationPage.label.optionItem5"))}
          </label>
        </li>
        <li>
          <label htmlFor="optionItem6">
            <input
              id="optionItem6"
              type="checkbox"
              value="op6"
              className={styles.formCheck}
              checked={displayColumn.OptionItem6}
              onChange={(e) => {
                const column: DisplayInfoType = {
                  ...displayColumn,
                  OptionItem6: e.target.checked,
                };
                updateDisplayInfo(column);
                dispatch(changeDisplayInfo({ column }));
              }}
            />
            {t(getTranslationID("dictationPage.label.optionItem6"))}
          </label>
        </li>
        <li>
          <label htmlFor="optionItem7">
            <input
              id="optionItem7"
              type="checkbox"
              value="op7"
              className={styles.formCheck}
              checked={displayColumn.OptionItem7}
              onChange={(e) => {
                const column: DisplayInfoType = {
                  ...displayColumn,
                  OptionItem7: e.target.checked,
                };
                updateDisplayInfo(column);
                dispatch(changeDisplayInfo({ column }));
              }}
            />
            {t(getTranslationID("dictationPage.label.optionItem7"))}
          </label>
        </li>
        <li>
          <label htmlFor="optionItem8">
            <input
              id="optionItem8"
              type="checkbox"
              value="op8"
              className={styles.formCheck}
              checked={displayColumn.OptionItem8}
              onChange={(e) => {
                const column: DisplayInfoType = {
                  ...displayColumn,
                  OptionItem8: e.target.checked,
                };
                updateDisplayInfo(column);
                dispatch(changeDisplayInfo({ column }));
              }}
            />
            {t(getTranslationID("dictationPage.label.optionItem8"))}
          </label>
        </li>
        <li>
          <label htmlFor="optionItem9">
            <input
              id="optionItem9"
              type="checkbox"
              value="op9"
              className={styles.formCheck}
              checked={displayColumn.OptionItem9}
              onChange={(e) => {
                const column: DisplayInfoType = {
                  ...displayColumn,
                  OptionItem9: e.target.checked,
                };
                updateDisplayInfo(column);
                dispatch(changeDisplayInfo({ column }));
              }}
            />
            {t(getTranslationID("dictationPage.label.optionItem9"))}
          </label>
        </li>
        <li>
          <label htmlFor="optionItem10">
            <input
              id="optionItem10"
              type="checkbox"
              value="op10"
              className={styles.formCheck}
              checked={displayColumn.OptionItem10}
              onChange={(e) => {
                const column: DisplayInfoType = {
                  ...displayColumn,
                  OptionItem10: e.target.checked,
                };
                updateDisplayInfo(column);
                dispatch(changeDisplayInfo({ column }));
              }}
            />
            {t(getTranslationID("dictationPage.label.optionItem10"))}
          </label>
        </li>
      </ul>
    </>
  );
};
