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

import { useHOFStore } from "src/Stores";
import { HOF } from "src/hof/HOF";
import AvatarItem from "src/hof/AvatarItem";
import { HOFLoading, HOFViewLoading } from "src/Loading";

const getAvatarItems = (hofs: HOF[]) => {
  return hofs.map(({ avatarID, avatarName, text }) => (
    <AvatarItem
      key={avatarID}
      avatarID={avatarID}
      avatarName={avatarName}
      text={text}
    />
  ));
};

export default observer(() => {
  const {
    isTotalTotalLoading,
    isTotalHighestLoading,
    isTotalStandLoading,
    isTotalBandLoading,
    isAtTotalLoading,
    isAtHighestLoading,
    isAtStandLoading,
    isAtBandLoading,
    isAbility5KLoading,
    isAbility7KLoading,
    isAbility9KLoading,
    isLevelLoading,
    totalTotalHOF,
    totalHighestHOF,
    totalStandHOF,
    totalBandHOF,
    atTotalHOF,
    atHighestHOF,
    atStandHOF,
    atBandHOF,
    ability5KHOFs0,
    ability5KHOFs1,
    ability5KHOFs2,
    ability5KHOFs3,
    ability5KHOFs4,
    ability7KHOFs0,
    ability7KHOFs1,
    ability7KHOFs2,
    ability7KHOFs3,
    ability7KHOFs4,
    ability9KHOFs0,
    ability9KHOFs1,
    ability9KHOFs2,
    ability9KHOFs3,
    ability9KHOFs4,
    levelHOFs0,
    levelHOFs1,
    levelHOFs2,
    levelHOFs3,
    levelHOFs4,
    getTotalTotalHOF,
    getTotalHighestHOF,
    getTotalStandHOF,
    getTotalBandHOF,
    getAtTotalHOF,
    getAtHighestHOF,
    getAtStandHOF,
    getAtBandHOF,
    getAbility5KHOF,
    getAbility7KHOF,
    getAbility9KHOF,
    getLevelHOF,
  } = useHOFStore();
  const { t } = useTranslation();
  const [isLoading, setLoading] = useState(true);

  useEffect(() => {
    (async () => {
      await Promise.race([
        getTotalTotalHOF(t),
        getTotalHighestHOF(t),
        getTotalStandHOF(t),
        getTotalBandHOF(t),
        getAtTotalHOF(t),
        getAtHighestHOF(t),
        getAtStandHOF(t),
        getAtBandHOF(t),
        getAbility5KHOF(),
        getAbility7KHOF(),
        getAbility9KHOF(),
        getLevelHOF(),
      ]);
      setLoading(false);
    })();
  }, [
    getAbility5KHOF,
    getAbility7KHOF,
    getAbility9KHOF,
    getAtBandHOF,
    getAtHighestHOF,
    getAtStandHOF,
    getAtTotalHOF,
    getLevelHOF,
    getTotalBandHOF,
    getTotalHighestHOF,
    getTotalStandHOF,
    getTotalTotalHOF,
    t,
  ]);

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

  return (
    <>
      <Row className="justify-content-center g-0">
        <Col className="m-1" xs="auto">
          <ListGroup>
            <Badge color="primary">{t("totalAvatars")}</Badge>
            {isTotalTotalLoading ? (
              <HOFLoading />
            ) : (
              getAvatarItems(totalTotalHOF)
            )}
          </ListGroup>
        </Col>
        <Col className="m-1" xs="auto">
          <ListGroup>
            <Badge color="primary">{t("totalHighestHOF")}</Badge>
            {isTotalHighestLoading ? (
              <HOFLoading />
            ) : (
              getAvatarItems(totalHighestHOF)
            )}
          </ListGroup>
        </Col>
        <Col className="m-1" xs="auto">
          <ListGroup>
            <Badge color="primary">{t("totalStandHOF")}</Badge>
            {isTotalStandLoading ? (
              <HOFLoading />
            ) : (
              getAvatarItems(totalStandHOF)
            )}
          </ListGroup>
        </Col>
        <Col className="m-1" xs="auto">
          <ListGroup>
            <Badge color="primary">{t("totalBandHOF")}</Badge>
            {isTotalBandLoading ? <HOFLoading /> : getAvatarItems(totalBandHOF)}
          </ListGroup>
        </Col>
      </Row>
      <Row className="justify-content-center g-0">
        <Col className="m-1" xs="auto">
          <ListGroup>
            <Badge>{t("atTotalHOF")}</Badge>
            {isAtTotalLoading ? <HOFLoading /> : getAvatarItems(atTotalHOF)}
          </ListGroup>
        </Col>
        <Col className="m-1" xs="auto">
          <ListGroup>
            <Badge>{t("atHighestHOF")}</Badge>
            {isAtHighestLoading ? <HOFLoading /> : getAvatarItems(atHighestHOF)}
          </ListGroup>
        </Col>
        <Col className="m-1" xs="auto">
          <ListGroup>
            <Badge>{t("atStandHOF")}</Badge>
            {isAtStandLoading ? <HOFLoading /> : getAvatarItems(atStandHOF)}
          </ListGroup>
        </Col>
        <Col className="m-1" xs="auto">
          <ListGroup>
            <Badge>{t("atBandHOF")}</Badge>
            {isAtBandLoading ? <HOFLoading /> : getAvatarItems(atBandHOF)}
          </ListGroup>
        </Col>
      </Row>
      <Row className="justify-content-center g-0">
        <Col className="m-1" xs="auto">
          <ListGroup>
            <Badge color="success">{t("ability5KHOFs0")}</Badge>
            {isAbility5KLoading ? (
              <HOFLoading />
            ) : (
              getAvatarItems(ability5KHOFs0)
            )}
          </ListGroup>
        </Col>
        <Col className="m-1" xs="auto">
          <ListGroup>
            <Badge color="success">{t("ability5KHOFs1")}</Badge>
            {isAbility5KLoading ? (
              <HOFLoading />
            ) : (
              getAvatarItems(ability5KHOFs1)
            )}
          </ListGroup>
        </Col>
        <Col className="m-1" xs="auto">
          <ListGroup>
            <Badge color="success">{t("ability5KHOFs2")}</Badge>
            {isAbility5KLoading ? (
              <HOFLoading />
            ) : (
              getAvatarItems(ability5KHOFs2)
            )}
          </ListGroup>
        </Col>
        <Col className="m-1" xs="auto">
          <ListGroup>
            <Badge color="success">{t("ability5KHOFs3")}</Badge>
            {isAbility5KLoading ? (
              <HOFLoading />
            ) : (
              getAvatarItems(ability5KHOFs3)
            )}
          </ListGroup>
        </Col>
        <Col className="m-1" xs="auto">
          <ListGroup>
            <Badge color="success">{t("ability5KHOFs4")}</Badge>
            {isAbility5KLoading ? (
              <HOFLoading />
            ) : (
              getAvatarItems(ability5KHOFs4)
            )}
          </ListGroup>
        </Col>
      </Row>
      <Row className="justify-content-center g-0">
        <Col className="m-1" xs="auto">
          <ListGroup>
            <Badge color="success">{t("ability7KHOFs0")}</Badge>
            {isAbility7KLoading ? (
              <HOFLoading />
            ) : (
              getAvatarItems(ability7KHOFs0)
            )}
          </ListGroup>
        </Col>
        <Col className="m-1" xs="auto">
          <ListGroup>
            <Badge color="success">{t("ability7KHOFs1")}</Badge>
            {isAbility7KLoading ? (
              <HOFLoading />
            ) : (
              getAvatarItems(ability7KHOFs1)
            )}
          </ListGroup>
        </Col>
        <Col className="m-1" xs="auto">
          <ListGroup>
            <Badge color="success">{t("ability7KHOFs2")}</Badge>
            {isAbility7KLoading ? (
              <HOFLoading />
            ) : (
              getAvatarItems(ability7KHOFs2)
            )}
          </ListGroup>
        </Col>
        <Col className="m-1" xs="auto">
          <ListGroup>
            <Badge color="success">{t("ability7KHOFs3")}</Badge>
            {isAbility7KLoading ? (
              <HOFLoading />
            ) : (
              getAvatarItems(ability7KHOFs3)
            )}
          </ListGroup>
        </Col>
        <Col className="m-1" xs="auto">
          <ListGroup>
            <Badge color="success">{t("ability7KHOFs4")}</Badge>
            {isAbility7KLoading ? (
              <HOFLoading />
            ) : (
              getAvatarItems(ability7KHOFs4)
            )}
          </ListGroup>
        </Col>
      </Row>
      <Row className="justify-content-center g-0">
        <Col className="m-1" xs="auto">
          <ListGroup>
            <Badge color="success">{t("ability9KHOFs0")}</Badge>
            {isAbility9KLoading ? (
              <HOFLoading />
            ) : (
              getAvatarItems(ability9KHOFs0)
            )}
          </ListGroup>
        </Col>
        <Col className="m-1" xs="auto">
          <ListGroup>
            <Badge color="success">{t("ability9KHOFs1")}</Badge>
            {isAbility9KLoading ? (
              <HOFLoading />
            ) : (
              getAvatarItems(ability9KHOFs1)
            )}
          </ListGroup>
        </Col>
        <Col className="m-1" xs="auto">
          <ListGroup>
            <Badge color="success">{t("ability9KHOFs2")}</Badge>
            {isAbility9KLoading ? (
              <HOFLoading />
            ) : (
              getAvatarItems(ability9KHOFs2)
            )}
          </ListGroup>
        </Col>
        <Col className="m-1" xs="auto">
          <ListGroup>
            <Badge color="success">{t("ability9KHOFs3")}</Badge>
            {isAbility9KLoading ? (
              <HOFLoading />
            ) : (
              getAvatarItems(ability9KHOFs3)
            )}
          </ListGroup>
        </Col>
        <Col className="m-1" xs="auto">
          <ListGroup>
            <Badge color="success">{t("ability9KHOFs4")}</Badge>
            {isAbility9KLoading ? (
              <HOFLoading />
            ) : (
              getAvatarItems(ability9KHOFs4)
            )}
          </ListGroup>
        </Col>
      </Row>
      <Row className="justify-content-center g-0">
        <Col className="m-1" xs="auto">
          <ListGroup>
            <Badge color="info">{t("levelHOFs0")}</Badge>
            {isLevelLoading ? <HOFLoading /> : getAvatarItems(levelHOFs0)}
          </ListGroup>
        </Col>
        <Col className="m-1" xs="auto">
          <ListGroup>
            <Badge color="info">{t("levelHOFs1")}</Badge>
            {isLevelLoading ? <HOFLoading /> : getAvatarItems(levelHOFs1)}
          </ListGroup>
        </Col>
        <Col className="m-1" xs="auto">
          <ListGroup>
            <Badge color="info">{t("levelHOFs2")}</Badge>
            {isLevelLoading ? <HOFLoading /> : getAvatarItems(levelHOFs2)}
          </ListGroup>
        </Col>
        <Col className="m-1" xs="auto">
          <ListGroup>
            <Badge color="info">{t("levelHOFs3")}</Badge>
            {isLevelLoading ? <HOFLoading /> : getAvatarItems(levelHOFs3)}
          </ListGroup>
        </Col>
        <Col className="m-1" xs="auto">
          <ListGroup>
            <Badge color="info">{t("levelHOFs4")}</Badge>
            {isLevelLoading ? <HOFLoading /> : getAvatarItems(levelHOFs4)}
          </ListGroup>
        </Col>
      </Row>
    </>
  );
});