import React, { ChangeEvent, FC } from 'react'
import { data } from './caData'
import { SelectProps, Select, Input } from 'components/FormControl'
import { Col, Row } from 'antd'

export const CountrySelect: FC<SelectProps> = ({ style, ...props }) => {
	return (
		<Select
			placeholder="CA"
			{...props}
			style={{ width: 93, ...style }}
			options={data.map(label => ({ label, value: label }))}
			dropdownStyle={{ width: 350 }}
			dropdownMatchSelectWidth={350}
		/>
	)
}

type CityCountryValue = { city?: string, country: string | null }

export interface CityCountrySelectProps {
	value?: CityCountryValue
	onChange?: (value: CityCountryValue) => void
}

export const CityCountrySelect: FC<CityCountrySelectProps> = ({ value = { city: '', country: null }, onChange }) => {
	const handleChangeCity = (e: ChangeEvent<HTMLInputElement>) => {
		onChange && onChange({ ...value, city: e.target.value })
	}
	const handleChangeCountry = (country: string) => {
		onChange && onChange({ ...value, country })
	}
	return (
		<Row gutter={22}>
			<Col flex="auto">
				<Input value={value.city} onChange={handleChangeCity} />
			</Col>
			<Col flex="none">
				<CountrySelect value={value.country} onChange={handleChangeCountry} />
			</Col>
		</Row>
	)
}

