import React, { useState, useEffect } from 'react';
import { ProvinceSelect } from '../base/ProvinceSelect';
import { CitySelect } from '../base/CitySelect';
import { DistrictSelect } from '../base/DistrictSelect';

interface AreaSelectProps {
  value?: {
    provinceId?: number | string;
    cityId?: number | string;
    districtId?: number | string;
  };
  onChange?: (value: {
    provinceId?: number | string;
    cityId?: number | string;
    districtId?: number | string;
  }) => void;
  disabled?: boolean;
  required?: boolean;
  className?: string;
  'data-testid'?: string;
}

export const AreaSelect: React.FC<AreaSelectProps> = ({
  value = {},
  onChange,
  disabled = false,
  required = false,
  className,
  'data-testid': testId = 'area-select',
}) => {
  const [selectedProvince, setSelectedProvince] = useState<string>(value.provinceId?.toString() || '');
  const [selectedCity, setSelectedCity] = useState<string>(value.cityId?.toString() || '');
  const [selectedDistrict, setSelectedDistrict] = useState<string>(value.districtId?.toString() || '');

  // 处理省份变化
  const handleProvinceChange = (provinceId: string) => {
    setSelectedProvince(provinceId);
    setSelectedCity('');
    setSelectedDistrict('');

    onChange?.({
      provinceId: provinceId || undefined,
      cityId: undefined,
      districtId: undefined
    });
  };

  // 处理城市变化
  const handleCityChange = (cityId: string) => {
    setSelectedCity(cityId);
    setSelectedDistrict('');

    onChange?.({
      provinceId: selectedProvince || undefined,
      cityId: cityId || undefined,
      districtId: undefined
    });
  };

  // 处理区县变化
  const handleDistrictChange = (districtId: string) => {
    setSelectedDistrict(districtId);

    onChange?.({
      provinceId: selectedProvince || undefined,
      cityId: selectedCity || undefined,
      districtId: districtId || undefined
    });
  };

  // 同步外部值变化
  useEffect(() => {
    setSelectedProvince(value.provinceId?.toString() || '');
    setSelectedCity(value.cityId?.toString() || '');
    setSelectedDistrict(value.districtId?.toString() || '');
  }, [value.provinceId, value.cityId, value.districtId]);

  return (
    <div
      className={`grid grid-cols-1 md:grid-cols-3 gap-4 ${className}`}
      data-testid={testId}
    >
      <ProvinceSelect
        value={selectedProvince}
        onChange={handleProvinceChange}
        disabled={disabled}
        required={required}
        placeholder="选择省份"
        showLabel={true}
        labelText="省份"
        data-testid={`${testId}-province`}
      />

      <CitySelect
        provinceId={selectedProvince}
        value={selectedCity}
        onChange={handleCityChange}
        disabled={disabled}
        required={required}
        placeholder="选择城市"
        showLabel={true}
        labelText="城市"
        data-testid={`${testId}-city`}
      />

      <DistrictSelect
        cityId={selectedCity}
        value={selectedDistrict}
        onChange={handleDistrictChange}
        disabled={disabled}
        placeholder="选择区县"
        showLabel={true}
        labelText="区县"
        data-testid={`${testId}-district`}
      />
    </div>
  );
};