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

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

export default observer(({ levelID, title, date }: AvatarWwwLevelsAPI) => {
  const [isWwwLevelDataOpened, setWwwLevelDataOpened] = useState(false);
  const [isLoading, setLoading] = useState(false);
  const [wwwLevelData, setWwwLevelData] = useState<LevelAPI>();

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