import { Select, Flex, Typography } from 'antd'
import PropTypes from 'prop-types'
import Flag from './Flag'
import countries from '../../../database/Countries'

const { Text } = Typography

const CountrySelect = ({
  value,
  onChange,
  style,
  placeholder = 'Select country'
}) => {
  return (
    <Select
      showSearch
      style={{ width: '100%', ...style }}
      placeholder={placeholder}
      optionFilterProp='children'
      value={value}
      onChange={onChange}
      filterOption={(input, option) =>
        option.name.toLowerCase().indexOf(input.toLowerCase()) >= 0
      }
      options={countries
        .sort((a, b) => a.name.localeCompare(b.name))
        .map((country) => ({
          value: country.code,
          name: country.name,
          label: (
            <Flex gap='small' align='center'>
              <Flag code={country.code} size='small' borderRadius={3} />
              <Text elipsis>{country.name}</Text>
            </Flex>
          )
        }))}
    />
  )
}

CountrySelect.propTypes = {
  value: PropTypes.string,
  onChange: PropTypes.func,
  style: PropTypes.object,
  placeholder: PropTypes.string
}

export default CountrySelect