import { useMemo } from 'react';

import { TextAutoTooltip } from '../../components/Text/TextAutoTooltip';
import { COUNTRIES_NAMES } from '../../constans/contryNames';
import { ALL_COUNTRIES, Country } from '../../constans/country';
import { useTranslation } from '../../core/hooks/useTranslation';
import { CommonProps } from '../../types';
import { assertEmptyObject } from '../../utils/assertEmptyObject';
import {
  GeneralSelectFieldProps,
  SelectField,
  SelectFieldNonAsyncOptionsVariant,
  SelectFieldProps,
  SelectFieldSingleValueVariant,
} from '../SelectField/SelectField';

import { TunedOptionFlag } from './styled';

interface CountryOption {
  value: Country;
  label: string;
}

const optionComponent: SelectFieldProps<CountryOption>['optionComponent'] = {
  renderer: (props) => {
    return (
      <>
        <TunedOptionFlag country={props.option.value} />
        <TextAutoTooltip>{props.option.label}</TextAutoTooltip>
      </>
    );
  },
  height: 32,
};

export type CountrySelectFieldProps = CommonProps &
  Omit<
    GeneralSelectFieldProps<CountryOption> &
      SelectFieldSingleValueVariant<CountryOption> &
      SelectFieldNonAsyncOptionsVariant<CountryOption>,
    'options' | 'optionComponent' | 'searchPlaceholder' | 'optionComponentWidth'
  >;

/**
 * Form field that contains dropdown with available countries for select.
 *
 * ```tsx
 * import { CountrySelectField, Country } from 'ui-kit';
 *
 * <CountrySelectField value={Country.Australia} onChange={console.log} />
 * ```
 */
export function CountrySelectField(props: CountrySelectFieldProps) {
  const {
    onChange,
    noOptionsMessage,
    className,
    hideSearch,
    placeholder,
    id,
    trigger,
    optionToSearchString,
    value,
    disabled,
    onBlur,
    multiple,
    async,
    ariaDescribedBy,
    ariaErrorMessage,
    ariaLabel,
    ariaInvalid,
    ariaRequired,
    required,
    testId,
    cleanable,
    ...rest
  } = props;
  assertEmptyObject(rest);

  const { t } = useTranslation();

  const translatedCountries: CountryOption[] = useMemo(() => {
    return ALL_COUNTRIES.map((countryCode) => ({
      value: countryCode,
      label: t(COUNTRIES_NAMES[countryCode]),
    }));
  }, [t]);

  return (
    <SelectField<CountryOption>
      ariaDescribedBy={ariaDescribedBy}
      ariaErrorMessage={ariaErrorMessage}
      ariaInvalid={ariaInvalid}
      ariaLabel={ariaLabel}
      ariaRequired={ariaRequired}
      async={async}
      className={className}
      cleanable={cleanable}
      disabled={disabled}
      hideSearch={hideSearch}
      id={id}
      multiple={multiple}
      noOptionsMessage={noOptionsMessage}
      onBlur={onBlur}
      onChange={onChange}
      optionComponent={optionComponent}
      options={translatedCountries}
      optionToSearchString={optionToSearchString}
      placeholder={placeholder}
      required={required}
      searchPlaceholder={t('ui.countrySelect.search')}
      testId={testId}
      trigger={trigger}
      value={value}
    />
  );
}