import { BaseAddress, MeasurementUnitEnum } from '@bit-ui-libs/common';
import { yupResolver } from '@hookform/resolvers/yup';
import { useState } from 'react';
import { FormProvider, useForm } from 'react-hook-form';
import { useTranslation } from 'react-i18next';
import { ScrollView, View } from 'react-native';
import { boolean, number, object, string } from 'yup';
import { Button, FormTextField, RadioButton, RadioButtonGroup, Text } from '../../../components';
import { tw } from '../../../core';
import { BottomModal } from '../../../layouts';
import { SellTokenShippingForm } from '../schemas';
import CheckBox from '@react-native-community/checkbox';

const FreeShipingChoice = [
  {
    label: 'Yes',
    value: true,
  },
  {
    label: 'No',
    value: false,
  },
];

const schema = object().shape({
  isFreeShipping: boolean().required(),
  // @ts-ignore TODO: fix types
  shippingDetail: object().when('isFreeShipping', {
    is: false,
    then: () =>
      object().shape({
        weight: number().required('Weight is required').nullable(),
        length: number().required('Length is required').nullable(),
        width: number().required('Width is required').nullable(),
        height: number().required('Height is required').nullable(),
        handlingFee: number().required('Handling Fee is required').nullable(),
        unitOfMeasurement: string().required(),
        packagingType: string().required(),
      }),
  }),
});

interface TokenDetailsProps {
  shipFrom?: BaseAddress;
  onSubmit?: (data: SellTokenShippingForm) => void;
  onDismiss?: () => void;
  visible?: boolean;
}

export function TokenDetailsModal({ onSubmit, visible, onDismiss, shipFrom }: TokenDetailsProps) {
  const { t } = useTranslation();
  const [checked, setChecked] = useState(false);
  const form = useForm<SellTokenShippingForm>({
    mode: 'all',
    // @ts-ignore TODO: fix types
    resolver: yupResolver(schema),
    defaultValues: {
      isFreeShipping: false,
      shippingDetail: { unitOfMeasurement: MeasurementUnitEnum.IN, packagingType: '00' },
    },
  });

  const onToggleFreeShipping = (value: boolean) => {
    form.setValue('isFreeShipping', value);
    if (value) form.clearErrors();
  };

  const isFreeShipping = form.watch('isFreeShipping');

  return (
    <BottomModal visible={visible} onClose={onDismiss}>
      <ScrollView contentContainerStyle={tw`grow gap-3`}>
        <FormProvider {...form}>
          <Text isHeader leftBorder style={tw`text-[#333333] text-md`}>
            {t`marketplace.deliveryOptions`}
          </Text>
          <View style={tw`flex flex-row items-center justify-between`}>
            <Text isHeader leftBorder style={tw`text-[#333333] text-md`}>
              {t`marketplace.shipFrom`}
            </Text>
          </View>
          <View style={tw`flex-row justify-between`}>
            <Text style={tw`text-sm text-[#231F20] font-bold`}>Free Shipping*</Text>
            <RadioButtonGroup
              name={form.watch('isFreeShipping')}
              onValueChange={(v) => onToggleFreeShipping(Boolean(v))}
            >
              <View style={tw`flex-wrap flex-row`}>
                {FreeShipingChoice.map((shiping, index) => (
                  <RadioButton key={index} label={shiping.label} name={shiping.value} style={tw`px-2`} />
                ))}
              </View>
            </RadioButtonGroup>
          </View>
          {shipFrom && (
            <View style={tw`rounded-lg p-3 bg-[#F6F6F6]`}>
              <View style={tw`flex-row items-center justify-between border-b border-b-[#E4E4E4] pb-2`}>
                <RadioButtonGroup name={shipFrom.type} onValueChange={() => null}>
                  <RadioButton
                    label={shipFrom.type}
                    name={shipFrom.type}
                    labelStyle={tw`font-normal shrink`}
                    style={tw`py-2`}
                  />
                </RadioButtonGroup>
              </View>
              <View style={tw`flex-row items-center justify-between flex-wrap gap-y-2`}>
                <View style={tw`flex-row items-center w-1/2`}>
                  <Text style={tw`text-[#231F20] text-xs font-bold mr-1`}>Country:</Text>
                  <Text style={tw`text-[#231F20] text-xs`}>{shipFrom.country}</Text>
                </View>
                <View style={tw`flex-row items-center w-1/2`}>
                  <Text style={tw`text-[#231F20] text-xs font-bold mr-1`}>State:</Text>
                  <Text style={tw`text-[#231F20] text-xs`}>{shipFrom.state}</Text>
                </View>
                <View style={tw`flex-row items-center w-1/2`}>
                  <Text style={tw`text-[#231F20] text-xs font-bold mr-1`}>City:</Text>
                  <Text style={tw`text-[#231F20] text-xs`}>{shipFrom.city}</Text>
                </View>
                <View style={tw`flex-row items-center w-1/2`}>
                  <Text style={tw`text-[#231F20] text-xs font-bold mr-1`}>Zip Code:</Text>
                  <Text style={tw`text-[#231F20] text-xs`}>{shipFrom.zip}</Text>
                </View>
              </View>
            </View>
          )}

          <View>
            <FormTextField
              style={tw`bg-[#F1F1F1] text-sm`}
              placeholder="Enter Weight"
              name="shippingDetail.weight"
              textFieldStyle={tw`text-[#424040]`}
              required={!isFreeShipping}
              label="Weight"
              keyboardType="decimal-pad"
              readOnly={isFreeShipping}
            />
          </View>
          <View style={tw`flex-row justify-between`}>
            <View style={tw`w-22`}>
              <FormTextField
                style={tw`bg-[#F1F1F1] text-sm`}
                placeholder="Length"
                name="shippingDetail.length"
                label="Length"
                keyboardType="decimal-pad"
                textFieldStyle={tw`text-[#424040]`}
                required={!isFreeShipping}
                readOnly={isFreeShipping}
              />
            </View>
            <View style={tw`w-22`}>
              <FormTextField
                style={tw`bg-[#F1F1F1] text-sm`}
                placeholder="Width"
                name="shippingDetail.width"
                label="Width"
                keyboardType="decimal-pad"
                textFieldStyle={tw`text-[#424040]`}
                readOnly={isFreeShipping}
                required={!isFreeShipping}
              />
            </View>
            <View style={tw`w-22`}>
              <FormTextField
                style={tw`bg-[#F1F1F1] text-sm`}
                placeholder="Height"
                name="shippingDetail.height"
                label="Height"
                keyboardType="decimal-pad"
                textFieldStyle={tw`text-[#424040]`}
                readOnly={isFreeShipping}
                required={!isFreeShipping}
              />
            </View>
          </View>
          <View style={tw`flex-row items-center`}>
            <CheckBox
              onCheckColor={'#80C342'}
              value={checked}
              tintColors={{ true: '#80C342' }}
              onValueChange={() => setChecked((v) => !v)}
            />
            <Text style={tw`text-sm text-[#231F20] font-bold`}>{t`marketplace.deliveryConfirmation`}</Text>
          </View>
          <View style={tw`flex-row justify-between`}>
            <Text style={tw`text-sm text-[#231F20] font-bold`}>{t`marketplace.shippingHandlingFee`}</Text>
            <FormTextField
              style={tw`bg-[#F1F1F1] text-sm`}
              placeholder="$ 20.00"
              name="shippingDetail.handlingFee"
              label="Handling Fee"
              keyboardType="decimal-pad"
              textFieldStyle={tw`text-[#424040]`}
              readOnly={isFreeShipping}
              required={!isFreeShipping}
            />
          </View>
          <View style={tw`flex-row w-full`}>
            <Button style={tw`w-full bg-[#80C342]`} onPress={form.handleSubmit((values) => onSubmit?.(values))}>
              {t`common.continue`}
            </Button>
          </View>
        </FormProvider>
      </ScrollView>
    </BottomModal>
  );
}