import { FormDatePickerField, FormGroup, FormTextAreaField, FormTextField } from "@/components";
import { Label, Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/ui";
import { t } from "i18next";
import { useFormContext } from "react-hook-form";

export const QuoteGeneralCardEditor = () => {
  const { register, formState } = useFormContext();

  return (
    <div className='grid gap-6 md:grid-cols-6'>
      <FormGroup
        className='md:col-span-6'
        title={t("quotes.create.form_groups.general.title")}
        description={t("quotes.create.form_groups.general.desc")}
      >
        <div className='grid grid-cols-6 gap-6'>
          <FormTextField
            required
            className='col-span-2'
            label={t("quotes.form_fields.customer_reference.label")}
            description={t("quotes.form_fields.customer_reference.desc")}
            disabled={formState.disabled}
            placeholder={t("quotes.form_fields.customer_reference.placeholder")}
            {...register("customer_reference")}
          />

          <FormDatePickerField
            required
            label={t("quotes.form_fields.date.label")}
            description={t("quotes.form_fields.date.desc")}
            disabled={formState.disabled}
            placeholder={t("quotes.form_fields.date.placeholder")}
            {...register("date", {
              required: true,
            })}
          />
          <FormTextField
            label={t("quotes.form_fields.validity.label")}
            description={t("quotes.form_fields.validity.desc")}
            disabled={formState.disabled}
            placeholder={t("quotes.form_fields.validity.placeholder")}
            {...register("validity", {
              required: false,
            })}
          />
          <FormTextAreaField
            className='col-span-2'
            label={t("quotes.form_fields.payment_method.label")}
            description={t("quotes.form_fields.payment_method.desc")}
            disabled={formState.disabled}
            placeholder={t("quotes.form_fields.payment_method.placeholder")}
            {...register("payment_method", {
              required: false,
            })}
          />
        </div>
        <div className='grid grid-cols-6 gap-6'>
          <FormTextAreaField
            className='col-span-3'
            required
            label={t("quotes.form_fields.customer_information.label")}
            description={t("quotes.form_fields.customer_information.desc")}
            disabled={formState.disabled}
            placeholder={t("quotes.form_fields.customer_information.placeholder")}
            {...register("customer_information", {
              required: true,
            })}
            errors={formState.errors}
          />

          <FormTextAreaField
            className='col-span-3'
            label={t("quotes.form_fields.notes.label")}
            description={t("quotes.form_fields.notes.desc")}
            disabled={formState.disabled}
            placeholder={t("quotes.form_fields.notes.placeholder")}
            {...register("notes", {
              required: false,
            })}
          />
        </div>
      </FormGroup>
      <FormGroup
        className='hidden md:col-span-2'
        title={t("quotes.create.form_groups.status.title")}
        description={t("quotes.create.form_groups.status.desc")}
      >
        <div className='grid gap-6'>
          <div className='grid gap-3'>
            <Label htmlFor='status'>Status</Label>
            <Select>
              <SelectTrigger id='status' aria-label='Select status'>
                <SelectValue placeholder='Select status' />
              </SelectTrigger>
              <SelectContent>
                <SelectItem value='draft'>Draft</SelectItem>
                <SelectItem value='published'>Active</SelectItem>
                <SelectItem value='archived'>Archived</SelectItem>
              </SelectContent>
            </Select>
          </div>
          <FormTextField
            required
            label={t("quotes.form_fields.lang_code.label")}
            description={t("quotes.form_fields.lang_code.desc")}
            //disabled={formState.disabled}
            placeholder={t("quotes.form_fields.lang_code.placeholder")}
            {...register("lang_code", {
              required: true,
            })}
          />
          <FormTextField
            required
            label={t("quotes.form_fields.currency_code.label")}
            description={t("quotes.form_fields.currency_code.desc")}
            //disabled={formState.disabled}
            placeholder={t("quotes.form_fields.currency_code.placeholder")}
            {...register("currency_code", {
              required: true,
            })}
          />
        </div>
      </FormGroup>
    </div>
  );
};
