import { useEffect } from "react";
import { observer } from "mobx-react-lite";
import { Col, Row } from "reactstrap";
import { useTranslation } from "react-i18next";

import { useEtcStore } from "src/Stores";
import DateView from "src/etc/DateView";
import Mode from "src/etc/Mode";
import { m0, m1, m2, m3, m4, m5, m6, m7, m8, _m12 } from "src/Utility";
import { EtcLoading } from "src/Loading";
import TotalNoteFiles from "src/etc/TotalNoteFiles";
import TotalTitles from "src/etc/TotalTitles";
import TotalEdges from "src/etc/TotalEdges";
import FavoriteNoteFiles from "./FavoriteNoteFiles";

export default observer(() => {
  const {
    totalDateSet,
    totalDateValues,
    signUpDateSet,
    signUpDateValues,
    avatarDateSet,
    avatarDateValues,
    favoriteNoteFileValues,
    favoriteNoteFileAtValues,
    inputModeValues,
    autoModeValues,
    noteSaltModeValues,
    faintNoteModeValues,
    judgmentModeValues,
    hitPointsModeValues,
    noteMobilityModeValues,
    longNoteModeValues,
    inputFavorModeValues,
    noteModifyModeValues,
    lowestJudgmentConditionModeValues,
    isLoading,
    getEtc,
  } = useEtcStore();
  const { t } = useTranslation();

  useEffect(() => {
    getEtc();
  }, [getEtc]);

  if (isLoading) {
    return <EtcLoading />;
  }

  return (
    <>
      <Row className="g-0">
        <Col className="m-1" xs="auto">
          <DateView
            title={t("etcTotal")}
            dateSet={totalDateSet}
            dateValues={totalDateValues}
          />
        </Col>
        <Col className="m-1" xs="auto">
          <DateView
            title={t("etcSignUp")}
            dateSet={signUpDateSet}
            dateValues={signUpDateValues}
          />
        </Col>
        <Col className="m-1" xs="auto">
          <DateView
            title={t("etcAvatar")}
            dateSet={avatarDateSet}
            dateValues={avatarDateValues}
          />
        </Col>
      </Row>
      <Row className="g-0">
        <Col className="m-1" xs="auto">
          <TotalNoteFiles />
        </Col>
        <Col className="m-1" xs="auto">
          <TotalTitles />
        </Col>
        <Col className="m-1" xs="auto">
          <TotalEdges />
        </Col>
      </Row>
      <Row className="g-0">
        <Col className="m-1" xs="auto">
          <FavoriteNoteFiles
            title={t("etcFavoriteNoteFiles")}
            favoriteNoteFiles={favoriteNoteFileValues}
          />
        </Col>
        <Col className="m-1" xs="auto">
          <FavoriteNoteFiles
            title={t("etcFavoriteNoteFilesAt")}
            favoriteNoteFiles={favoriteNoteFileAtValues}
          />
        </Col>
      </Row>
      <Row className="g-0">
        <Col className="m-1" xs="auto">
          <Mode
            title={t("etcInputMode")}
            values={inputModeValues}
            drawings={m7}
          />
        </Col>
        <Col className="m-1" xs="auto">
          <Mode
            title={t("etcAutoMode")}
            values={autoModeValues}
            drawings={m0}
          />
        </Col>
        <Col className="m-1" xs="auto">
          <Mode
            title={t("etcNoteSaltMode")}
            values={noteSaltModeValues}
            drawings={m1}
          />
        </Col>
        <Col className="m-1" xs="auto">
          <Mode
            title={t("etcFaintNoteMode")}
            values={faintNoteModeValues}
            drawings={m2}
          />
        </Col>
        <Col className="m-1" xs="auto">
          <Mode
            title={t("etcJudgmentMode")}
            values={judgmentModeValues}
            drawings={m3}
          />
        </Col>
        <Col className="m-1" xs="auto">
          <Mode
            title={t("etcHitPointsMode")}
            values={hitPointsModeValues}
            drawings={m4}
          />
        </Col>
        <Col className="m-1" xs="auto">
          <Mode
            title={t("etcNoteMobilityMode")}
            values={noteMobilityModeValues}
            drawings={m5}
          />
        </Col>
        <Col className="m-1" xs="auto">
          <Mode
            title={t("etcLongNoteMode")}
            values={longNoteModeValues}
            drawings={m6}
          />
        </Col>
        <Col className="m-1" xs="auto">
          <Mode
            title={t("etcInputFavorMode")}
            values={inputFavorModeValues}
            drawings={m7}
          />
        </Col>
        <Col className="m-1" xs="auto">
          <Mode
            title={t("etcNoteModifyMode")}
            values={noteModifyModeValues}
            drawings={m8}
          />
        </Col>
        <Col className="m-1" xs="auto">
          <Mode
            title={t("etcLowestJudgmentConditionMode")}
            values={lowestJudgmentConditionModeValues}
            drawings={_m12}
          />
        </Col>
      </Row>
    </>
  );
});