import React from "react";
import { Row, Col, Card, Radio, Button, Space, Typography } from "antd";
import { ReloadOutlined } from "@ant-design/icons";

const { Text } = Typography;

interface DeptDistribution {
  id: string;
  name: string;
  count: number;
}

interface ChartControlsProps {
  chartView: string;
  setChartView: (view: string) => void;
  selectedDept: string | null;
  resetFilter: () => void;
  deptDistribution: DeptDistribution[];
}

export default function ChartControls({
  chartView,
  setChartView,
  selectedDept,
  resetFilter,
  deptDistribution,
}: ChartControlsProps): React.ReactElement {
  return (
    <Row className="mb-4">
      <Col span={24}>
        <Card className="shadow-sm">
          <div className="flex justify-between items-center flex-wrap">
            <Space>
              <Text strong>图表控制: </Text>
              <Radio.Group
                value={chartView}
                onChange={(e) => setChartView(e.target.value)}
                optionType="button"
                buttonStyle="solid"
              >
                <Radio.Button value="all">全部</Radio.Button>
                <Radio.Button value="pie">饼图</Radio.Button>
                <Radio.Button value="bar">条形图</Radio.Button>
              </Radio.Group>
            </Space>
            <Space>
              {selectedDept && (
                <Button icon={<ReloadOutlined />} onClick={resetFilter}>
                  重置筛选
                </Button>
              )}
              <Text type="secondary">
                {selectedDept
                  ? `已筛选: ${
                      deptDistribution.find((d) => d.id === selectedDept)
                        ?.name || ""
                    }`
                  : "点击饼图可筛选部门"}
              </Text>
            </Space>
          </div>
        </Card>
      </Col>
    </Row>
  );
}