import {
  Card,
  CardContent,
  CardDescription,
  CardHeader,
  CardTitle,
  Collapsible,
  CollapsibleContent,
  CollapsibleTrigger,
} from "@repo/shadcn-ui/components";

import { TextField } from "@repo/rdx-ui/components";
import { ChevronDown, MailIcon, 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 (
    <Card className='border-0 shadow-none'>
      <CardHeader>
        <CardTitle>{t("form_groups.contact_info.title")}</CardTitle>
        <CardDescription>{t("form_groups.contact_info.description")}</CardDescription>
      </CardHeader>
      <CardContent>
        <div className='grid grid-cols-1 gap-6 lg:grid-cols-4 mb-12 '>
          <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={
              <MailIcon className='h-[18px] w-[18px] text-muted-foreground' strokeWidth={1.5} />
            }
            typePreset='email'
            required
          />
          <TextField
            className='lg:col-span-2'
            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
            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} />
            }
          />
        </div>
        <div className='grid grid-cols-1 gap-6 lg:grid-cols-4 mb-12 '>
          <TextField
            className='lg:col-span-2'
            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={
              <MailIcon className='h-[18px] w-[18px] text-muted-foreground' strokeWidth={1.5} />
            }
          />
          <TextField
            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
            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} />
            }
          />
        </div>

        <Collapsible open={open} onOpenChange={setOpen} className='space-y-4'>
          <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>
            <div className='grid grid-cols-1 gap-6 lg:grid-cols-4'>
              <div className='sm:col-span-2'>
                <TextField
                  className='xl: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")}
                />
              </div>
              <div className='sm:col-span-2'>
                <TextField
                  control={control}
                  name='fax'
                  label={t("form_fields.fax.label")}
                  placeholder={t("form_fields.fax.placeholder")}
                  description={t("form_fields.fax.description")}
                />
              </div>
            </div>
          </CollapsibleContent>
        </Collapsible>
      </CardContent>
    </Card>
  );
};