"use client";

import DateView from "@/app/[language]/etc/components/DateView";
import FavoritesView from "@/app/[language]/etc/components/FavoritesView";
import ModesView from "@/app/[language]/etc/components/ModesView";
import TotalEdgesView from "@/app/[language]/etc/components/TotalEdgesView";
import TotalNoteFilesView from "@/app/[language]/etc/components/TotalNoteFilesView";
import TotalTitlesView from "@/app/[language]/etc/components/TotalTitlesView";
import Loading from "@/app/[language]/etc/loading";
import useGetEtc from "@/app/[language]/etc/query/useGetEtc";
import {
  is,
  m0s,
  m12s,
  m1s,
  m2s,
  m3s,
  m4s,
  m5s,
  m6s,
  m7s,
  m8s,
} from "@/utilities/Utility";
import { useTranslations } from "next-intl";
import Col from "react-bootstrap/Col";
import Row from "react-bootstrap/Row";

export default function Page() {
  const t = useTranslations();

  const {
    data: {
      totalDateSet,
      totalDateValues,
      enrollDateSet,
      enrollDateValues,
      avatarDateSet,
      avatarDateValues,
      totalNoteFiles,
      totalTitles,
      totalEdges,
      favorites,
      favoritesAt,
      inputModes,
      autoModes,
      noteSaltModes,
      faintNoteModes,
      judgmentModes,
      hitPointsModes,
      noteMobilityModes,
      longNoteModes,
      inputFavorModes,
      noteModifyModes,
      lowestJudgmentConditionModes,
    },
    isFetched: isEtcLoaded,
  } = useGetEtc();

  if (!isEtcLoaded) {
    return <Loading />;
  }

  return (
    <>
      <Row className="g-4">
        <Col xs="auto">
          <DateView
            title={t("etcTotal")}
            dateSet={totalDateSet}
            dateValues={totalDateValues}
          />
        </Col>
        <Col xs="auto">
          <DateView
            title={t("etcEnroll")}
            dateSet={enrollDateSet}
            dateValues={enrollDateValues}
          />
        </Col>
        <Col xs="auto">
          <DateView
            title={t("etcAvatar")}
            dateSet={avatarDateSet}
            dateValues={avatarDateValues}
          />
        </Col>
        <Col xs="auto">
          <TotalNoteFilesView totalNoteFiles={totalNoteFiles} />
        </Col>
        <Col xs="auto">
          <TotalTitlesView totalTitles={totalTitles} />
        </Col>
        <Col xs="auto">
          <TotalEdgesView totalEdges={totalEdges} />
        </Col>
        <Col xs="auto">
          <FavoritesView title={t("etcFavorites")} favorites={favorites} />
        </Col>
        <Col xs="auto">
          <FavoritesView title={t("etcFavoritesAt")} favorites={favoritesAt} />
        </Col>
        <Col xs="auto">
          <ModesView
            title={t("etcInputMode")}
            modes={inputModes}
            drawings={is}
          />
        </Col>
        <Col xs="auto">
          <ModesView
            title={t("etcAutoMode")}
            modes={autoModes}
            drawings={m0s}
          />
        </Col>
        <Col xs="auto">
          <ModesView
            title={t("etcNoteSaltMode")}
            modes={noteSaltModes}
            drawings={m1s}
          />
        </Col>
        <Col xs="auto">
          <ModesView
            title={t("etcFaintNoteMode")}
            modes={faintNoteModes}
            drawings={m2s}
          />
        </Col>
        <Col xs="auto">
          <ModesView
            title={t("etcJudgmentMode")}
            modes={judgmentModes}
            drawings={m3s}
          />
        </Col>
        <Col xs="auto">
          <ModesView
            title={t("etcHitPointsMode")}
            modes={hitPointsModes}
            drawings={m4s}
          />
        </Col>
        <Col xs="auto">
          <ModesView
            title={t("etcNoteMobilityMode")}
            modes={noteMobilityModes}
            drawings={m5s}
          />
        </Col>
        <Col xs="auto">
          <ModesView
            title={t("etcLongNoteMode")}
            modes={longNoteModes}
            drawings={m6s}
          />
        </Col>
        <Col xs="auto">
          <ModesView
            title={t("etcInputFavorMode")}
            modes={inputFavorModes}
            drawings={m7s}
          />
        </Col>
        <Col xs="auto">
          <ModesView
            title={t("etcNoteModifyMode")}
            modes={noteModifyModes}
            drawings={m8s}
          />
        </Col>
        <Col xs="auto">
          <ModesView
            title={t("etcLowestJudgmentConditionMode")}
            modes={lowestJudgmentConditionModes}
            drawings={m12s}
          />
        </Col>
      </Row>
    </>
  );
}