import { Button, Collapse, DatePicker, Form, Select, Slider } from 'antd';

export interface IncidentsFiltersProps {
  onChangeVisible: (visible: boolean) => void;
}

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

const { Panel } = Collapse;

export function IncidentsFilters({
  onChangeVisible,
}: IncidentsFiltersProps): JSX.Element {
  return (
    <Form
      name="basic"
      initialValues={{ remember: true }}
      style={{ height: '95%' }}
      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="Impotance" key="2">
          <Form.Item style={{ marginBottom: '0px' }}>
            <Form.Item noStyle name="impotance">
              <Slider range defaultValue={[20, 50]} />
            </Form.Item>
          </Form.Item>
        </Panel>
        <Panel header="Assigned" key="3">
          <Form.Item style={{ marginBottom: '0px' }}>
            <Form.Item noStyle name="assigned">
              <Select mode="multiple">
                <Option value="jack">Jack</Option>
                <Option value="lucy">Lucy</Option>
              </Select>
            </Form.Item>
          </Form.Item>
        </Panel>
        <Panel header="Category" key="4">
          <Form.Item style={{ marginBottom: '0px' }}>
            <Form.Item noStyle name="category">
              <Select mode="multiple">
                <Option value="jack">Jack</Option>
                <Option value="lucy">Lucy</Option>
              </Select>
            </Form.Item>
          </Form.Item>
        </Panel>
        <Panel header="Status" key="5">
          <Form.Item
            style={{ marginBottom: '0px' }}
            extra="Asset allow status."
          >
            <Form.Item noStyle name="status">
              <Select mode="multiple">
                <Option value="jack">Jack</Option>
                <Option value="lucy">Lucy</Option>
              </Select>
            </Form.Item>
          </Form.Item>
        </Panel>
        <Panel header="Time" key="6">
          <Form.Item
            style={{ marginBottom: '0px' }}
            extra="Date and time, when asset was updated."
          >
            <Form.Item noStyle name="Updated">
              {/*<DatePicker.RangePicker showTime />*/}
            </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>
  );
}
