import { Card, NumberInput, Text, UnstyledButton } from "@mantine/core";
import {
  IconCancel,
  IconCheck,
  IconPencil,
  IconTrash,
} from "@tabler/icons-react";
import { useState, type MouseEvent } from "react";
import { notifications } from "@mantine/notifications";
import type { SystemTeamData, SystemWithTeams } from "Types/Machine/Machine";
import {
  giveSystemToTeam,
  removeSystemFromTeam,
} from "Api/QuantumBackend/MachineManagment";
import { useDeviceStore } from "Stores/DeviceStore";

function TeamInMachineListCard(props: {
  team: SystemTeamData;
  system: SystemWithTeams;
}) {
  const [isEditing, setIsEditing] = useState(false);
  const { updateDevice } = useDeviceStore();
  const [count, setCount] = useState(props.team.num_qubits);

  const handleRemovePerm = () => {
    // TODO: fix delete
    removeSystemFromTeam({
      team_id: props.team.team.team_id,
      system_id: props.system.system.id,
    })
      .then(() => {
        updateDevice(props.system.system.id, {
          teams: props.system.teams.filter(
            (team) => team.team.team_id != props.team.team.team_id,
          ),
        });
        notifications.show({
          radius: "md",
          title: "Команда удалена успешно",
          message: "",
          icon: <IconCheck />,
          style: { paddingLeft: "5px" },
        });
      })
      .catch(() => {
        notifications.show({
          radius: "md",
          color: "red",
          title: "Не удалось удалить команду",
          message: "",
          icon: <IconCancel />,
          style: { paddingLeft: "5px" },
        });
      });
  };

  return (
    <Card orientation="horizontal">
      <Card.Section
        withBorder
        inheritPadding
        px="xs"
        style={{
          width: "430px",
          display: "flex",
          flexDirection: "row",
          gap: "15px",
        }}
      >
        <Text size="md" style={{ textDecorationLine: "underline" }}>
          Команда: {props.team.team.team_name}
        </Text>

        <Text c="dimmed" size="md">
          #{props.team.team.team_id}
        </Text>
      </Card.Section>
      <Card.Section
        inheritPadding
        px="xs"
        withBorder
        style={{
          flexGrow: "1",
          gap: "15px",
          display: "flex",
          flexDirection: "row",
        }}
      >
        {isEditing && (
          <>
            <Text>Количество кубит: </Text>
            <NumberInput
              value={count}
              onChange={(ev) => {
                setCount(Number(ev.valueOf()));
              }}
            ></NumberInput>
            <UnstyledButton
              onClick={() => {
                giveSystemToTeam({
                  system_id: props.system.system.id,
                  team_id: props.team.team.team_id,
                  qubits_given: count,
                }).then(() => {
                  const team = props.system.teams.find((t) => {
                    return t.team.team_id == props.team.team.team_id;
                  });
                  if (team) {
                    const updatedItem = { ...team, num_qubits: count };

                    // Create new array with the updated item in the same position
                    const updatedItems = props.system.teams.map(
                      (currentItem) =>
                        currentItem.team.team_id === team.team.team_id
                          ? updatedItem
                          : currentItem,
                    );

                    updateDevice(props.system.system.id, {
                      teams: updatedItems,
                    });
                  }

                  setIsEditing(false);
                });
              }}
            >
              <IconCheck size={25} />
            </UnstyledButton>
            <UnstyledButton
              onClick={() => {
                setCount(props.team.num_qubits);
                setIsEditing(false);
              }}
            >
              <IconCancel size={25} />
            </UnstyledButton>
          </>
        )}
        {!isEditing && (
          <>
            <Text>Количество кубит: {count}</Text>
            <UnstyledButton
              onClick={() => {
                setIsEditing(true);
              }}
            >
              <IconPencil size={25} />
            </UnstyledButton>
          </>
        )}
      </Card.Section>
      <Card.Section
        inheritPadding
        px="md"
        style={{
          display: "flex",
          flexDirection: "column",
          justifyContent: "space-between",
        }}
      >
        <div className="TopRightContainer">
          <div className="dateContainer">
            <Text size="sm">
              {new Date(props.team.created_at + "Z").toLocaleDateString(
                "ru",
              )}{" "}
            </Text>
            <Text size="sm">
              {new Date(props.team.created_at + "Z").toLocaleTimeString("ru")}
            </Text>
          </div>
          <UnstyledButton
            onClick={(e: MouseEvent) => {
              e.stopPropagation();
              handleRemovePerm();
            }}
            style={{ cursor: "pointer" }}
          >
            <IconTrash size={20} />
          </UnstyledButton>
        </div>
      </Card.Section>
    </Card>
  );
}

export default TeamInMachineListCard;