import { FC, useEffect } from 'react';
import { useForm } from 'react-hook-form';
import { toast } from 'sonner';
import { Button, Stack } from '../components';
import { JobStatus, soriAPIClient } from '../lib/sori';

type ProjectFormProps = {
  onClose: () => void;
  open: boolean;
};

type FormValues = {
  projectId: string;
  name: string;
  jobIds: string;
  status: JobStatus;
  startAt: Date;
  endAt: Date;
  remark?: string;
};

export const ProjectForm: FC<ProjectFormProps> = ({ onClose, open }) => {
  const { register, handleSubmit, reset } = useForm<FormValues>({
    defaultValues: {
      projectId: '',
      name: '',
      //jobIds: '',
      status: 'drafting',
      remark: '',
      startAt: new Date(),
      endAt: new Date(),
    },
  });
  useEffect(() => {
    if (!open) {
      reset();
    }
  }, [open]);
  const onFormSubmit = async (data: FormValues) => {
    const payload = {
      projectId: data.projectId,
      name: data.name,
      jobIds: [],
      status: data.status,
      startAt: new Date(data.startAt),
      endAt: new Date(data.endAt),
      remark: data.remark,
    };

    const [error] = await soriAPIClient.projects.actions.createProject(payload);
    if (error) {
      console.error(error);
      onClose();
      toast.error('Failed to create Project');
    } else {
      toast.success('Project created successfully');
      onClose();
    }
  };

  return (
    <div>
      <form onSubmit={handleSubmit(onFormSubmit)}>
        <Stack className="h-160 w-100vw flex flex-col gap-4 border-gray-200 rounded-lg bg-white p-6 text-black sm:max-w-130 dark:bg-zinc-800 dark:text-white/90">
          <div className="flex flex-col gap-4">
            <div className="flex flex-col gap-1">
              <label>Project ID</label>
              <input
                {...register('projectId')}
                className="border border-zinc-300 rounded bg-white px-2 py-1"
              />
            </div>

            <div className="flex flex-col gap-1">
              <label>Project Name</label>
              <input
                {...register('name')}
                className="border border-zinc-300 rounded bg-white px-2 py-1"
              />
            </div>

            {/* <div className="flex flex-col gap-1">
              <label>Job ID</label>
              <input
                {...register('jobIds')}
                className="border border-zinc-300 rounded bg-white px-2 py-1"
              />
            </div> */}

            <div className="flex flex-col gap-1">
              <label>Start Date</label>
              <input
                type="date"
                {...register('startAt')}
                className="border border-zinc-300 rounded bg-white px-2 py-1"
              />
            </div>

            <div className="flex flex-col gap-1">
              <label>End Date</label>
              <input
                type="date"
                {...register('endAt')}
                className="border border-zinc-300 rounded bg-white px-2 py-1"
              />
            </div>

            <div className="flex flex-col gap-1">
              <label>Remark</label>
              <textarea
                {...register('remark')}
                className="border border-zinc-300 rounded bg-white px-2 py-1"
                rows={4}
              />
            </div>
          </div>

          <Button className="mt-auto bg-blue-5 text-white" type="submit">
            Save
          </Button>
        </Stack>
      </form>
    </div>
  );
};
