"use client";

import Button from "@/components/Forms/Button";
import Input from "@/components/Forms/Input";
import InputSelectComponent from "@/components/Forms/InputSelect";
import ModalComponente from "@/components/Modal/ModalComponente";
import { finalizarSolicitacao } from "@/requests/CRUD/SolicVeiculos/finalizarSolicitacao";
import { GetForm } from "@/utils";
import { useState } from "react";

const getDataHoraInputSaoPaulo = () =>
  new Date()
    .toLocaleString("sv-SE", { timeZone: "America/Sao_Paulo", hour12: false })
    .replace(" ", "T")
    .slice(0, 16);

const options_ocorrencia = [
  { value: "0", label: "Não" },
  { value: "1", label: "Sim" },
];

const options_status_veiculo = [
  { value: "1", label: "Disponível" },
  { value: "-1", label: "Manutenção" },
];

const FormBaixaVeiculo = ({
  solicitacao,
  onClose,
  onUpdated,
}: {
  solicitacao: any;
  onClose: () => void;
  onUpdated: () => void;
}) => {
  const { handleSubmit, ...form } = GetForm();
  const [isLoading, setIsLoading] = useState(false);

  if (!solicitacao) return null;

  function onSubmitBaixa(data: any) {
    setIsLoading(true);
    return finalizarSolicitacao({
      ...data,
      id_solicitacao: solicitacao.id_solicitacao,
    })
      .then(() => {
        onUpdated();
        onClose();
      })
      .finally(() => setIsLoading(false));
  }

  return (
    <ModalComponente
      hasForm={false}
      hasSaveButton={false}
      header="Finalizar Solicitação de Veículo"
      defaultW="w-[600px]"
      opened={Boolean(solicitacao)}
      onClose={onClose}
    >
      <form
        onSubmit={handleSubmit(onSubmitBaixa)}
        className="flex flex-col gap-3"
      >
        <div className="flex flex-row flex-wrap gap-3">
          <Input
            name="data_retorno_solicitacao"
            label="Data do Retorno"
            formulario={form}
            type="datetime-local"
            required
            error="Informe a Data do Retorno"
            defaultValue={getDataHoraInputSaoPaulo()}
            width="flex-1 min-w-[220px]"
          />
          <Input
            name="quilometragem_solicitacao"
            label="Km do Retorno"
            formulario={form}
            mascara="numerico"
            required
            error="Informe a Km do Retorno"
            width="flex-1 min-w-[180px]"
          />
          <Input
            name="combustivel_retorno_solicitacao"
            label="Combustível na Devolução"
            formulario={form}
            required
            error="Informe o Combustível na Devolução"
            width="flex-1 min-w-[200px]"
          />
          <InputSelectComponent
            name="houve_ocorrencia_solicitacao"
            label="Houve Ocorrência?"
            formulario={form}
            required
            error="Informe se houve Ocorrência"
            options={options_ocorrencia}
            defaultValue="0"
            width="flex-1 min-w-[180px]"
          />
          <InputSelectComponent
            name="status_veiculo"
            label="Status do Veículo"
            formulario={form}
            required
            error="Informe o Status do Veículo"
            options={options_status_veiculo}
            defaultValue="1"
            width="flex-1 min-w-[200px]"
          />
        </div>
        <Input
          name="observacoes_solicitacao"
          label="Observações"
          formulario={form}
          type="textarea"
        />
        <Button loading={isLoading} className="w-full bg-primary mt-2">
          Finalizar
        </Button>
      </form>
    </ModalComponente>
  );
};

export default FormBaixaVeiculo;