import BarLoader from "react-spinners/BarLoader";
import { useTranslation } from "react-i18next";
import { Badge, Col, ListGroup, ListGroupItem, Row } from "reactstrap";
import NoteItem from "src/note/NoteItem";
import AvatarItem from "src/hof/AvatarItem";
import WwwLevelItem from "src/avatar/WwwLevelItem";

const LoadingLayer = ({ text }: { text: string }) => {
  return (
    <Row className="g-0">
      <Col className="m-1">
        <ListGroup>
          <Badge>{text}</Badge>
          <ListGroupItem>
            <BarLoader width="100%" color="#36d7b7" />
          </ListGroupItem>
        </ListGroup>
      </Col>
    </Row>
  );
};

export const NoteViewLoading = () => {
  const { t } = useTranslation();

  return <LoadingLayer text={t("toNote")} />;
};

export const SiteViewLoading = () => {
  const { t } = useTranslation();

  return <LoadingLayer text={t("toSite")} />;
};

export const AvatarViewLoading = () => {
  const { t } = useTranslation();

  return <LoadingLayer text={t("toAvatar")} />;
};

export const HOFViewLoading = () => {
  const { t } = useTranslation();

  return <LoadingLayer text={t("toHOF")} />;
};

export const EtcViewLoading = () => {
  const { t } = useTranslation();

  return <LoadingLayer text={t("toEtc")} />;
};

export const NoteLoading = ({ loadingCount }: { loadingCount: number }) => {
  return [...Array(loadingCount).keys()].map((i) => (
    <NoteItem
      key={i}
      noteID=""
      artist=""
      title="Loading…"
      genre=""
      levelText=""
      level={0}
    />
  ));
};

export const AvatarWwwLevelLoading = ({
  loadingCount,
}: {
  loadingCount: number;
}) => {
  return [...Array(loadingCount).keys()].map((i) => (
    <WwwLevelItem
      key={i}
      levelID=""
      title="Loading…"
      date={0}
      levelText=""
      level=""
    />
  ));
};

export const HOFAvatarLoading = ({
  loadingCount,
}: {
  loadingCount: number;
}) => {
  return [...Array(loadingCount).keys()].map((i) => (
    <AvatarItem key={i} avatarID="" avatarName="Loading…" text="" />
  ));
};