import { Cascader } from "antd";
import { useMemo } from "react";

const provinceCityConfig = require('../private/city.json');

interface Props {
  onChange?: (province?: string, city?: string) => void;
}

export const CascaderProvinceCity = (props: Props) => {
  const options = useMemo(() => {
    const keys = Object.keys(provinceCityConfig);
    const options = keys.map(key => {
      return {
        label: key,
        value: key,
        children: (provinceCityConfig[key] as string[]).map(k => ({
          label: k,
          value: k,
        }))
      }
    });
    return options;
  }, []);
  return (
    <Cascader
      allowClear
      changeOnSelect
      showSearch
      placeholder={'省/市'}
      style={{ width: '100%' }}
      onChange={([a, b] = []) => props.onChange?.(a, b)}
      options={options}
    />
  );
}