import { Helmet } from "react-helmet";
import "./DevicesPage.css";
import { PaginationContainer } from "Components/PaginationContainer/PaginationContainer";
import { Alert } from "@mantine/core";
import { Link } from "react-router";
import { useDeviceStore } from "Stores/DeviceStore";
import { useEffect, useState } from "react";
import { useAuthenticationStore } from "Stores/AuthenticationStore";
import { getMySystems } from "Api/QuantumBackend/MachineManagment";
import MachinesListCard from "Components/ListCard/MachineListCard/MachinesListCard";

function DevicesPage() {
  const { devices, setDevices, setTotalDevices, totalDevices, removeDevice } =
    useDeviceStore();
  const [isLoading, setIsLoading] = useState(true);
  const { profile } = useAuthenticationStore();
  const [cur_page, set_cur_page] = useState<number>(1);
  const [page_size, set_page_size] = useState<number>(256);

  useEffect(() => {
    setIsLoading(true);
    if (profile) {
      getMySystems({ page_num: cur_page })
        .then((devices) => {
          setDevices(devices.systems);
          set_cur_page(devices.cur_page);
          setTotalDevices(devices.total_systems);
          set_page_size(devices.page_size);
          setIsLoading(false);
        })
        .catch(() => setIsLoading(false));
    }
  }, [profile]);

  useEffect(() => {
    if (profile) {
      if (devices && devices.length > 0 && devices.length > page_size) {
        removeDevice(devices[devices.length - 1].system.id);
      }
      if (
        devices &&
        devices.length > 0 &&
        cur_page > Math.ceil(totalDevices / page_size)
      ) {
        setIsLoading(true);
        getMySystems({ page_num: Math.max(1, cur_page - 1) })
          .then((devices) => {
            setDevices(devices.systems);
            set_cur_page(devices.cur_page);
            setTotalDevices(devices.total_systems);
            set_page_size(devices.page_size);
            setIsLoading(false);
            scroll({ top: 0 });
          })
          .catch(() => setIsLoading(false));
        set_cur_page(Math.max(1, cur_page - 1));
      }
      if (
        devices &&
        devices.length > 0 &&
        devices.length < Math.min(page_size, totalDevices) &&
        cur_page != Math.ceil(totalDevices / page_size)
      ) {
        getMySystems({ page_num: cur_page })
          .then((devices) => {
            setDevices(devices.systems);
            set_cur_page(devices.cur_page);
            setTotalDevices(devices.total_systems);
            set_page_size(devices.page_size);
            setIsLoading(false);
            scroll({ top: 0 });
          })
          .catch(() => setIsLoading(false));
      }
    }
  }, [profile, devices]);

  return (
    <>
      <Helmet>
        <title>Device Page | QMolSim</title>
        <meta
          name="description"
          content="Get all the devices connected to your or your team account"
        />
      </Helmet>
      <div className="DevicesPage">
        <PaginationContainer
          numberOfPages={Math.ceil(totalDevices / page_size)}
          isLoading={isLoading}
          activePage={cur_page}
          setPage={(page) => {
            getMySystems({ page_num: page })
              .then((devices) => {
                setDevices(devices.systems);
                set_cur_page(devices.cur_page);
                setTotalDevices(devices.total_systems);
                set_page_size(devices.page_size);
                setIsLoading(false);
                scroll({ top: 0 });
              })
              .catch(() => setIsLoading(false));
          }}
        >
          {devices.length == 0 && !isLoading && (
            <Alert title="Подключенные устройства не найдены" color="blue">
              Для того, чтобы добавить устройство, простмотрите{" "}
              <Link to={"documentaion"} className="invisible_link">
                документацию
              </Link>
            </Alert>
          )}
          {devices.map((machine) => {
            return <MachinesListCard {...machine} />;
          })}
        </PaginationContainer>
      </div>
    </>
  );
}

export default DevicesPage;