import { useState } from "react";
import NewInput from "../NewInput";
import Button from "../Button";
import useModalStore from "../../stores/useModalStore";
import { Server } from "../../types/Server";
import { useQueryClient } from "@tanstack/react-query";
import { useMutation } from "@tanstack/react-query";
import api from "../../utils/api";

function EditTable({ table }: { table: Server }) {
  const [tableName, setTableName] = useState(table.name);
  const [tableDescription, setTableDescription] = useState(table.location);
  const { setModal } = useModalStore();
  const queryClient = useQueryClient();

  const { mutate: updateTable } = useMutation({
    mutationFn: () => {
      return api.put(`servers/${table.id}`, {
        json: {
          name: tableName,
          location: tableDescription,
        },
      });
    },
    onSuccess: () => {
      queryClient.invalidateQueries({ queryKey: ["servers"] });
      setModal(null);
    },
  });

  return (
    <div className="bg-[#F0F0F0] rounded-[2.222vw] w-[25vw] flex flex-col justify-center items-center">
      <h3 className="title-s font-medium py-[1.806vw]">Редактирование стола</h3>
      <div className="bg-[url(/images/Table.png)] bg-no-repeat bg-contain bg-center w-full h-[6.944vw]"></div>
      <div className="bg-[#FFFFFF] w-full rounded-[2.222vw] p-[1.389vw] flex flex-col gap-[0.833vw]">
        <div className="space-y-[0.556vw]">
          <NewInput
            placeholder="Название стола*"
            value={tableName}
            onChange={(e) => setTableName(e.target.value)}
            isError={tableName.length > 16}
            errorMessage="Не больше 16 символов"
          />
          {tableName.length <= 16 && (
            <p className="caption-s text-[#BDBDBD] font-medium w-full tracking-[-0.02em]">
              Придумайте название до 16 символов, например «Тузик»
            </p>
          )}
        </div>
        <div className="space-y-[0.556vw]">
          <NewInput
            placeholder="Описание"
            value={tableDescription}
            onChange={(e) => setTableDescription(e.target.value)}
            isError={tableDescription.length > 20}
            errorMessage="Не больше 20 символов"
          />
          {tableDescription.length <= 20 && (
            <p className="caption-s text-[#BDBDBD] font-medium w-full tracking-[-0.02em]">
              Придумайте описание до 20 символов, например «Расположен в офисе»
            </p>
          )}
        </div>
        <div className="flex flex-col gap-[0.556vw]">
          <Button
            variant="cta"
            size="large"
            disabled={
              tableName.length < 1 ||
              tableName.length > 16 ||
              tableDescription.length > 20
            }
            className="flex justify-center"
            onClick={() => updateTable()}
          >
            <p>Сохранить изменения</p>
          </Button>
          <Button
            variant="primary"
            size="large"
            className="flex justify-center"
            onClick={() => setModal(null)}
          >
            <p>Отменить</p>
          </Button>
        </div>
      </div>
    </div>
  );
}

export default EditTable;