/**
 * 用户地址组件
 */
import { Box } from '@mui/material';
import { useMemoizedFn } from 'ahooks';
import { translate } from '@arcblock/ux/lib/Locale/util';
import { useLocaleContext } from '@arcblock/ux/lib/Locale/context';
import CountrySelect from '@arcblock/ux/lib/PhoneInput/country-select';
import type { UserAddress } from '../../../@types';
import { translations } from '../../libs/locales';
import EditableField from '../editable-field';

/** only for sx */
const selectStyle = {
  width: '100%',
  px: 2,
  py: 1,
  borderRadius: 1,
  '&:hover': {
    'fieldset.MuiOutlinedInput-notchedOutline': {
      borderColor: 'divider',
    },
  },
  'fieldset.MuiOutlinedInput-notchedOutline': {
    borderColor: 'divider',
    borderRadius: 1,
  },
  '.MuiSelect-select': {
    padding: '0 !important',
    display: 'flex',
    alignItems: 'center',
  },
};

interface AddressErrors {
  country?: string;
  province?: string;
  city?: string;
  line1?: string;
  line2?: string;
  postalCode?: string;
}

export default function AddressEditor({
  address,
  errors,
  handleChange,
  defaultCountry,
}: {
  address: UserAddress;
  errors: AddressErrors;
  handleChange: (field: keyof UserAddress, value: string) => void;
  defaultCountry: string;
}) {
  const { locale } = useLocaleContext();
  const t = useMemoizedFn((key, data = {}) => {
    return translate(translations, key, locale, 'en', data);
  });

  return (
    <Box
      sx={{
        display: 'flex',
        flexDirection: 'column',
        gap: 2,
        mt: 2,
      }}>
      <EditableField
        placeholder={t('profile.address.country')}
        value={address.country || defaultCountry}
        editable
        errorMsg={errors.country}
        label={t('profile.address.country')}>
        <CountrySelect
          value={address.country || defaultCountry}
          onChange={(v) => handleChange('country', v)}
          displayEmpty
          variant="outlined"
          selectCountryProps={{
            hideDialCode: true,
          }}
          sx={selectStyle}
        />
      </EditableField>
      <Box
        sx={{
          display: 'flex',
          gap: 2,
        }}>
        <EditableField
          value={address.province || ''}
          onChange={(value) => handleChange('province', value)}
          placeholder={t('profile.address.province')}
          label={t('profile.address.province')}
          editable
          maxLength={50}
          errorMsg={errors.province}
        />

        <EditableField
          value={address.city || ''}
          onChange={(value) => handleChange('city', value)}
          placeholder={t('profile.address.city')}
          label={t('profile.address.city')}
          editable
          maxLength={50}
          errorMsg={errors.city}
        />
      </Box>
      <EditableField
        value={address.line1 || ''}
        onChange={(value) => handleChange('line1', value)}
        placeholder={t('profile.address.line1')}
        label={t('profile.address.line1')}
        component="textarea"
        editable
        maxLength={200}
        rows={2}
        errorMsg={errors.line1}
      />
      <EditableField
        value={address.line2 || ''}
        onChange={(value) => handleChange('line2', value)}
        placeholder={t('profile.address.line2')}
        label={t('profile.address.line2')}
        component="textarea"
        editable
        rows={2}
        maxLength={200}
        errorMsg={errors.line2}
      />
      <EditableField
        value={address.postalCode || ''}
        onChange={(value) => handleChange('postalCode', value)}
        placeholder={t('profile.address.postalCode')}
        label={t('profile.address.postalCode')}
        editable
        maxLength={20}
        errorMsg={errors.postalCode}
      />
    </Box>
  );
}
