import { useMemo } from 'react';
import { Select } from 'antd';
import { getDistrictOptionsByCityCode } from '../lib/china-region';

type Props = {
  cityCode?: string | null;
  value?: string[];
  onChange?: (value: string[]) => void;
  placeholder?: string;
  disabled?: boolean;
};

/** 已选开城城市后，仅多选该市下区县（不再选省/市） */
export default function CityDistrictMultiSelect({
  cityCode,
  value,
  onChange,
  placeholder,
  disabled,
}: Props) {
  const options = useMemo(() => getDistrictOptionsByCityCode(cityCode), [cityCode]);
  const ready = Boolean(cityCode) && options.length > 0;

  return (
    <Select
      mode="multiple"
      allowClear
      showSearch
      optionFilterProp="label"
      value={value}
      onChange={onChange}
      disabled={disabled || !ready}
      placeholder={
        placeholder ??
        (cityCode ? (ready ? '请选择区县（可多选）' : '该城市暂无区县数据') : '请先选择开城城市')
      }
      options={options}
      style={{ width: '100%' }}
      maxTagCount="responsive"
    />
  );
}