import { Col, Row } from 'antd'
import Select from 'antd/lib/select'
import * as React from 'react'
import { useCallback, useState } from 'react'
import { Icon } from '../../components/Icon'
import { Paragraph } from '../../components/Typography'
import { CurrencyCodes } from '../../constants/currency-code'
import './CurrencySelect.scss'
const { Option } = Select

interface CurrencySelectProps {
  value?: string
  onChange?: (item: string) => void
}
const CurrencySelect = ({ value, onChange }: CurrencySelectProps) => {
  const [visible, setVisible] = useState(false)

  const renderCountries = useCallback(() => {
    return Object.keys(CurrencyCodes).map(key => {
      const item = CurrencyCodes[key]
      return (
        <Option
          label={`${item.symbol} ${key}`}
          value={`${item.symbol} ${key}`}
          key={key}
        >
          <Row wrap={false} align="middle">
            <Col>
              <Paragraph ellipsis={{ rows: 1 }} preset="medium14">
                {`${item.symbol} - ${key} - ${item.name}`}
              </Paragraph>
            </Col>
          </Row>
        </Option>
      )
    })
  }, [value])

  return (
    <Select
      showArrow
      onDropdownVisibleChange={setVisible}
      value={value}
      allowClear={false}
      style={{ width: '100%' }}
      onChange={onChange}
      optionLabelProp="label"
      className="currency-select"
      dropdownClassName="currency-select-dropdown"
      suffixIcon={
        visible ? <Icon name="search-grey" /> : <Icon name="arrow-down" />
      }
      showSearch
      listHeight={399}
      filterOption={(input, option) =>
        option?.children.toLowerCase().indexOf(input.toLowerCase()) >= 0
      }
    >
      {renderCountries()}
    </Select>
  )
}

export default CurrencySelect
