import { ProfileTypeEnum, SerializableValue, ShippingAddress } from '@bit-ui-libs/common';
import { yupResolver } from '@hookform/resolvers/yup';
import { useQuery } from '@tanstack/react-query';
import { useCallback, useMemo } from 'react';
import { FormProvider, useForm } from 'react-hook-form';
import { useTranslation } from 'react-i18next';
import { ScrollView, TouchableOpacity, View } from 'react-native';
import { mixed, object, string } from 'yup';
import { Button, Icon, Loading, RadioButton, RadioButtonGroup, Text } from '../../../components';
import { tw } from '../../../core';
import { BottomModal } from '../../../layouts';
import { useServicesStore } from '../../../stores';
import { flattenFieldErrors } from '../../../utils';
import { useGetDefaultProfile } from '../../profile';

const schema = object().shape({
  addressId: string().optional().nullable(),
  type: mixed().required('Address Type is required').nullable(),
  name: string().required('Name is required').nullable(),
  phoneNumber: string().required('Phone Number is required').nullable(),
  address: string().required('Address is required').nullable(),
  city: string().required('City is required').nullable(),
  state: string().required('State is required').nullable(),
  zip: string()
    .min(4, 'The zip must be greater than or equal to 4')
    .max(10, 'The zip must be less than or equal to 10')
    .required('Zip is required')
    .nullable(),
  country: string().required('Country is required').nullable(),
});

interface CalculateCostModalProps {
  visible?: boolean;
  onAddNewAddress?: () => void;
  onSubmit?: (data: ShippingAddress) => void;
  onDismiss?: () => void;
}

export function CalculateCostModal(props: CalculateCostModalProps) {
  const { visible, onAddNewAddress, onSubmit, onDismiss } = props;

  const { t } = useTranslation();
  const seller = useServicesStore((s) => s.seller);
  const { data: profile, isLoading } = useGetDefaultProfile({ profileType: ProfileTypeEnum.Seller });

  const { data: addresses } = useQuery({
    queryKey: ['shipping-addresses', profile?.id],
    queryFn: () => seller.shippingAddress.listShippingAddresses(profile!.id, {}),
    enabled: !!profile?.id,
  });

  const form = useForm({ mode: 'all', resolver: yupResolver(schema) });
  const errors = flattenFieldErrors(form.formState.errors);

  const onAddressSelect = useCallback(
    (addressId: SerializableValue) => {
      const address = addresses?.find((a) => a.id === addressId);
      if (!address) return;
      form.reset({ ...address, addressId: address.id });
    },
    [form, addresses]
  );
  const addressData = useMemo(
    () => [
      { label: 'Country', key: 'country' },
      { label: 'State', key: 'state' },
      { label: 'City', key: 'city' },
      { label: 'Zip Code', key: 'zip' },
    ],
    []
  );
  if (isLoading)
    return (
      <Loading loading dark>
        Loading addresses...
      </Loading>
    );

  return (
    <BottomModal visible={visible} onClose={onDismiss}>
      <FormProvider {...form}>
        <ScrollView style={tw`bg-white`}>
          <View style={tw`gap-2`}>
            <Text isHeader leftBorder style={tw`text-dark`}>
              {t`marketplace.selectShipFormAddress`}
            </Text>
            <Text isHeader leftBorder style={tw`text-dark text-sm`}>
              {t`marketplace.shipFrom`}
            </Text>
            <Text style={tw`font-bold text-dark`}>{t`marketplace.selectAddress`}</Text>
            <RadioButtonGroup style={tw`gap-2`} name={form.watch('addressId') || ''} onValueChange={onAddressSelect}>
              {addresses?.map((address, i) => (
                <View key={i} style={tw`rounded-lg p-3 bg-[#F6F6F6]`}>
                  <View style={tw`flex-row items-center justify-between border-b border-b-[#E4E4E4] p-2`}>
                    <RadioButton name={address.id} label={address.type} labelStyle={tw`text-dark font-bold`} />
                    <View style={tw`flex-row items-center gap-x-2`}>
                      <TouchableOpacity>
                        <Text style={tw`text-[#0CC4FE] text-xs leading-3 font-semibold border-r border-[#999797] pr-2`}>
                          Edit
                        </Text>
                      </TouchableOpacity>
                      <TouchableOpacity>
                        <Text style={tw`text-[#CC4848] font-semibold text-xs leading-3`}>{t`common.delete`}</Text>
                      </TouchableOpacity>
                    </View>
                  </View>
                  <View style={tw`flex-row items-center justify-between flex-wrap gap-y-2 p-2`}>
                    {addressData.map((value, index) => (
                      <View key={index} style={tw`flex-row items-center w-1/2`}>
                        <Text style={tw`text-[#231F20] text-xs font-bold mr-1`}>{value.label}:</Text>
                        <Text style={tw`text-[#231F20] text-xs`}>{address[value.key as keyof ShippingAddress]}</Text>
                      </View>
                    ))}
                  </View>
                </View>
              ))}
            </RadioButtonGroup>
            <TouchableOpacity
              onPress={onAddNewAddress}
              style={tw`flex-row items-center justify-between border-[#F0DFCF] border-2 bg-[#FFF5EC] p-3 rounded-2`}
            >
              <View style={tw`flex-row`}>
                <Icon name="location-mark" color="#F6851B" size={20} />
                <Text style={tw`text-black mx-3`}>{t`marketplace.addNewAddress`}</Text>
              </View>
              <Icon name="add-circle-plus-icon" />
            </TouchableOpacity>
            {errors.map((err, i) => (
              <Text key={i} style={tw`text-red-500 my-4`}>
                {err}
              </Text>
            ))}
            <Button
              type="primary"
              onPress={form.handleSubmit((values) => onSubmit?.(values as any))}
              titleStyle={tw`text-lg font-bold`}
            >
              {t`common.continue`}
            </Button>
          </View>
        </ScrollView>
      </FormProvider>
    </BottomModal>
  );
}