import { useLocaleContext } from '@arcblock/ux/lib/Locale/context';
import { Fade, InputAdornment, Stack } from '@mui/material';
import type { SxProps } from '@mui/material';
import { Controller, useFormContext, useWatch } from 'react-hook-form';
import FormInput from '../../components/input';
import FormLabel from '../../components/label';
import CountrySelect from '../../components/country-select';
import { getFieldValidation, validatePostalCode } from '../../libs/validator';

type Props = {
  mode: string;
  stripe: boolean;
  sx?: SxProps;
  fieldValidation?: Record<string, any>;
  errorPosition?: 'right' | 'bottom';
};

export default function AddressForm({ mode, stripe, sx = {}, fieldValidation = {}, errorPosition = 'right' }: Props) {
  const { t, locale } = useLocaleContext();
  const { control } = useFormContext();
  const country = useWatch({ control, name: 'billing_address.country' });
  if (mode === 'required') {
    return (
      <Fade in>
        <Stack className="cko-payment-address cko-payment-form" sx={sx}>
          <Stack direction="column" className="cko-payment-form" spacing={0}>
            <FormLabel className="base-label">{t('payment.checkout.billing.line1')}</FormLabel>
            <FormInput
              name="billing_address.line1"
              rules={{
                required: t('payment.checkout.required'),
                ...getFieldValidation('billing_address.line1', fieldValidation, locale),
              }}
              errorPosition={errorPosition}
              variant="outlined"
              placeholder={t('payment.checkout.billing.line1')}
            />
            <FormLabel className="base-label">{t('payment.checkout.billing.city')}</FormLabel>
            <FormInput
              name="billing_address.city"
              rules={{
                required: t('payment.checkout.required'),
                ...getFieldValidation('billing_address.city', fieldValidation, locale),
              }}
              errorPosition={errorPosition}
              variant="outlined"
              placeholder={t('payment.checkout.billing.city')}
            />
            <FormLabel className="base-label">{t('payment.checkout.billing.state')}</FormLabel>
            <FormInput
              name="billing_address.state"
              rules={{
                required: t('payment.checkout.required'),
                ...getFieldValidation('billing_address.state', fieldValidation, locale),
              }}
              errorPosition={errorPosition}
              variant="outlined"
              placeholder={t('payment.checkout.billing.state')}
            />
            <FormLabel className="base-label">{t('payment.checkout.billing.postal_code')}</FormLabel>
            <FormInput
              name="billing_address.postal_code"
              rules={{
                required: t('payment.checkout.required'),
                validate: (x: string) => {
                  const isValid = validatePostalCode(x, country);
                  return isValid ? true : t('payment.checkout.invalid');
                },
                ...getFieldValidation('billing_address.postal_code', fieldValidation, locale),
              }}
              errorPosition={errorPosition}
              variant="outlined"
              placeholder={t('payment.checkout.billing.postal_code')}
              InputProps={{
                startAdornment: (
                  <InputAdornment position="start" style={{ marginRight: '2px', marginLeft: '-8px' }}>
                    <Controller
                      name="billing_address.country"
                      control={control}
                      render={({ field }) => (
                        <CountrySelect
                          {...field}
                          ref={field.ref as unknown as React.RefObject<HTMLDivElement | null>}
                          sx={{
                            '&.Mui-focused .MuiOutlinedInput-notchedOutline': {
                              borderColor: 'transparent',
                            },
                          }}
                        />
                      )}
                    />
                  </InputAdornment>
                ),
              }}
            />
          </Stack>
        </Stack>
      </Fade>
    );
  }

  if (stripe) {
    return (
      <Fade in>
        <Stack className="cko-payment-address cko-payment-form" sx={sx}>
          <Stack direction="column" className="cko-payment-form" spacing={0}>
            <FormLabel className="base-label">{t('payment.checkout.billing.postal_code')}</FormLabel>
            <Stack direction="row" spacing={0}>
              <FormInput
                name="billing_address.postal_code"
                rules={{
                  required: t('payment.checkout.required'),
                  validate: (x: string) => {
                    const isValid = validatePostalCode(x, country);
                    return isValid ? true : t('payment.checkout.invalid');
                  },
                  ...getFieldValidation('billing_address.postal_code', fieldValidation, locale),
                }}
                errorPosition={errorPosition}
                variant="outlined"
                placeholder={t('payment.checkout.billing.postal_code')}
                InputProps={{
                  startAdornment: (
                    <InputAdornment position="start" style={{ marginRight: '2px', marginLeft: '-8px' }}>
                      <Controller
                        name="billing_address.country"
                        control={control}
                        render={({ field }) => (
                          <CountrySelect
                            {...field}
                            ref={field.ref as unknown as React.RefObject<HTMLDivElement | null>}
                            sx={{
                              '.MuiOutlinedInput-notchedOutline': {
                                borderColor: 'transparent !important',
                              },
                            }}
                          />
                        )}
                      />
                    </InputAdornment>
                  ),
                }}
              />
            </Stack>
          </Stack>
        </Stack>
      </Fade>
    );
  }

  return null;
}