import { ITopFilter } from '@/pages/TaskManage/Detail/TaskList/taskList.types';
import { Col, Row, Select } from 'antd';

import { useState } from 'react';
import '../index.less';

interface IProps {
  filters: ITopFilter[];
  onChange: (value: any) => void;
}

const TopFilter: React.FC<IProps> = ({ filters, onChange }) => {
  const [values, setValues] = useState<any[]>(
    new Array(filters.length).fill(undefined),
  );

  return (
    <Row justify="space-around" style={{ margin: '30px 0 20px' }}>
      {filters.map((item, index) => {
        return (
          <Col
            key={item.key}
            span={Math.floor(22 / filters.length)}
            style={{ textAlign: 'center' }}
          >
            <Select
              className="antdSelect"
              size="large"
              bordered={false}
              placeholder={item.placeholder}
              options={item.options}
              popupMatchSelectWidth={250}
              allowClear
              onChange={(value) => {
                const temp = filters.map((f, i) => {
                  if (index === i) {
                    return value !== undefined ? value : null;
                  }
                  return values[i] || null;
                });
                setValues(temp);
                onChange(temp);
              }}
              onClear={() => {
                const temp = filters.map((f, i) => {
                  if (index === i) {
                    return null;
                  }
                  return values[i];
                });
                setValues(temp);
                onChange(temp);
              }}
            />
          </Col>
        );
      })}
    </Row>
  );
};

export default TopFilter;
