import { Alert, Center, Text } from "@mantine/core";
import "./ExperimentPage.css";
import { PaginationContainer } from "Components/PaginationContainer/PaginationContainer";
import { NewMoleculeModal } from "Modals/NewMolecule/NewMolecule";
import { useState } from "react";
import { Helmet } from "react-helmet";
import { IconPlus, IconSettings } from "@tabler/icons-react";
import { useParams } from "react-router";
import {
  useExperimentStore,
  useSelectedExperiment,
} from "Stores/ExperimentStore";
import CustomButton from "Components/CustomButton/CustomButton";
function ExperimentPage() {
  const [isOpen, setIsOpen] = useState(false);
  const { experiment_id } = useParams();
  const { selectedExperimentId, selectExperiment } = useExperimentStore();

  if (
    !selectedExperimentId ||
    (Number(experiment_id) != selectedExperimentId && experiment_id)
  ) {
    console.log(Number(experiment_id));
    selectExperiment(Number(experiment_id));
  }

  const experiment = useSelectedExperiment();

  return (
    <>
      <Helmet>
        <title>
          {experiment
            ? "Experiment " + experiment.id + " | QMolSim"
            : "Error |QmolSim"}
        </title>
        <meta
          name="description"
          content="See the documentation on how to setup and use the qunatum computational system"
        />
      </Helmet>
      {experiment && (
        <div className="ExperimentPage">
          <NewMoleculeModal
            isOpened={isOpen}
            setIsOpened={(toOpen: boolean) => setIsOpen(toOpen)}
          />
          <div
            style={{
              display: "flex",
              flexDirection: "column",
              gap: "10px",
              marginBottom: "15px",
            }}
          >
            <div className="experimentButtons">
              <CustomButton
                color="contrast"
                onClick={() => {
                  setIsOpen(true);
                }}
                icon={<IconPlus />}
                text="Добавить задачу"
              />
              <CustomButton
                color="contrast"
                style="outline"
                onClick={() => {
                  setIsOpen(true);
                }}
                icon={<IconSettings />}
                text="Параметры эксперимента"
              />
            </div>
          </div>
          {experiment.tasks_ids.length > 0 && (
            <PaginationContainer>
              {experiment.tasks_ids.map((task: ExperimentTask) => {
                return <div>{task.data.name}</div>;
              })}
            </PaginationContainer>
          )}
          {experiment.tasks_ids.length == 0 && (
            <Alert>
              <Center>
                <Text size={"xl"} c="contrast">
                  Нет задач
                </Text>
              </Center>
            </Alert>
          )}
        </div>
      )}
      {!experiment && (
        <Alert color="red">
          <Center>
            {" "}
            <Text c="contrast" size={"xl"} size="md">
              Ошибка. Эксперимент не найден
            </Text>{" "}
          </Center>
        </Alert>
      )}
    </>
  );
}

export default ExperimentPage;