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

import { useWowStore } from "src/Stores";
import { Avatar } from "src/wow/Wow";
import AvatarItem from "src/wow/AvatarItem";
import { WowLoading } from "src/Loading";

const getAvatars = (avatars: Avatar[]) => {
  return avatars.map(({ avatarID, avatarName, text: value }) => (
    <AvatarItem
      key={avatarID}
      avatarID={avatarID}
      avatarName={avatarName}
      text={value}
    />
  ));
};

export default observer(() => {
  const {
    isLoading,
    totalAvatars,
    highestAvatars,
    standAvatars,
    bandAvatars,
    totalAvatarsAt,
    highestAvatarsAt,
    standAvatarsAt,
    bandAvatarsAt,
    ability5KAvatars0,
    ability5KAvatars1,
    ability5KAvatars2,
    ability5KAvatars3,
    ability5KAvatars4,
    ability7KAvatars0,
    ability7KAvatars1,
    ability7KAvatars2,
    ability7KAvatars3,
    ability7KAvatars4,
    ability9KAvatars0,
    ability9KAvatars1,
    ability9KAvatars2,
    ability9KAvatars3,
    ability9KAvatars4,
    levelAvatars0,
    levelAvatars1,
    levelAvatars2,
    levelAvatars3,
    levelAvatars4,
    getWow,
  } = useWowStore();
  const { t } = useTranslation();

  useEffect(() => {
    getWow(t);
  }, [getWow, t]);

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

  return (
    <>
      <Row className="justify-content-center g-0">
        <Col className="m-1" xs="auto">
          <ListGroup>
            <Badge color="primary">{t("totalAvatars")}</Badge>
            {getAvatars(totalAvatars)}
          </ListGroup>
        </Col>
        <Col className="m-1" xs="auto">
          <ListGroup>
            <Badge color="primary">{t("highestAvatars")}</Badge>
            {getAvatars(highestAvatars)}
          </ListGroup>
        </Col>
        <Col className="m-1" xs="auto">
          <ListGroup>
            <Badge color="primary">{t("standAvatars")}</Badge>
            {getAvatars(standAvatars)}
          </ListGroup>
        </Col>
        <Col className="m-1" xs="auto">
          <ListGroup>
            <Badge color="primary">{t("bandAvatars")}</Badge>
            {getAvatars(bandAvatars)}
          </ListGroup>
        </Col>
      </Row>
      <Row className="justify-content-center g-0">
        <Col className="m-1" xs="auto">
          <ListGroup>
            <Badge>{t("totalAvatarsAt")}</Badge>
            {getAvatars(totalAvatarsAt)}
          </ListGroup>
        </Col>
        <Col className="m-1" xs="auto">
          <ListGroup>
            <Badge>{t("highestAvatarsAt")}</Badge>
            {getAvatars(highestAvatarsAt)}
          </ListGroup>
        </Col>
        <Col className="m-1" xs="auto">
          <ListGroup>
            <Badge>{t("standAvatarsAt")}</Badge>
            {getAvatars(standAvatarsAt)}
          </ListGroup>
        </Col>
        <Col className="m-1" xs="auto">
          <ListGroup>
            <Badge>{t("bandAvatarsAt")}</Badge>
            {getAvatars(bandAvatarsAt)}
          </ListGroup>
        </Col>
      </Row>
      <Row className="justify-content-center g-0">
        <Col className="m-1" xs="auto">
          <ListGroup>
            <Badge color="success">{t("ability5KAvatars0")}</Badge>
            {getAvatars(ability5KAvatars0)}
          </ListGroup>
        </Col>
        <Col className="m-1" xs="auto">
          <ListGroup>
            <Badge color="success">{t("ability5KAvatars1")}</Badge>
            {getAvatars(ability5KAvatars1)}
          </ListGroup>
        </Col>
        <Col className="m-1" xs="auto">
          <ListGroup>
            <Badge color="success">{t("ability5KAvatars2")}</Badge>
            {getAvatars(ability5KAvatars2)}
          </ListGroup>
        </Col>
        <Col className="m-1" xs="auto">
          <ListGroup>
            <Badge color="success">{t("ability5KAvatars3")}</Badge>
            {getAvatars(ability5KAvatars3)}
          </ListGroup>
        </Col>
        <Col className="m-1" xs="auto">
          <ListGroup>
            <Badge color="success">{t("ability5KAvatars4")}</Badge>
            {getAvatars(ability5KAvatars4)}
          </ListGroup>
        </Col>
      </Row>
      <Row className="justify-content-center g-0">
        <Col className="m-1" xs="auto">
          <ListGroup>
            <Badge color="success">{t("ability7KAvatars0")}</Badge>
            {getAvatars(ability7KAvatars0)}
          </ListGroup>
        </Col>
        <Col className="m-1" xs="auto">
          <ListGroup>
            <Badge color="success">{t("ability7KAvatars1")}</Badge>
            {getAvatars(ability7KAvatars1)}
          </ListGroup>
        </Col>
        <Col className="m-1" xs="auto">
          <ListGroup>
            <Badge color="success">{t("ability7KAvatars2")}</Badge>
            {getAvatars(ability7KAvatars2)}
          </ListGroup>
        </Col>
        <Col className="m-1" xs="auto">
          <ListGroup>
            <Badge color="success">{t("ability7KAvatars3")}</Badge>
            {getAvatars(ability7KAvatars3)}
          </ListGroup>
        </Col>
        <Col className="m-1" xs="auto">
          <ListGroup>
            <Badge color="success">{t("ability7KAvatars4")}</Badge>
            {getAvatars(ability7KAvatars4)}
          </ListGroup>
        </Col>
      </Row>
      <Row className="justify-content-center g-0">
        <Col className="m-1" xs="auto">
          <ListGroup>
            <Badge color="success">{t("ability9KAvatars0")}</Badge>
            {getAvatars(ability9KAvatars0)}
          </ListGroup>
        </Col>
        <Col className="m-1" xs="auto">
          <ListGroup>
            <Badge color="success">{t("ability9KAvatars1")}</Badge>
            {getAvatars(ability9KAvatars1)}
          </ListGroup>
        </Col>
        <Col className="m-1" xs="auto">
          <ListGroup>
            <Badge color="success">{t("ability9KAvatars2")}</Badge>
            {getAvatars(ability9KAvatars2)}
          </ListGroup>
        </Col>
        <Col className="m-1" xs="auto">
          <ListGroup>
            <Badge color="success">{t("ability9KAvatars3")}</Badge>
            {getAvatars(ability9KAvatars3)}
          </ListGroup>
        </Col>
        <Col className="m-1" xs="auto">
          <ListGroup>
            <Badge color="success">{t("ability9KAvatars4")}</Badge>
            {getAvatars(ability9KAvatars4)}
          </ListGroup>
        </Col>
      </Row>
      <Row className="justify-content-center g-0">
        <Col className="m-1" xs="auto">
          <ListGroup>
            <Badge color="info">{t("levelAvatars0")}</Badge>
            {getAvatars(levelAvatars0)}
          </ListGroup>
        </Col>
        <Col className="m-1" xs="auto">
          <ListGroup>
            <Badge color="info">{t("levelAvatars1")}</Badge>
            {getAvatars(levelAvatars1)}
          </ListGroup>
        </Col>
        <Col className="m-1" xs="auto">
          <ListGroup>
            <Badge color="info">{t("levelAvatars2")}</Badge>
            {getAvatars(levelAvatars2)}
          </ListGroup>
        </Col>
        <Col className="m-1" xs="auto">
          <ListGroup>
            <Badge color="info">{t("levelAvatars3")}</Badge>
            {getAvatars(levelAvatars3)}
          </ListGroup>
        </Col>
        <Col className="m-1" xs="auto">
          <ListGroup>
            <Badge color="info">{t("levelAvatars4")}</Badge>
            {getAvatars(levelAvatars4)}
          </ListGroup>
        </Col>
      </Row>
    </>
  );
});