'use client';

import { RGPDFormData } from "../../../../app/config/rgpd.types";
import { UsagerSelect } from "../../usagers/UsagerSelect";
import { getUsagersList } from "../../../../api/usager";
import { Input, Select, TextArea } from "../../FormsFieldsTypes";
import { useRefData } from "../../../../app/hooks/useRefData";
import { getUtilisateursOptions } from "../../../../api/admin";
import { useEffect, useState } from "react";

interface Props {
  formData: any;
  updateField: (name: keyof RGPDFormData, value: any) => void;
  onSubmit: () => void;
}

export default function RGPDForm({ formData, updateField, onSubmit }: Props) {
  const rgpd_canaux = useRefData('rgpd_canal');
  const rgpd_types_demande = useRefData('rgpd_type_demande');

  const [users, setUsers] = useState([]);

  const fetchUtilisateurs = async () => {
    const data = await getUtilisateursOptions();
    setUsers(data);
  }
  useEffect(() => {
    fetchUtilisateurs();
  }, [users]);

  return (
    <div className="space-y-1.5">
      <div className="bg-white rounded-3xl shadow-sm border border-[#dce8e2] p-4">

        <h2 className="text-xl font-semibold text-[#1f5f4a] mb-2">
          Informations générales
        </h2>

        <div className="grid md:grid-cols-3 gap-2">

          <UsagerSelect
            name="usager_id"
            value={formData.usager_id ?? ""}
            updateField={updateField}
            fetchUsagers={getUsagersList}
          />

          <Input
            type="date"
            label="Date réception"
            name="date_reception"
            value={formData.date_reception}
            onChange={updateField}
          />

          <Input
            type="date"
            label="Date limite de traitement"
            name="date_limite"
            value={formData.date_limite}
            onChange={updateField}
          />

          <Select
            label="Canal"
            name="canal"
            value={formData.canal}
            onChange={updateField}
            options={rgpd_canaux.data}
          />

          <Select
            label="Type"
            name="type"
            value={formData.type}
            onChange={updateField}
            options={rgpd_types_demande.data}
          />

          <Select
            label="Assigné à"
            name="id_assigne_a"
            value={formData.id_assigne_a}
            onChange={updateField}
            options={users}
          />
        </div>
      </div>

      <div className="bg-white rounded-3xl shadow-sm border border-[#dce8e2] p-4">

        <h2 className="text-xl font-semibold text-[#1f5f4a] mb-2">
          Description de la demande
        </h2>

        <TextArea
          label="Description"
          name="description_demande"
          value={formData.description_demande}
          onChange={updateField}
        />

      </div>

      <div className="bg-white rounded-3xl shadow-sm border border-[#dce8e2] p-4">

        <h2 className="text-xl font-semibold text-[#1f5f4a] mb-2">
          Notes internes
        </h2>

        <TextArea
          label="Commentaires internes"
          name="notes_internes"
          value={formData.notes_internes}
          onChange={updateField}
        />

      </div>

      <div className="flex justify-end">

        <button
          onClick={onSubmit}
          className="inline-flex items-center gap-2
      px-1 py-1
      rounded-xl
      bg-gradient-to-r from-[#2f7d5f] to-[#3f9b74]
      text-white font-semibold
      shadow-md
      transition-all
      hover:-translate-y-0.5
      hover:shadow-lg
      cursor-pointer"
        >
          Enregistrer la demande
        </button>
      </div>
    </div>
  );
}