import { CreateListingRequest, SellingMethodEnum, ShippingAddress } from '@bit-ui-libs/common';
import { yupResolver } from '@hookform/resolvers/yup';
import { format } from 'date-fns';
import { t } from 'i18next';
import { useState } from 'react';
import { FormProvider, useForm } from 'react-hook-form';
import { TouchableOpacity, View } from 'react-native';
import { boolean, mixed, object, string, number } from 'yup';
import { Button, FormTextField, Icon, Text } from '../../../components';
import { tw } from '../../../core';
import { FormDateField } from '../../../native-components/controlled-form/FormDateField';
import { flattenFieldErrors } from '../../../utils';
import { SellTokenShippingForm, shippingDetailSchema } from '../schemas';
import { optionToDate } from '../utils';
import { CalculateCostModal } from './CalculateCostModal';
import { TokenDetailsModal } from './TokenDetailsModal';

const SELLING_METHODS = Object.values(SellingMethodEnum);

const schema = object().shape({
  id: string().required('Could not find Asset'),
  sellingMethod: mixed<SellingMethodEnum>().oneOf(SELLING_METHODS).required(),
  price: number()
    .transform((i) => (typeof i !== 'number' ? parseFloat(i) : i))
    .typeError('Price must be a number')
    .moreThan(0, 'Price must be greater than 0')
    .required(),
  startAt: string().optional(),
  endAt: mixed().transform(optionToDate).optional(),
  isFreeShipping: boolean().required(),
  shippingDetail: shippingDetailSchema,
});

type FixedPriceFormValues = Omit<CreateListingRequest, 'price'> & { price: number | string };

interface SellFixedPriceFormProps {
  assetId: string;
  /** Used to update submit button to prevent bouncing */
  loading?: boolean;
  onAddNewAddress?: () => void;
  onSubmit?: (form: FixedPriceFormValues) => void;
}

export function SellFixedPriceForm(props: SellFixedPriceFormProps) {
  const { assetId, loading, onAddNewAddress, onSubmit } = props;

  const form = useForm<FixedPriceFormValues>({
    // @ts-ignore TODO: fix types
    resolver: yupResolver(schema),
    defaultValues: {
      id: assetId,
      sellingMethod: SellingMethodEnum.Fixed,
      price: '0',
      isFreeShipping: false,
      startAt: format(new Date(), 'yyyy-MM-dd'),
    },
  });
  const errors = flattenFieldErrors(form.formState.errors);
  // Price's form value is always a string
  const price = form.watch('price') as string;
  const [showCalculateModal, setShowCalculateModal] = useState(false);
  const [showDetailsModal, setShowDetailsModal] = useState(false);

  const onCalculateCostSubmit = (data: ShippingAddress) => {
    form.setValue('shippingDetail.shipFrom', { ...data, phone: data.phoneNumber });
    setShowCalculateModal(false);
    setShowDetailsModal(true);
  };
  const onAddTokenDetails = (data: SellTokenShippingForm) => {
    form.setValue('isFreeShipping', data.isFreeShipping);
    if (data.shippingDetail) {
      form.setValue('shippingDetail.weight', data.shippingDetail.weight);
      form.setValue('shippingDetail.length', data.shippingDetail.length);
      form.setValue('shippingDetail.width', data.shippingDetail.width);
      form.setValue('shippingDetail.height', data.shippingDetail.height);
      form.setValue('shippingDetail.handlingFee', data.shippingDetail.handlingFee);
      form.setValue('shippingDetail.packagingType', data.shippingDetail.packagingType);
      form.setValue('shippingDetail.unitOfMeasurement', data.shippingDetail.unitOfMeasurement);
    }

    setShowDetailsModal(false);
  };

  return (
    <FormProvider {...form}>
      <View style={tw`gap-6 py-4`}>
        <View style={tw`flex-row items-center gap-x-3`}>
          <Text>{t`marketplace.sellingPrice`}</Text>
          <FormTextField
            containerStyle={tw`grow m-0 bg-[#231F20]`}
            name="price"
            bgStyle={tw`bg-[#231F20]`}
            value={price.toString()}
            leftIcon={
              <View style={tw`flex-row items-center`}>
                <Icon name="lock-label" color="#80C342" size={20} />
                <Text style={tw`font-bold`}>$</Text>
              </View>
            }
            keyboardType="decimal-pad"
            textFieldStyle={tw`text-white`}
          />
        </View>
        <View style={tw`flex-row items-center gap-x-3`}>
          <Text>{t`marketplace.listingDate`}</Text>
          <View style={tw`grow`}>
            <FormDateField
              name="startAt"
              containerStyle={tw`m-0 bg-[#231F20]`}
              bgStyle={tw`bg-[#231F20]`}
              placeholder="2023-09-10"
              placeholderTextColor={tw.color('gray-300')}
              // onChangeText={onStartDateChange}
              // value={startDate}
              textFieldStyle={tw`text-white`}
              leftIcon={<Icon name="date" color="#80C342" size={20} />}
            />
          </View>
        </View>
        <View style={tw`flex-row items-center justify-between bg-[#231F20] px-2 py-4`}>
          <Text>{t`marketplace.deliveryOption`}</Text>
          <TouchableOpacity
            onPress={() => setShowCalculateModal((v) => !v)}
            style={tw`bg-red-500 rounded-full w-6 h-6 justify-center items-center`}
          >
            <Icon name="arrow-right" size={14} color="#FFFFFF" />
          </TouchableOpacity>
        </View>
        <FormTextField
          containerStyle={tw`grow m-0 bg-[#231F20] h-40`}
          name="description"
          bordered={false}
          multiline={true}
          focus={false}
          placeholder="Additional Description (Optional)"
          bgStyle={tw`bg-[#231F20]`}
          textFieldStyle={tw`text-white h-40`}
          maxLength={250}
        />
        {/* <TotalCost price={priceFloat} onCalculate={() => setShowCalculateModal(v => !v)} /> */}

        {errors.map((err, i) => (
          <Text key={i} style={tw`text-red-500 my-4`}>
            {err}
          </Text>
        ))}

        <Button
          type="primary"
          titleStyle={tw`font-bold`}
          onPress={form.handleSubmit((values) => onSubmit?.(values))}
          disabled={loading}
        >
          <Text style={tw`text-lg`}>{t`common.submit`}</Text>
        </Button>
      </View>

      <CalculateCostModal
        visible={showCalculateModal}
        onSubmit={onCalculateCostSubmit}
        onAddNewAddress={() => {
          setShowCalculateModal(false);
          onAddNewAddress?.();
        }}
        onDismiss={() => setShowCalculateModal(false)}
      />
      <TokenDetailsModal
        shipFrom={form.getValues('shippingDetail.shipFrom')}
        visible={showDetailsModal}
        onSubmit={onAddTokenDetails}
        onDismiss={() => setShowDetailsModal(false)}
      />
    </FormProvider>
  );
}