import React, { useCallback, useEffect, 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 Footer from "components/footer";
import Header from "components/header";
import {
  listTasksAsync,
  selectCurrentPage,
  selectTasks,
  selectTotal,
  selectTotalPage,
  DIRECTION,
  DisplayInfoType,
  INIT_DISPLAY_INFO,
  SORTABLE_COLUMN,
  selectDisplayInfo,
  changeDisplayInfo,
  getSortColumnAsync,
  selectParamName,
  selectDirection,
  changeParamName,
  changeDirection,
  changeSelectedTask,
  SortableColumnType,
  changeAssignee,
  listTypistsAsync,
  listTypistGroupsAsync,
  DirectionType,
  selectIsLoading,
  playbackAsync,
} from "features/dictation";
import { getTranslationID } from "translation";
import { Task } from "api/api";
import { isAdminUser, isAuthorUser, isTypistUser } from "features/auth/utils";
import { STATUS, LIMIT_TASK_NUM } from "../../features/dictation";
import uploaded from "../../assets/images/uploaded.svg";
import pending from "../../assets/images/pending.svg";
import inprogress from "../../assets/images/inprogress.svg";
import finished from "../../assets/images/finished.svg";
import backup from "../../assets/images/backup.svg";
import lock from "../../assets/images/lock.svg";
import progress_activit from "../../assets/images/progress_activit.svg";
import { DisPlayInfo } from "./displayInfo";
import { ChangeTranscriptionistPopup } from "./changeTranscriptionistPopup";

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

  const isAdmin = isAdminUser();
  const isAuthor = isAuthorUser();
  const isTypist = isTypistUser();
  // popup制御関係
  const [
    isChangeTranscriptionistPopupOpen,
    setIsChangeTranscriptionistPopupOpen,
  ] = useState(false);

  const onChangeTranscriptionistPopupOpen = useCallback(
    (task: Task) => {
      dispatch(changeAssignee({ selected: task.assignees }));
      dispatch(changeSelectedTask({ task }));
      setIsChangeTranscriptionistPopupOpen(true);
    },
    [dispatch, setIsChangeTranscriptionistPopupOpen]
  );

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

  // フィルターするステータス
  const [filterUploaded, setFilterUploaded] = useState(true);
  const [filterPending, setFilterPending] = useState(true);
  const [filterInProgress, setFilterInProgress] = useState(true);
  const [filterFinished, setFilterFinished] = useState(true);
  const [filterBackup, setFilterBackup] = useState(false);

  // ソート対象カラム
  const sortableParamName = useSelector(selectParamName);
  const sortDirection = useSelector(selectDirection);

  const tasks = useSelector(selectTasks);
  const total = useSelector(selectTotal);
  const totalPage = useSelector(selectTotalPage);
  const currentPage = useSelector(selectCurrentPage);

  const isLoading = useSelector(selectIsLoading);

  // ページネーションのボタンクリック時のアクション
  const getFirstPage = useCallback(() => {
    const filter = getFilter(
      filterUploaded,
      filterInProgress,
      filterPending,
      filterFinished,
      filterBackup
    );
    dispatch(
      listTasksAsync({
        limit: LIMIT_TASK_NUM,
        offset: 0,
        filter,
        direction: sortDirection,
        paramName: sortableParamName,
      })
    );
    dispatch(listTypistsAsync());
    dispatch(listTypistGroupsAsync());
  }, [
    dispatch,
    filterUploaded,
    filterInProgress,
    filterPending,
    filterFinished,
    filterBackup,
    sortDirection,
    sortableParamName,
  ]);

  const getLastPage = useCallback(() => {
    const filter = getFilter(
      filterUploaded,
      filterInProgress,
      filterPending,
      filterFinished,
      filterBackup
    );
    const lastPageOffset = (totalPage - 1) * LIMIT_TASK_NUM;
    dispatch(
      listTasksAsync({
        limit: LIMIT_TASK_NUM,
        offset: lastPageOffset,
        filter,
        direction: sortDirection,
        paramName: sortableParamName,
      })
    );
    dispatch(listTypistsAsync());
    dispatch(listTypistGroupsAsync());
  }, [
    dispatch,
    totalPage,
    filterUploaded,
    filterInProgress,
    filterPending,
    filterFinished,
    filterBackup,
    sortDirection,
    sortableParamName,
  ]);

  const getPrevPage = useCallback(() => {
    const filter = getFilter(
      filterUploaded,
      filterInProgress,
      filterPending,
      filterFinished,
      filterBackup
    );
    const prevPageOffset = (currentPage - 2) * LIMIT_TASK_NUM;
    dispatch(
      listTasksAsync({
        limit: LIMIT_TASK_NUM,
        offset: prevPageOffset,
        filter,
        direction: sortDirection,
        paramName: sortableParamName,
      })
    );
    dispatch(listTypistsAsync());
    dispatch(listTypistGroupsAsync());
  }, [
    dispatch,
    currentPage,
    filterUploaded,
    filterInProgress,
    filterPending,
    filterFinished,
    filterBackup,
    sortDirection,
    sortableParamName,
  ]);

  const getNextPage = useCallback(() => {
    const filter = getFilter(
      filterUploaded,
      filterInProgress,
      filterPending,
      filterFinished,
      filterBackup
    );
    const nextPageOffset = currentPage * LIMIT_TASK_NUM;
    dispatch(
      listTasksAsync({
        limit: LIMIT_TASK_NUM,
        offset: nextPageOffset,
        filter,
        direction: sortDirection,
        paramName: sortableParamName,
      })
    );
    dispatch(listTypistsAsync());
    dispatch(listTypistGroupsAsync());
  }, [
    dispatch,
    currentPage,
    filterUploaded,
    filterInProgress,
    filterPending,
    filterFinished,
    filterBackup,
    sortDirection,
    sortableParamName,
  ]);

  const updateSortColumn = useCallback(
    (paramName: SortableColumnType) => {
      const currentDirection =
        sortableParamName === paramName && sortDirection === DIRECTION.ASC
          ? DIRECTION.DESC
          : DIRECTION.ASC;
      dispatch(changeDirection({ direction: currentDirection }));
      dispatch(changeParamName({ paramName }));

      const filter = getFilter(
        filterUploaded,
        filterInProgress,
        filterPending,
        filterFinished,
        filterBackup
      );

      dispatch(
        listTasksAsync({
          limit: LIMIT_TASK_NUM,
          offset: 0,
          filter,
          direction: currentDirection,
          paramName,
        })
      );
      dispatch(listTypistsAsync());
      dispatch(listTypistGroupsAsync());
    },
    [
      dispatch,
      sortableParamName,
      sortDirection,
      filterUploaded,
      filterInProgress,
      filterPending,
      filterFinished,
      filterBackup,
    ]
  );

  const getFilter = (
    hasUploaded: boolean,
    hasInProgress: boolean,
    hasPending: boolean,
    hasFinished: boolean,
    hasBackup: boolean
  ): string | undefined => {
    const filterStatus = [];
    if (hasUploaded) {
      filterStatus.push(STATUS.UPLOADED);
    }
    if (hasInProgress) {
      filterStatus.push(STATUS.INPROGRESS);
    }
    if (hasPending) {
      filterStatus.push(STATUS.PENDING);
    }
    if (hasFinished) {
      filterStatus.push(STATUS.FINISHED);
    }
    if (hasBackup) {
      filterStatus.push(STATUS.BACKUP);
    }

    if (filterStatus.length === 0) {
      return undefined;
    }
    return filterStatus.join(",");
  };

  // ステータスフィルターの変更時アクション
  const updateFilter = useCallback(
    (
      hasUploaded: boolean,
      hasInProgress: boolean,
      hasPending: boolean,
      hasFinished: boolean,
      hasBackup: boolean
    ) => {
      const filter = getFilter(
        hasUploaded,
        hasInProgress,
        hasPending,
        hasFinished,
        hasBackup
      );
      dispatch(
        listTasksAsync({
          limit: LIMIT_TASK_NUM,
          offset: 0,
          filter,
          direction: sortDirection,
          paramName: sortableParamName,
        })
      );
      dispatch(listTypistsAsync());
      dispatch(listTypistGroupsAsync());
    },
    [dispatch, sortDirection, sortableParamName]
  );

  const onPlayBack = useCallback(
    async (audioFileId: number) => {
      if (
        /* eslint-disable-next-line no-alert */
        !window.confirm(t(getTranslationID("common.message.dialogConfirm")))
      ) {
        return;
      }
      const { meta } = await dispatch(
        playbackAsync({
          audioFileId,
          direction: sortDirection,
          paramName: sortableParamName,
          isTypist,
        })
      );
      if (meta.requestStatus === "fulfilled") {
        const filter = getFilter(
          filterUploaded,
          filterInProgress,
          filterPending,
          filterFinished,
          filterBackup
        );
        dispatch(
          listTasksAsync({
            limit: LIMIT_TASK_NUM,
            offset: 0,
            filter,
            direction: sortDirection,
            paramName: sortableParamName,
          })
        );
        dispatch(listTypistsAsync());
        dispatch(listTypistGroupsAsync());

        const url = `${
          import.meta.env.VITE_DESK_TOP_APP_SCHEME
        }:playback?audioId=${audioFileId}`;
        const a = document.createElement("a");
        a.href = url;
        document.body.appendChild(a);
        a.click();
        document.body.removeChild(a);
      }
    },
    [
      dispatch,
      filterBackup,
      filterFinished,
      filterInProgress,
      filterPending,
      filterUploaded,
      isTypist,
      sortDirection,
      sortableParamName,
      t,
    ]
  );

  const onClosePopup = useCallback(
    (isChanged: boolean) => {
      if (isChanged) {
        const filter = getFilter(
          filterUploaded,
          filterInProgress,
          filterPending,
          filterFinished,
          filterBackup
        );
        dispatch(
          listTasksAsync({
            limit: LIMIT_TASK_NUM,
            offset: 0,
            filter,
            direction: sortDirection,
            paramName: sortableParamName,
          })
        );
      }
      setIsChangeTranscriptionistPopupOpen(false);
    },
    [
      dispatch,
      filterUploaded,
      filterInProgress,
      filterPending,
      filterFinished,
      filterBackup,
      sortDirection,
      sortableParamName,
    ]
  );

  const sortIconClass = (
    currentParam: SortableColumnType,
    currentDirection: DirectionType,
    column: SortableColumnType
  ) => {
    if (currentParam !== column) {
      return "";
    }
    if (currentDirection === DIRECTION.DESC) {
      return styles.isActiveZa;
    }
    return styles.isActiveAz;
  };

  // 初回読み込み処理
  useEffect(() => {
    (async () => {
      const displayInfoValue = localStorage.getItem("displayInfo");

      let displayInfo: DisplayInfoType;
      if (displayInfoValue) {
        displayInfo = JSON.parse(displayInfoValue);
      } else {
        displayInfo = INIT_DISPLAY_INFO;
        localStorage.setItem("displayInfo", JSON.stringify(displayInfo));
      }

      dispatch(changeDisplayInfo({ column: displayInfo }));

      const filter = getFilter(true, true, true, true, false);
      const { meta, payload } = await dispatch(getSortColumnAsync());
      if (
        meta.requestStatus === "fulfilled" &&
        payload &&
        !("error" in payload)
      ) {
        const { direction, paramName } = payload;
        dispatch(
          listTasksAsync({
            limit: LIMIT_TASK_NUM,
            offset: 0,
            filter,
            direction,
            paramName,
          })
        );
        dispatch(listTypistsAsync());
        dispatch(listTypistGroupsAsync());
      }
    })();
  }, [dispatch]);

  return (
    <>
      <ChangeTranscriptionistPopup
        isOpen={isChangeTranscriptionistPopupOpen}
        onClose={onClosePopup}
      />
      <div className={styles.wrap}>
        <Header userName="XXXXXX" />
        <main className={styles.main}>
          <div className="">
            <div className={styles.pageHeader}>
              <h1 className={styles.pageTitle}>
                {t(getTranslationID("dictationPage.label.title"))}
              </h1>
            </div>

            <section className={styles.dictation}>
              <div>
                <DisPlayInfo />
                <ul className={styles.tableFilter}>
                  <li>{t(getTranslationID("dictationPage.label.filter"))}:</li>
                  <li>
                    <label htmlFor="uploaded">
                      <input
                        id="uploaded"
                        type="checkbox"
                        value="flUploaded"
                        className={styles.formCheck}
                        checked={filterUploaded}
                        disabled={isLoading}
                        onChange={(e) => {
                          setFilterUploaded(e.target.checked);
                          updateFilter(
                            e.target.checked,
                            filterInProgress,
                            filterPending,
                            filterFinished,
                            filterBackup
                          );
                        }}
                      />
                      {t(getTranslationID("dictationPage.label.uploaded"))}
                    </label>
                  </li>
                  <li>
                    <label htmlFor="inProgress">
                      <input
                        id="inProgress"
                        type="checkbox"
                        value="flInProgress"
                        className={styles.formCheck}
                        checked={filterInProgress}
                        disabled={isLoading}
                        onChange={(e) => {
                          setFilterInProgress(e.target.checked);
                          updateFilter(
                            filterUploaded,
                            e.target.checked,
                            filterPending,
                            filterFinished,
                            filterBackup
                          );
                        }}
                      />
                      {t(getTranslationID("dictationPage.label.inProgress"))}
                    </label>
                  </li>
                  <li>
                    <label htmlFor="pending">
                      <input
                        id="pending"
                        type="checkbox"
                        value="flPending"
                        className={styles.formCheck}
                        checked={filterPending}
                        disabled={isLoading}
                        onChange={(e) => {
                          setFilterPending(e.target.checked);
                          updateFilter(
                            filterUploaded,
                            filterInProgress,
                            e.target.checked,
                            filterFinished,
                            filterBackup
                          );
                        }}
                      />
                      {t(getTranslationID("dictationPage.label.pending"))}
                    </label>
                  </li>
                  <li>
                    <label htmlFor="finished">
                      <input
                        id="finished"
                        type="checkbox"
                        value="flFinished"
                        className={styles.formCheck}
                        checked={filterFinished}
                        disabled={isLoading}
                        onChange={(e) => {
                          setFilterFinished(e.target.checked);
                          updateFilter(
                            filterUploaded,
                            filterInProgress,
                            filterPending,
                            e.target.checked,
                            filterBackup
                          );
                        }}
                      />
                      {t(getTranslationID("dictationPage.label.finished"))}
                    </label>
                  </li>
                  <li>
                    <label htmlFor="backup">
                      <input
                        id="backup"
                        type="checkbox"
                        value="flBackup"
                        className={styles.formCheck}
                        checked={filterBackup}
                        disabled={isLoading}
                        onChange={(e) => {
                          setFilterBackup(e.target.checked);
                          updateFilter(
                            filterUploaded,
                            filterInProgress,
                            filterPending,
                            filterFinished,
                            e.target.checked
                          );
                        }}
                      />
                      {t(getTranslationID("dictationPage.label.backup"))}
                    </label>
                  </li>
                </ul>

                <div className={styles.tableWrap}>
                  <table className={`${styles.table} ${styles.dictation}`}>
                    <tr className={styles.tableHeader}>
                      <th className={styles.clm0}>{/** th is empty */}</th>
                      {displayColumn.JobNumber && (
                        <th className={styles.clm1}>
                          {/* eslint-disable-next-line jsx-a11y/click-events-have-key-events,jsx-a11y/no-static-element-interactions */}
                          <a
                            className={`${styles.hasSort} ${sortIconClass(
                              sortableParamName,
                              sortDirection,
                              SORTABLE_COLUMN.JobNumber
                            )}`}
                            onClick={() =>
                              updateSortColumn(SORTABLE_COLUMN.JobNumber)
                            }
                            style={{
                              pointerEvents: isLoading ? "none" : "auto",
                            }}
                          >
                            {t(
                              getTranslationID("dictationPage.label.jobNumber")
                            )}
                          </a>
                        </th>
                      )}
                      {displayColumn.Status && (
                        <th className={styles.clm2}>
                          {/* eslint-disable-next-line jsx-a11y/click-events-have-key-events,jsx-a11y/no-static-element-interactions */}
                          <a
                            className={`${styles.hasSort} ${sortIconClass(
                              sortableParamName,
                              sortDirection,
                              SORTABLE_COLUMN.Status
                            )}`}
                            onClick={() =>
                              updateSortColumn(SORTABLE_COLUMN.Status)
                            }
                            style={{
                              pointerEvents: isLoading ? "none" : "auto",
                            }}
                          >
                            {t(getTranslationID("dictationPage.label.status"))}
                          </a>
                        </th>
                      )}
                      {displayColumn.Priority && (
                        <th className={styles.clm3}>Priority</th>
                      )}
                      {displayColumn.Encryption && (
                        <th className={styles.clm4}>
                          {/* eslint-disable-next-line jsx-a11y/click-events-have-key-events,jsx-a11y/no-static-element-interactions */}
                          <a
                            className={`${styles.hasSort} ${sortIconClass(
                              sortableParamName,
                              sortDirection,
                              SORTABLE_COLUMN.Encryption
                            )}`}
                            onClick={() =>
                              updateSortColumn(SORTABLE_COLUMN.Encryption)
                            }
                            style={{
                              pointerEvents: isLoading ? "none" : "auto",
                            }}
                          >
                            {t(
                              getTranslationID("dictationPage.label.encryption")
                            )}
                          </a>
                        </th>
                      )}
                      {displayColumn.AuthorId && (
                        <th className={styles.clm5}>
                          {/* eslint-disable-next-line jsx-a11y/click-events-have-key-events,jsx-a11y/no-static-element-interactions */}
                          <a
                            className={`${styles.hasSort} ${sortIconClass(
                              sortableParamName,
                              sortDirection,
                              SORTABLE_COLUMN.AuthorId
                            )}`}
                            onClick={() =>
                              updateSortColumn(SORTABLE_COLUMN.AuthorId)
                            }
                            style={{
                              pointerEvents: isLoading ? "none" : "auto",
                            }}
                          >
                            {t(
                              getTranslationID("dictationPage.label.authorId")
                            )}
                          </a>
                        </th>
                      )}
                      {displayColumn.WorkType && (
                        <th className={styles.clm6}>
                          {/* eslint-disable-next-line jsx-a11y/click-events-have-key-events,jsx-a11y/no-static-element-interactions */}
                          <a
                            className={`${styles.hasSort} ${sortIconClass(
                              sortableParamName,
                              sortDirection,
                              SORTABLE_COLUMN.WorkType
                            )}`}
                            onClick={() =>
                              updateSortColumn(SORTABLE_COLUMN.WorkType)
                            }
                            style={{
                              pointerEvents: isLoading ? "none" : "auto",
                            }}
                          >
                            {t(
                              getTranslationID("dictationPage.label.workType")
                            )}
                          </a>
                        </th>
                      )}
                      {displayColumn.FileName && (
                        <th className={styles.clm7}>
                          {/* eslint-disable-next-line jsx-a11y/click-events-have-key-events,jsx-a11y/no-static-element-interactions */}
                          <a
                            className={`${styles.hasSort} ${sortIconClass(
                              sortableParamName,
                              sortDirection,
                              SORTABLE_COLUMN.FileName
                            )}`}
                            onClick={() =>
                              updateSortColumn(SORTABLE_COLUMN.FileName)
                            }
                            style={{
                              pointerEvents: isLoading ? "none" : "auto",
                            }}
                          >
                            {t(
                              getTranslationID("dictationPage.label.fileName")
                            )}
                          </a>
                        </th>
                      )}
                      {displayColumn.FileLength && (
                        <th className={styles.clm8}>
                          {/* eslint-disable-next-line jsx-a11y/click-events-have-key-events,jsx-a11y/no-static-element-interactions */}
                          <a
                            className={`${styles.hasSort} ${sortIconClass(
                              sortableParamName,
                              sortDirection,
                              SORTABLE_COLUMN.FileLength
                            )}`}
                            onClick={() =>
                              updateSortColumn(SORTABLE_COLUMN.FileLength)
                            }
                            style={{
                              pointerEvents: isLoading ? "none" : "auto",
                            }}
                          >
                            {t(
                              getTranslationID("dictationPage.label.fileLength")
                            )}
                          </a>
                        </th>
                      )}
                      {displayColumn.FileSize && (
                        <th className={styles.clm9}>
                          {/* eslint-disable-next-line jsx-a11y/click-events-have-key-events,jsx-a11y/no-static-element-interactions */}
                          <a
                            className={`${styles.hasSort} ${sortIconClass(
                              sortableParamName,
                              sortDirection,
                              SORTABLE_COLUMN.FileSize
                            )}`}
                            onClick={() =>
                              updateSortColumn(SORTABLE_COLUMN.FileSize)
                            }
                            style={{
                              pointerEvents: isLoading ? "none" : "auto",
                            }}
                          >
                            {t(
                              getTranslationID("dictationPage.label.fileSize")
                            )}
                          </a>
                        </th>
                      )}
                      {displayColumn.RecordingStartedDate && (
                        <th className={styles.clm10}>
                          {/* eslint-disable-next-line jsx-a11y/click-events-have-key-events,jsx-a11y/no-static-element-interactions */}
                          <a
                            className={`${styles.hasSort} ${sortIconClass(
                              sortableParamName,
                              sortDirection,
                              SORTABLE_COLUMN.RecordingStartedDate
                            )}`}
                            onClick={() =>
                              updateSortColumn(
                                SORTABLE_COLUMN.RecordingStartedDate
                              )
                            }
                            style={{
                              pointerEvents: isLoading ? "none" : "auto",
                            }}
                          >
                            {t(
                              getTranslationID(
                                "dictationPage.label.recordingStartedDate"
                              )
                            )}
                          </a>
                        </th>
                      )}
                      {displayColumn.RecordingFinishedDate && (
                        <th className={styles.clm11}>
                          {/* eslint-disable-next-line jsx-a11y/click-events-have-key-events,jsx-a11y/no-static-element-interactions */}
                          <a
                            className={`${styles.hasSort} ${sortIconClass(
                              sortableParamName,
                              sortDirection,
                              SORTABLE_COLUMN.RecordingFinishedDate
                            )}`}
                            onClick={() =>
                              updateSortColumn(
                                SORTABLE_COLUMN.RecordingFinishedDate
                              )
                            }
                            style={{
                              pointerEvents: isLoading ? "none" : "auto",
                            }}
                          >
                            {t(
                              getTranslationID(
                                "dictationPage.label.recordingFinishedDate"
                              )
                            )}
                          </a>
                        </th>
                      )}
                      {displayColumn.UploadDate && (
                        <th className={styles.clm12}>
                          {/* eslint-disable-next-line jsx-a11y/click-events-have-key-events,jsx-a11y/no-static-element-interactions */}
                          <a
                            className={`${styles.hasSort} ${sortIconClass(
                              sortableParamName,
                              sortDirection,
                              SORTABLE_COLUMN.UploadDate
                            )}`}
                            onClick={() =>
                              updateSortColumn(SORTABLE_COLUMN.UploadDate)
                            }
                            style={{
                              pointerEvents: isLoading ? "none" : "auto",
                            }}
                          >
                            {t(
                              getTranslationID("dictationPage.label.uploadDate")
                            )}
                          </a>
                        </th>
                      )}
                      {displayColumn.TranscriptionStartedDate && (
                        <th className={styles.clm13}>
                          {/* eslint-disable-next-line jsx-a11y/click-events-have-key-events,jsx-a11y/no-static-element-interactions */}
                          <a
                            className={`${styles.hasSort} ${sortIconClass(
                              sortableParamName,
                              sortDirection,
                              SORTABLE_COLUMN.TranscriptionStartedDate
                            )}`}
                            onClick={() =>
                              updateSortColumn(
                                SORTABLE_COLUMN.TranscriptionStartedDate
                              )
                            }
                            style={{
                              pointerEvents: isLoading ? "none" : "auto",
                            }}
                          >
                            {t(
                              getTranslationID(
                                "dictationPage.label.transcriptionStartedDate"
                              )
                            )}
                          </a>
                        </th>
                      )}
                      {displayColumn.TranscriptionFinishedDate && (
                        <th className={styles.clm14}>
                          {/* eslint-disable-next-line jsx-a11y/click-events-have-key-events,jsx-a11y/no-static-element-interactions */}
                          <a
                            className={`${styles.hasSort} ${sortIconClass(
                              sortableParamName,
                              sortDirection,
                              SORTABLE_COLUMN.TranscriptionFinishedDate
                            )}`}
                            onClick={() =>
                              updateSortColumn(
                                SORTABLE_COLUMN.TranscriptionFinishedDate
                              )
                            }
                            style={{
                              pointerEvents: isLoading ? "none" : "auto",
                            }}
                          >
                            {t(
                              getTranslationID(
                                "dictationPage.label.transcriptionFinishedDate"
                              )
                            )}
                          </a>
                        </th>
                      )}
                      {displayColumn.Transcriptionist && (
                        <th className={styles.clm15}>
                          {t(
                            getTranslationID(
                              "dictationPage.label.transcriptionist"
                            )
                          )}
                        </th>
                      )}
                      {displayColumn.Comment && (
                        <th className={styles.clm16}>
                          {t(getTranslationID("dictationPage.label.comment"))}
                        </th>
                      )}
                      {displayColumn.OptionItem1 && (
                        <th className={styles.op1}>
                          {t(
                            getTranslationID("dictationPage.label.optionItem1")
                          )}
                        </th>
                      )}
                      {displayColumn.OptionItem2 && (
                        <th className={styles.op2}>
                          {t(
                            getTranslationID("dictationPage.label.optionItem2")
                          )}
                        </th>
                      )}
                      {displayColumn.OptionItem3 && (
                        <th className={styles.op3}>
                          {t(
                            getTranslationID("dictationPage.label.optionItem3")
                          )}
                        </th>
                      )}
                      {displayColumn.OptionItem4 && (
                        <th className={styles.op4}>
                          {t(
                            getTranslationID("dictationPage.label.optionItem4")
                          )}
                        </th>
                      )}
                      {displayColumn.OptionItem5 && (
                        <th className={styles.op5}>
                          {t(
                            getTranslationID("dictationPage.label.optionItem5")
                          )}
                        </th>
                      )}
                      {displayColumn.OptionItem6 && (
                        <th className={styles.op6}>
                          {t(
                            getTranslationID("dictationPage.label.optionItem6")
                          )}
                        </th>
                      )}
                      {displayColumn.OptionItem7 && (
                        <th className={styles.op7}>
                          {t(
                            getTranslationID("dictationPage.label.optionItem7")
                          )}
                        </th>
                      )}
                      {displayColumn.OptionItem8 && (
                        <th className={styles.op8}>
                          {t(
                            getTranslationID("dictationPage.label.optionItem8")
                          )}
                        </th>
                      )}
                      {displayColumn.OptionItem9 && (
                        <th className={styles.op9}>
                          {t(
                            getTranslationID("dictationPage.label.optionItem9")
                          )}
                        </th>
                      )}
                      {displayColumn.OptionItem10 && (
                        <th className={styles.op10}>
                          {t(
                            getTranslationID("dictationPage.label.optionItem10")
                          )}
                        </th>
                      )}
                    </tr>
                    {(isChangeTranscriptionistPopupOpen || !isLoading) &&
                      tasks.length !== 0 &&
                      tasks.map((x) => (
                        <tr key={x.audioFileId}>
                          <td className={styles.clm0}>
                            <ul className={styles.menuInTable}>
                              <li>
                                {/* eslint-disable-next-line jsx-a11y/click-events-have-key-events,jsx-a11y/no-static-element-interactions */}
                                <a onClick={() => onPlayBack(x.audioFileId)}>
                                  {t(
                                    getTranslationID(
                                      "dictationPage.label.playback"
                                    )
                                  )}
                                </a>
                              </li>
                              <li>
                                <a>
                                  {t(
                                    getTranslationID(
                                      "dictationPage.label.fileProperty"
                                    )
                                  )}
                                </a>
                              </li>
                              <li>
                                {/* eslint-disable-next-line jsx-a11y/click-events-have-key-events,jsx-a11y/no-static-element-interactions */}
                                <a
                                  className={
                                    x.status !== STATUS.UPLOADED ||
                                    !(isAdmin || isAuthor)
                                      ? styles.isDisable
                                      : ""
                                  }
                                  onClick={() => {
                                    onChangeTranscriptionistPopupOpen(x);
                                  }}
                                >
                                  {t(
                                    getTranslationID(
                                      "dictationPage.label.changeTranscriptionist"
                                    )
                                  )}
                                </a>
                              </li>
                              <li>
                                <a>
                                  {t(
                                    getTranslationID(
                                      "dictationPage.label.deleteDictation"
                                    )
                                  )}
                                </a>
                              </li>
                            </ul>
                          </td>
                          {displayColumn.JobNumber && (
                            <td className={styles.clm1}>{x.jobNumber}</td>
                          )}
                          {displayColumn.Status && (
                            <td className={styles.clm2}>
                              {(() => {
                                switch (x.status) {
                                  case STATUS.UPLOADED:
                                    return (
                                      <img src={uploaded} alt="Uploaded" />
                                    );
                                  case STATUS.PENDING:
                                    return <img src={pending} alt="Pending" />;
                                  case STATUS.FINISHED:
                                    return (
                                      <img src={finished} alt="Finished" />
                                    );
                                  case STATUS.INPROGRESS:
                                    return (
                                      <img src={inprogress} alt="InProgress" />
                                    );
                                  default:
                                    return <img src={backup} alt="Backup" />;
                                }
                              })()}
                              {x.status}
                            </td>
                          )}
                          {displayColumn.Priority && (
                            <td className={styles.clm3}>
                              {x.priority === "01" ? "High" : "Normal"}
                            </td>
                          )}
                          {displayColumn.Encryption && (
                            <td className={styles.clm4}>
                              {x.isEncrypted ? (
                                <img src={lock} alt="encrypted" />
                              ) : (
                                <>-</>
                              )}
                            </td>
                          )}
                          {displayColumn.AuthorId && (
                            <td className={styles.clm5}>{x.authorId}</td>
                          )}
                          {displayColumn.WorkType && (
                            <td className={styles.clm6}>{x.workType}</td>
                          )}
                          {displayColumn.FileName && (
                            <td className={styles.clm7}>{x.fileName}</td>
                          )}
                          {displayColumn.FileLength && (
                            <td className={styles.clm8}>{x.audioDuration}</td>
                          )}
                          {displayColumn.FileSize && (
                            <td className={styles.clm9}>{x.fileSize}</td>
                          )}
                          {displayColumn.RecordingStartedDate && (
                            <td className={styles.clm10}>
                              {x.audioCreatedDate}
                            </td>
                          )}
                          {displayColumn.RecordingFinishedDate && (
                            <td className={styles.clm11}>
                              {x.audioFinishedDate}
                            </td>
                          )}
                          {displayColumn.UploadDate && (
                            <td className={styles.clm12}>
                              {x.audioUploadedDate}
                            </td>
                          )}
                          {displayColumn.TranscriptionStartedDate && (
                            <td className={styles.clm13}>
                              {x.transcriptionStartedDate}
                            </td>
                          )}
                          {displayColumn.TranscriptionFinishedDate && (
                            <td className={styles.clm14}>
                              {x.transcriptionFinishedDate}
                            </td>
                          )}
                          {displayColumn.Transcriptionist && (
                            <td
                              className={`${styles.txWsline} ${styles.clm15}`}
                            >
                              {x.assignees.map((a, i) => (
                                <>
                                  {a.typistName}
                                  {i !== x.assignees.length - 1 && <br />}
                                </>
                              ))}
                            </td>
                          )}
                          {displayColumn.Comment && (
                            <td className={styles.clm16}>{x.comment}</td>
                          )}
                          {displayColumn.OptionItem1 && (
                            <td className={styles.op1}>
                              {x.optionItemList[0].optionItemValue}
                            </td>
                          )}

                          {displayColumn.OptionItem2 && (
                            <td className={styles.op2}>
                              {x.optionItemList[1].optionItemValue}
                            </td>
                          )}
                          {displayColumn.OptionItem3 && (
                            <td className={styles.op3}>
                              {x.optionItemList[2].optionItemValue}
                            </td>
                          )}
                          {displayColumn.OptionItem4 && (
                            <td className={styles.op4}>
                              {x.optionItemList[3].optionItemValue}
                            </td>
                          )}
                          {displayColumn.OptionItem5 && (
                            <td className={styles.op5}>
                              {x.optionItemList[4].optionItemValue}
                            </td>
                          )}
                          {displayColumn.OptionItem6 && (
                            <td className={styles.op6}>
                              {x.optionItemList[5].optionItemValue}
                            </td>
                          )}
                          {displayColumn.OptionItem7 && (
                            <td className={styles.op7}>
                              {x.optionItemList[6].optionItemValue}
                            </td>
                          )}
                          {displayColumn.OptionItem8 && (
                            <td className={styles.op8}>
                              {x.optionItemList[7].optionItemValue}
                            </td>
                          )}
                          {displayColumn.OptionItem9 && (
                            <td className={styles.op9}>
                              {x.optionItemList[8].optionItemValue}
                            </td>
                          )}
                          {displayColumn.OptionItem10 && (
                            <td className={styles.op10}>
                              {x.optionItemList[9].optionItemValue}
                            </td>
                          )}
                        </tr>
                      ))}
                  </table>
                  {(isChangeTranscriptionistPopupOpen || !isLoading) &&
                    tasks.length === 0 && (
                      <p style={{ margin: "10px", textAlign: "center" }}>
                        {t(getTranslationID("common.message.listEmpty"))}
                      </p>
                    )}
                </div>
                {isLoading && (
                  <img
                    style={{ position: "sticky" }}
                    src={progress_activit}
                    className={styles.icLoading}
                    alt="Loading"
                  />
                )}
                {/** pagenation */}
                <div className={styles.pagenation}>
                  <nav className={styles.pagenationNav}>
                    <span className={styles.pagenationTotal}>{`${total} ${t(
                      getTranslationID("dictationPage.label.title")
                    )}`}</span>
                    {/* eslint-disable-next-line jsx-a11y/click-events-have-key-events,jsx-a11y/no-static-element-interactions */}
                    <a
                      className={`${
                        !isLoading && currentPage !== 1 ? styles.isActive : ""
                      }`}
                      onClick={getFirstPage}
                    >
                      «
                    </a>
                    {/* eslint-disable-next-line jsx-a11y/click-events-have-key-events,jsx-a11y/no-static-element-interactions */}
                    <a
                      className={`${
                        !isLoading && currentPage !== 1 ? styles.isActive : ""
                      }`}
                      onClick={getPrevPage}
                    >
                      ‹
                    </a>
                    {`${currentPage} of ${totalPage}`}
                    {/* eslint-disable-next-line jsx-a11y/click-events-have-key-events,jsx-a11y/no-static-element-interactions */}
                    <a
                      className={`${
                        !isLoading && currentPage < totalPage
                          ? styles.isActive
                          : ""
                      }`}
                      onClick={getNextPage}
                    >
                      ›
                    </a>
                    {/* eslint-disable-next-line jsx-a11y/click-events-have-key-events,jsx-a11y/no-static-element-interactions */}
                    <a
                      className={`${
                        !isLoading && currentPage < totalPage
                          ? styles.isActive
                          : ""
                      }`}
                      onClick={getLastPage}
                    >
                      »
                    </a>
                  </nav>
                </div>
              </div>
            </section>
          </div>
        </main>
        <Footer />
      </div>
    </>
  );
};

export default DictationPage;
