"use client";

import Input from "@/components/Forms/Input";
import InputSelectComponent from "@/components/Forms/InputSelect";
import { GetForm } from "@/utils";

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

const options_tipo_veiculo = [
  { value: "Carro", label: "Carro" },
  { value: "Caminhonete", label: "Caminhonete" },
  { value: "Moto", label: "Moto" },
  { value: "Caminhão", label: "Caminhão" },
];

const FormVeiculo = ({
  onSubmitFunction,
  defaultValues,
  disabledFields,
  children,
  ...rest
}: {
  [x: string]: any;
}) => {
  const { handleSubmit, ...form } = GetForm();

  return (
    <form
      onSubmit={handleSubmit(onSubmitFunction)}
      key={form.key}
      {...rest}
      className="flex flex-col gap-3"
    >
      <div className="flex flex-row flex-wrap gap-3">
        <InputSelectComponent
          name="status_veiculo"
          label="Status"
          formulario={form}
          required
          error="Informe o Status"
          options={options_status_veiculo}
          defaultValue={defaultValues?.["status_veiculo"] || "1"}
          width="flex-1 min-w-[180px]"
        />
        <Input
          name="placa_veiculo"
          label="Placa"
          formulario={form}
          required
          error="Informe a Placa"
          defaultValue={defaultValues && defaultValues["placa_veiculo"]}
          width="flex-1 min-w-[200px]"
        />
        <Input
          name="modelo_veiculo"
          label="Modelo"
          formulario={form}
          required
          error="Informe o Modelo"
          defaultValue={defaultValues && defaultValues["modelo_veiculo"]}
          width="flex-1 min-w-[200px]"
        />
        <Input
          name="marca_veiculo"
          label="Marca"
          formulario={form}
          required
          error="Informe a Marca"
          defaultValue={defaultValues && defaultValues["marca_veiculo"]}
          width="flex-1 min-w-[200px]"
        />
        <Input
          name="ano_veiculo"
          label="Ano"
          formulario={form}
          mascara="numerico"
          error="Informe o Ano"
          defaultValue={defaultValues && defaultValues["ano_veiculo"]}
          width="flex-1 min-w-[150px]"
        />
        <Input
          name="cor_veiculo"
          label="Cor"
          formulario={form}
          defaultValue={defaultValues && defaultValues["cor_veiculo"]}
          width="flex-1 min-w-[150px]"
        />
        <InputSelectComponent
          name="tipo_veiculo"
          label="Tipo"
          formulario={form}
          options={options_tipo_veiculo}
          defaultValue={defaultValues && defaultValues["tipo_veiculo"]}
          width="flex-1 min-w-[200px]"
        />
        <Input
          name="combustivel_veiculo"
          label="Combustível"
          formulario={form}
          defaultValue={defaultValues && defaultValues["combustivel_veiculo"]}
          width="flex-1 min-w-[200px]"
        />
        <Input
          name="quilometragem_veiculo"
          label="Quilometragem"
          formulario={form}
          mascara="numerico"
          defaultValue={
            defaultValues && defaultValues["quilometragem_veiculo"]
          }
          width="flex-1 min-w-[200px]"
        />
      </div>
      <Input
        name="observacoes_veiculo"
        label="Observações"
        formulario={form}
        type="textarea"
        defaultValue={defaultValues && defaultValues["observacoes_veiculo"]}
      />
      {children}
    </form>
  );
};

export default FormVeiculo;