"use client"

import { toast } from 'sonner';
import { useForm } from "react-hook-form";
import { z } from "zod";
import { StoreCart, StoreCartLineItem } from "@medusajs/types"
import { Form } from "@kit/ui/form";
import { Trans } from '@kit/ui/trans';
import { useTranslation } from "react-i18next";
import { zodResolver } from "@hookform/resolvers/zod";
import {
  Select,
  SelectContent,
  SelectGroup,
  SelectItem,
  SelectLabel,
  SelectTrigger,
  SelectValue,
} from '@kit/ui/select';
import { updateCartPartnerLocation } from '../../_lib/server/update-cart-partner-location';

import partnerLocations from './partner-locations.json';

const AnalysisLocationSchema = z.object({
  locationId: z.string().min(1),
});

export default function AnalysisLocation({ cart, synlabAnalyses }: { cart: StoreCart, synlabAnalyses: StoreCartLineItem[] }) {
  const { t } = useTranslation('cart');

  const form = useForm<z.infer<typeof AnalysisLocationSchema>>({
    defaultValues: {
      locationId: cart.metadata?.partner_location_id as string ?? '',
    },
    resolver: zodResolver(AnalysisLocationSchema),
  });

  const getLocation = (locationId: string) => partnerLocations.find(({ name }) => name === locationId);

  const selectedLocation = getLocation(form.watch('locationId'));

  const onSubmit = async ({ locationId }: z.infer<typeof AnalysisLocationSchema>) => {
    const promise = updateCartPartnerLocation({
      cartId: cart.id,
      lineIds: synlabAnalyses.map(({ id }) => id),
      partnerLocationId: locationId,
      partnerLocationName: getLocation(locationId)?.name ?? '',
    });

    toast.promise(promise, {
      success: t(`cart:items.analysisLocation.success`),
      loading: t(`cart:items.analysisLocation.loading`),
      error: t(`cart:items.analysisLocation.error`),
    });
  }

  return (
    <div className="w-full bg-white flex flex-col txt-medium gap-y-2">
      <Form {...form}>
        <form
          onSubmit={form.handleSubmit((data) => onSubmit(data))}
          className="w-full mb-2 flex gap-x-2"
        >
          <Select
            value={form.watch('locationId')}
            onValueChange={(value) => {
              form.setValue('locationId', value, {
                shouldValidate: true,
                shouldDirty: true,
                shouldTouch: true,
              });

              return onSubmit(form.getValues());
            }}
          >
            <SelectTrigger>
              <SelectValue placeholder={t('cart:locations.locationSelect')} />
            </SelectTrigger>

            <SelectContent>
              {Object.entries(partnerLocations
                .reduce((acc, curr) => ({
                  ...acc,
                  [curr.city]: [...((acc[curr.city] as typeof partnerLocations) ?? []), curr],
                }), {} as Record<string, typeof partnerLocations>))
                .map(([city, locations]) => (
                  <SelectGroup key={city}>
                    <SelectLabel>{city}</SelectLabel>
                    {locations.map((location) => (
                      <SelectItem key={location.name} value={location.name}>{location.name}</SelectItem>
                    ))}
                  </SelectGroup>
                ))}
            </SelectContent>
          </Select>
        </form>
      </Form>

      {selectedLocation && (
        <div className="flex flex-col gap-y-2 mb-4">
          <p className="text-sm">
            {selectedLocation.address}
          </p>
          <p className="text-sm">
            {selectedLocation.hours}
          </p>
        </div>
      )}

      <p className="text-sm text-muted-foreground">
        <Trans i18nKey={'cart:locations.description'} />
      </p>

    </div>
  )
}