import { Select, Row, Col } from '@btri-ui/base';
import React, { useState } from 'react';

const { Option } = Select;
const systemData = ['照明系统', '暖通系统', '电梯系统'];
const loopData = {
  照明系统: ['回路1', '回路2', '回路3'],
  暖通系统: ['回路4', '回路5', '回路6'],
  电梯系统: ['回路7', '回路8', '回路9'],
};

type LoopName = keyof typeof loopData;

const Filter = () => {
  const [loops, setLoops] = useState(loopData[systemData[0] as LoopName]);
  const [secondLoop, setsecondLoop] = useState(
    loopData[systemData[0] as LoopName][0],
  );

  const handleProvinceChange = (value: LoopName) => {
    setLoops(loopData[value]);
    setsecondLoop(loopData[value][0]);
  };

  const onSecondCityChange = (value: LoopName) => {
    setsecondLoop(value);
  };

  return (
    <>
      <Row gutter={[16, 16]}>
        <Col xs={{ span: 24 }} lg={{ span: 8 }}>
          <Select
            defaultValue={systemData[0]}
            style={{ width: '100%' }}
            onChange={handleProvinceChange}
          >
            {systemData.map(province => (
              <Option key={province}>{province}</Option>
            ))}
          </Select>
        </Col>
        <Col xs={{ span: 24 }} lg={{ span: 8 }}>
          <Select
            style={{ width: '100%' }}
            value={secondLoop}
            onChange={onSecondCityChange}
          >
            {loops.map(city => (
              <Option key={city}>{city}</Option>
            ))}
          </Select>
        </Col>
      </Row>
    </>
  );
};

export default Filter;