"use client";

import AbilityClassView from "@/app/[language]/avatar/components/AbilityClassView";
import AbilitiesView from "@/app/[language]/avatar/components/AbilityView";
import DateView from "@/app/[language]/avatar/components/DateView";
import FavoritesView from "@/app/[language]/avatar/components/FavoritesView";
import IntroView from "@/app/[language]/avatar/components/IntroView";
import LastsView from "@/app/[language]/avatar/components/LastsView";
import MainView from "@/app/[language]/avatar/components/MainView";
import QuitStatusValues from "@/app/[language]/avatar/components/QuitStatusValues";
import WwwLevelsView from "@/app/[language]/avatar/components/WwwLevelsView";
import Loading from "@/app/[language]/avatar/loading";
import useGetAvatar from "@/app/[language]/avatar/query/useGetAvatar";
import AvatarDrawing from "@/components/AvatarDrawing";
import AvatarTitle from "@/components/AvatarTitle";
import { useAvatarStore, useSiteStore } from "@/state/Stores";
import { getDefaultAvatarID } from "@/utilities/Utility";
import { observer } from "mobx-react-lite";
import { useTranslations } from "next-intl";
import Link from "next/link";
import { useParams, useRouter } from "next/navigation";
import { useEffect, useMemo } from "react";
import { EraserFill, Search } from "react-bootstrap-icons";
import Button from "react-bootstrap/Button";
import Col from "react-bootstrap/Col";
import FormControl from "react-bootstrap/FormControl";
import InputGroup from "react-bootstrap/InputGroup";
import ListGroup from "react-bootstrap/ListGroup";
import ListGroupItem from "react-bootstrap/ListGroupItem";
import Row from "react-bootstrap/Row";
import Stack from "react-bootstrap/Stack";
import Tab from "react-bootstrap/Tab";
import Tabs from "react-bootstrap/Tabs";

export default observer(() => {
  const { input, setInput, tabItem, setTabItem } = useAvatarStore();
  const { siteAvatarID, isLoggedIn } = useSiteStore();

  let { want: [want] = [""] } = useParams<{ want: string[] }>();
  want = useMemo(() => decodeURIComponent(want), [want]);

  const { push } = useRouter();

  const t = useTranslations();

  useEffect(() => {
    setInput(want);
  }, [want, setInput]);

  const { isFetched: isAvatarLoaded, data: avatar } = useGetAvatar();

  const onWant = () => {
    push(`/avatar/${input}`);
  };

  return (
    <>
      <Stack gap={2}>
        <InputGroup>
          <Button
            onClick={() => {
              push(`/avatar/!${getDefaultAvatarID(siteAvatarID)}`);
            }}
            disabled={!isLoggedIn}
          >
            {t("onWantMe")}
          </Button>
          <FormControl
            type="search"
            value={input}
            onChange={({ target: { value } }) => {
              setInput(value);
            }}
            onKeyDown={({ key }) => {
              if (key === "Enter") {
                onWant();
              }
            }}
            placeholder={t("wantAvatarAssist")}
          />
          <Button variant="success" onClick={onWant}>
            <Search />
          </Button>
          <Button
            variant="danger"
            onClick={() => {
              push("/avatar");
            }}
          >
            <EraserFill />
          </Button>
        </InputGroup>
        {want && !isAvatarLoaded && <Loading />}
        {isAvatarLoaded &&
          (Array.isArray(avatar) ? (
            avatar.length > 0 && (
              <>
                <hr />
                <ListGroup>
                  {avatar.map(({ avatarID, avatarName, avatarIntro }) => (
                    <ListGroupItem
                      key={avatarID}
                      as={Link}
                      href={`/avatar/!${avatarID}`}
                    >
                      <Row>
                        <Col xs="auto">
                          <AvatarDrawing avatarID={avatarID} />
                        </Col>
                        <Col>
                          <Stack gap={2}>
                            <AvatarTitle
                              avatarID={avatarID}
                              avatarName={avatarName}
                              textID
                            />
                            <span style={{ whiteSpace: "break-spaces" }}>
                              {avatarIntro}
                            </span>
                          </Stack>
                        </Col>
                      </Row>
                    </ListGroupItem>
                  ))}
                </ListGroup>
              </>
            )
          ) : (
            <>
              <hr />
              <Row className="g-4">
                <Col xs="auto">
                  <MainView avatar={avatar} />
                </Col>
                <Col xs="auto">
                  <IntroView avatar={avatar} />
                </Col>
                <Col xs="auto">
                  <AbilityClassView avatar={avatar} inputMode="5K" />
                </Col>
                <Col xs="auto">
                  <AbilityClassView avatar={avatar} inputMode="7K" />
                </Col>
                <Col xs="auto">
                  <AbilityClassView avatar={avatar} inputMode="9K" />
                </Col>
                <Col xs="auto">
                  <DateView avatar={avatar} />
                </Col>
                <Col xs="auto">
                  <QuitStatusValues avatar={avatar} />
                </Col>
              </Row>
              <hr />
              <Row>
                <Col>
                  <Tabs
                    activeKey={tabItem}
                    onSelect={(eventKey) => {
                      if (eventKey) {
                        setTabItem(eventKey);
                      }
                    }}
                  >
                    <Tab title={t("avatarFavoritesTitle")} eventKey="favorites">
                      <FavoritesView avatar={avatar} />
                    </Tab>
                    <Tab title={t("avatarLastsTitle")} eventKey="lasts">
                      <LastsView avatar={avatar} />
                    </Tab>
                    <Tab title={t("avatarAbilityTitle")} eventKey="abilities">
                      <AbilitiesView avatar={avatar} />
                    </Tab>
                    <Tab title={t("wwwLevels")} eventKey="wwwLevels">
                      <WwwLevelsView avatar={avatar} />
                    </Tab>
                  </Tabs>
                </Col>
              </Row>
            </>
          ))}
      </Stack>
    </>
  );
});