import {
  TextField
} from "@repo/rdx-ui/components";
import {
  Collapsible,
  CollapsibleContent,
  CollapsibleTrigger, Field, FieldDescription, FieldGroup, FieldLegend, FieldSet, Separator
} from '@repo/shadcn-ui/components';

import { AtSignIcon, ChevronDown, GlobeIcon, PhoneIcon, SmartphoneIcon } from "lucide-react";
import { useState } from "react";
import { useFormContext } from "react-hook-form";
import { useTranslation } from "../../i18n";

export const CustomerContactFields = () => {
  const { t } = useTranslation();
  const [open, setOpen] = useState(true);
  const { control } = useFormContext();

  return (
    <FieldSet>
      <FieldLegend>{t("form_groups.contact_info.title")}</FieldLegend>
      <FieldDescription>{t("form_groups.contact_info.description")}</FieldDescription>
      <FieldGroup className='grid grid-cols-1 gap-x-6 lg:grid-cols-4'>
        <TextField
          className='lg:col-span-2'
          control={control}
          name='email_primary'
          label={t("form_fields.email_primary.label")}
          placeholder={t("form_fields.email_primary.placeholder")}
          description={t("form_fields.email_primary.description")}
          icon={<AtSignIcon className='h-[18px] w-[18px] text-muted-foreground' strokeWidth={1.5} />}
          typePreset='email'
          required
        />

        <TextField
          className='lg:col-span-2'
          typePreset='phone'
          control={control}
          name='mobile_primary'
          label={t("form_fields.mobile_primary.label")}
          placeholder={t("form_fields.mobile_primary.placeholder")}
          description={t("form_fields.mobile_primary.description")}
          icon={
            <SmartphoneIcon
              className='h-[18px] w-[18px]  text-muted-foreground'
              strokeWidth={1.5}
            />
          }
        />

        <TextField
          typePreset='phone'
          className='lg:col-span-2'
          control={control}
          name='phone_primary'
          label={t("form_fields.phone_primary.label")}
          placeholder={t("form_fields.phone_primary.placeholder")}
          description={t("form_fields.phone_primary.description")}
          icon={
            <PhoneIcon className='h-[18px] w-[18px]  text-muted-foreground' strokeWidth={1.5} />
          }
        />
      </FieldGroup>
      <Separator className='mt-6' />
      <FieldGroup className='grid grid-cols-1 gap-x-6 lg:grid-cols-4'>
        <TextField
          typePreset='email'
          className='lg:col-span-2 lg:col-start-1'
          control={control}
          name='email_secondary'
          label={t("form_fields.email_secondary.label")}
          placeholder={t("form_fields.email_secondary.placeholder")}
          description={t("form_fields.email_secondary.description")}
          icon={<AtSignIcon className='h-[18px] w-[18px] text-muted-foreground' strokeWidth={1.5} />}
        />

        <TextField
          typePreset='phone'
          className='lg:col-span-2'
          control={control}
          name='mobile_secondary'
          label={t("form_fields.mobile_secondary.label")}
          placeholder={t("form_fields.mobile_secondary.placeholder")}
          description={t("form_fields.mobile_secondary.description")}
          icon={
            <SmartphoneIcon
              className='h-[18px] w-[18px]  text-muted-foreground'
              strokeWidth={1.5}
            />
          }
        />
        <TextField
          typePreset='phone'
          className='lg:col-span-2'
          control={control}
          name='phone_secondary'
          label={t("form_fields.phone_secondary.label")}
          placeholder={t("form_fields.phone_secondary.placeholder")}
          description={t("form_fields.phone_secondary.description")}
          icon={
            <PhoneIcon className='h-[18px] w-[18px]  text-muted-foreground' strokeWidth={1.5} />
          }
        />
      </FieldGroup>
      <Separator className='mt-6' />
      <FieldGroup className='grid grid-cols-1 gap-x-6 lg:grid-cols-4'>
        <Collapsible
          open={open}
          onOpenChange={setOpen}
          className='space-y-8 col-start-1 col-span-full'
        >
          <CollapsibleTrigger className='inline-flex items-center gap-1 text-sm text-primary hover:underline'>
            {t("common.more_details")}{" "}
            <ChevronDown className={`h-4 w-4 transition-transform ${open ? "rotate-180" : ""}`} />
          </CollapsibleTrigger>
          <CollapsibleContent>
            <FieldGroup className='grid grid-cols-1 gap-6 lg:grid-cols-4'>
              <Field className='lg:col-span-2'>
                <TextField
                  typePreset='text'
                  className='lg:col-span-2'
                  control={control}
                  name='website'
                  label={t("form_fields.website.label")}
                  placeholder={t("form_fields.website.placeholder")}
                  description={t("form_fields.website.description")}
                  icon={
                    <GlobeIcon className='h-[18px] w-[18px]  text-muted-foreground' strokeWidth={1.5} />
                  }

                />
              </Field>
              <Field className='lg:col-span-2'>
                <TextField
                  typePreset='phone'
                  className='lg:col-span-2'
                  control={control}
                  name='fax'
                  label={t("form_fields.fax.label")}
                  placeholder={t("form_fields.fax.placeholder")}
                  description={t("form_fields.fax.description")}
                />
              </Field>
            </FieldGroup>
          </CollapsibleContent>
        </Collapsible>
      </FieldGroup>
    </FieldSet>
  );
};
