import { useState } from "react";
import { Collapse, Spinner, Row, Col, ListGroupItem } from "reactstrap";
import { runInAction } from "mobx";
import { observer } from "mobx-react-lite";

import LevelData from "src/avatar/LevelData";
import { wwwAXIOS } from "src/Www";
import { toDate } from "src/Utility";
import { AvatarAPILevel, LevelAPI } from "src/wwwAPI";

export default observer(({ levelID, title, date }: AvatarAPILevel) => {
  const [isLevelDataOpened, setLevelDataOpened] = useState(false);
  const [isLoading, setLoading] = useState(false);
  const [levelData, setLevelData] = useState<LevelAPI>();

  return (
    <ListGroupItem>
      <Row
        className="g-0 route"
        onClick={async () => {
          if (isLevelDataOpened) {
            setLevelDataOpened(false);
          } else {
            setLoading(true);
            const { status, data } = await wwwAXIOS.get<LevelAPI>("/level", {
              params: {
                levelID,
              },
            });
            if (status === 200) {
              runInAction(() => {
                setLevelData(data);
                setLevelDataOpened(true);
                setLoading(false);
              });
            }
          }
        }}
      >
        <Col className="m-1" xs="auto">
          <span>{title}</span> {isLoading && <Spinner size="sm" />}
          <br />
          <span className="fittedText">{toDate(date)}</span>
        </Col>
      </Row>
      <Collapse isOpen={isLevelDataOpened}>
        {levelData && <LevelData levelData={levelData} />}
      </Collapse>
    </ListGroupItem>
  );
});