import { SettingOutlined } from '@ant-design/icons';
import { Button, Collapse, DatePicker, Divider, Form, Select } from 'antd';
export interface AssetsFiltersProps {
  onChangeVisible: (visible: boolean) => void;
}

const { Option } = Select;
const { RangePicker } = DatePicker;
const { Panel } = Collapse;

export function EventsFilters() {
  const form = (
    <Form
      key="11"
      name="basic"
      initialValues={{ remember: true }}
      className="flex-aijc-colum"

      // onFinish={onFinish}
      // onFinishFailed={onFinishFailed}
    >
      <Collapse ghost style={{ width: '100%' }}>
        <Panel header="Date" key="1">
          <Form.Item style={{ marginBottom: '0px' }}>
            <Form.Item noStyle name="Date">
              {/*<RangePicker showTime />*/}
            </Form.Item>
          </Form.Item>
        </Panel>
        <Panel header="Group" key="2">
          <Form.Item style={{ marginBottom: '0px' }}>
            <Form.Item noStyle name="group">
              <Select mode="multiple">
                <Option value="jack">Jack</Option>
                <Option value="lucy">Lucy</Option>
              </Select>
            </Form.Item>
          </Form.Item>
        </Panel>
        <Panel header="OS" key="3">
          <Form.Item
            style={{ marginBottom: '0px' }}
            extra="Operation systems, found on asset."
          >
            <Form.Item noStyle name="os">
              <Select mode="multiple">
                <Option value="jack">Windows</Option>
                <Option value="lucy">Linux</Option>
              </Select>
            </Form.Item>
          </Form.Item>
        </Panel>
        <Panel header="Asset type" key="4">
          <Form.Item
            style={{ marginBottom: '0px' }}
            extra="Operation systems, found on asset."
          >
            <Form.Item noStyle name="os">
              <Select mode="multiple">
                <Option value="jack">Windows</Option>
                <Option value="lucy">Linux</Option>
              </Select>
            </Form.Item>
          </Form.Item>
        </Panel>
        <Panel header="Asset status" key="5">
          <Form.Item style={{ marginBottom: '0px' }}>
            <Form.Item noStyle name="status">
              <Select mode="multiple">
                <Option value="jack">Status1</Option>
                <Option value="lucy">Status2</Option>
              </Select>
            </Form.Item>
          </Form.Item>
        </Panel>
      </Collapse>

      <div className="flex-aijc-colum" style={{ marginTop: 'auto' }}>
        <Form.Item>
          <Button
            className="formItemFilterIncidents"
            type="primary"
            htmlType="submit"
          >
            Применить
          </Button>
        </Form.Item>
      </div>
    </Form>
  );

  return form;
}
