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

import { TextField } from "@repo/rdx-ui/components";
import { Input } from "@repo/shadcn-ui/components";
import { ChevronDown, Phone } from "lucide-react";
import { useState } from "react";
import { useTranslation } from "../../i18n";

export function CustomerContactFields({ control }: { control: any }) {
  const { t } = useTranslation();
  const [open, setOpen] = useState(true);

  return (
    <Card className='shadow-none'>
      <CardHeader>
        <CardTitle>{t("form_groups.contact_info.title")}</CardTitle>
        <CardDescription>{t("form_groups.contact_info.description")}</CardDescription>
      </CardHeader>
      <CardContent className='grid grid-cols-1 gap-y-8 gap-x-6 @xl:grid-cols-2'>
        <Collapsible open={open} onOpenChange={setOpen} className='space-y-4'>
          <CollapsibleTrigger className='inline-flex items-center gap-1 text-sm text-muted-foreground hover:underline'>
            Más detalles{" "}
            <ChevronDown className={`h-4 w-4 transition-transform ${open ? "rotate-180" : ""}`} />
          </CollapsibleTrigger>
          <CollapsibleContent>
            <div className='grid grid-cols-1 gap-6 md:grid-cols-2'>
              <FormField
                control={control}
                name='phone2'
                render={({ field }) => (
                  <FormItem>
                    <FormLabel>Teléfono secundario</FormLabel>
                    <FormControl>
                      <Input
                        icon={<Phone className='h-4 w-4 text-muted-foreground' />}
                        {...field}
                      />
                    </FormControl>
                    <FormMessage />
                  </FormItem>
                )}
              />
              <FormField
                control={control}
                name='mobile2'
                render={({ field }) => (
                  <FormItem>
                    <FormLabel>Móvil secundario</FormLabel>
                    <FormControl>
                      <Input
                        placeholder='+34 600 00 000'
                        icon={<Phone className='h-4 w-4 text-muted-foreground' />}
                        {...field}
                      />
                    </FormControl>
                    <FormMessage />
                  </FormItem>
                )}
              />
              <FormField
                control={control}
                name='fax'
                render={({ field }) => (
                  <FormItem className='md:col-span-2'>
                    <FormLabel>Fax</FormLabel>
                    <FormControl>
                      <Input placeholder='' {...field} />
                    </FormControl>
                    <FormMessage />
                  </FormItem>
                )}
              />
            </div>
          </CollapsibleContent>
        </Collapsible>

        <TextField
          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")}
        />
        <TextField
          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")}
        />
        <TextField
          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")}
        />
        <TextField
          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")}
        />
        <TextField
          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")}
        />
        <TextField
          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")}
        />
        <TextField
          control={control}
          name='fax'
          label={t("form_fields.fax.label")}
          placeholder={t("form_fields.fax.placeholder")}
          description={t("form_fields.fax.description")}
        />
        <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")}
        />
      </CardContent>
    </Card>
  );
}