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 ModeItem from "src/etc/ModeItem";
import { _m12, m0, m1, m2, m3, m4, m5, m6, m7, m8 } from "src/Utility";
import { EtcViewLoading } from "src/Loading";
import TotalNoteFilesView from "src/etc/TotalNoteFilesView";
import TotalTitlesView from "src/etc/TotalTitlesView";
import TotalEdgesView from "src/etc/TotalEdgesView";
import FavoritesView from "./FavoritesView";

export default observer(() => {
  const {
    totalDateSet,
    totalDateValues,
    signUpDateSet,
    signUpDateValues,
    avatarDateSet,
    avatarDateValues,
    favorites,
    favoritesAt,
    inputModes,
    autoModes,
    noteSaltModes,
    faintNoteModes,
    judgmentModes,
    hitPointsModes,
    noteMobilityModes,
    longNoteModes,
    inputFavorModes,
    noteModifyModes,
    lowestJudgmentConditionModes,
    isLoading,
    getEtc,
  } = useEtcStore();
  const { t } = useTranslation();

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

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

  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">
          <TotalNoteFilesView />
        </Col>
        <Col className="m-1" xs="auto">
          <TotalTitlesView />
        </Col>
        <Col className="m-1" xs="auto">
          <TotalEdgesView />
        </Col>
      </Row>
      <Row className="g-0">
        <Col className="m-1" xs="auto">
          <FavoritesView title={t("etcFavorites")} favorites={favorites} />
        </Col>
        <Col className="m-1" xs="auto">
          <FavoritesView title={t("etcFavoritesAt")} favorites={favoritesAt} />
        </Col>
      </Row>
      <Row className="g-0">
        <Col className="m-1" xs="auto">
          <ModeItem
            title={t("etcInputMode")}
            modes={inputModes}
            drawings={m7}
          />
        </Col>
        <Col className="m-1" xs="auto">
          <ModeItem title={t("etcAutoMode")} modes={autoModes} drawings={m0} />
        </Col>
        <Col className="m-1" xs="auto">
          <ModeItem
            title={t("etcNoteSaltMode")}
            modes={noteSaltModes}
            drawings={m1}
          />
        </Col>
        <Col className="m-1" xs="auto">
          <ModeItem
            title={t("etcFaintNoteMode")}
            modes={faintNoteModes}
            drawings={m2}
          />
        </Col>
        <Col className="m-1" xs="auto">
          <ModeItem
            title={t("etcJudgmentMode")}
            modes={judgmentModes}
            drawings={m3}
          />
        </Col>
        <Col className="m-1" xs="auto">
          <ModeItem
            title={t("etcHitPointsMode")}
            modes={hitPointsModes}
            drawings={m4}
          />
        </Col>
        <Col className="m-1" xs="auto">
          <ModeItem
            title={t("etcNoteMobilityMode")}
            modes={noteMobilityModes}
            drawings={m5}
          />
        </Col>
        <Col className="m-1" xs="auto">
          <ModeItem
            title={t("etcLongNoteMode")}
            modes={longNoteModes}
            drawings={m6}
          />
        </Col>
        <Col className="m-1" xs="auto">
          <ModeItem
            title={t("etcInputFavorMode")}
            modes={inputFavorModes}
            drawings={m7}
          />
        </Col>
        <Col className="m-1" xs="auto">
          <ModeItem
            title={t("etcNoteModifyMode")}
            modes={noteModifyModes}
            drawings={m8}
          />
        </Col>
        <Col className="m-1" xs="auto">
          <ModeItem
            title={t("etcLowestJudgmentConditionMode")}
            modes={lowestJudgmentConditionModes}
            drawings={_m12}
          />
        </Col>
      </Row>
    </>
  );
});