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

function EditTable({ table }: { table: IServer }) {
  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-4xl 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-4xl 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 символов'
          />
          <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 символов'
          />
          <p className='caption-s text-[#BDBDBD] font-medium w-full tracking-[-0.02em]'>
            Придумайте описание до 20 символов, например «Расположен в офисе»
          </p>
        </div>
        <div className='flex flex-col gap-[0.556vw]'>
          <NewButton
            variant='cta'
            disabled={
              tableName.length < 1 ||
              tableName.length > 16 ||
              tableDescription.length > 20
            }
            className='flex justify-center'
            onClick={() => updateTable()}
          >
            <p>Сохранить изменения</p>
          </NewButton>
          <NewButton
            variant='primary'
            className='flex justify-center'
            onClick={() => setModal(null)}
          >
            <p>Отменить</p>
          </NewButton>
        </div>
      </div>
    </div>
  );
}

export default EditTable;