'use client'
import {Button, Col, Form, Input, Row, Select, Space, theme} from "antd";
import React, {useState} from "react";
import {DownOutlined} from "@ant-design/icons";
import {OperationButtonProps} from "@/app/ui/task/project/OperationButton";

const AdvancedSearchForm = () => {
    const { token } = theme.useToken();
    const [form] = Form.useForm();
    const [expand, setExpand] = useState(false);
    const [searchFields, setSearchFields] = useState<any[]>([
        <Form.Item>
            <Select
                defaultValue="state"
                style={{ width: 120 }}
                allowClear
                options={[{ value: 'state', label: '任务状态' }]}
            />,
            <Select
                defaultValue="="
                style={{ width: 120 }}
                allowClear
                options={[{ value: '=', label: '等于' },{value:'IN',label:"多个选择"}]}
            />,
            <Select
                mode="tags"
                defaultValue={['8','9']}
                style={{ width: 180 }}
                allowClear
                options={[{ value: '8', label: '新建' },{ value: '9', label: '进行中' },{ value: '7', label: '完成' },]}
            />
        </Form.Item>

    ])

    const formStyle: React.CSSProperties = {
        maxWidth: 'none',
        background: token.colorFillAlter,
        borderRadius: token.borderRadiusLG,
    };

    const getFields = () => {
        const count = expand ? 10 : 6;
        const children = [];
        for (let i = 0; i < count; i++) {
            children.push(
                <Col span={8} key={i}>
                    {i % 3 !== 1 ? (
                        <Form.Item
                            name={`field-${i}`}
                            label={`Field ${i}`}
                            rules={[
                                {
                                    required: true,
                                    message: 'Input something!',
                                },
                            ]}
                        >
                            <Input placeholder="placeholder" />
                        </Form.Item>
                    ) : (
                        <Form.Item
                            name={`field-${i}`}
                            label={`Field ${i}`}
                            rules={[
                                {
                                    required: true,
                                    message: 'Select something!',
                                },
                            ]}
                            initialValue="1"
                        >
                            <Select>
                            </Select>
                        </Form.Item>
                    )}
                </Col>,
            );
        }
        return children;
    };

    const onFinish = (values: any) => {
        console.log('Received values of form: ', values);
    };

    return (
        <Form form={form} name="advanced_search" style={formStyle} onFinish={onFinish}>
            <Row gutter={24}>{searchFields}</Row>
            {/*<div style={{ textAlign: 'right' }}>*/}
            {/*    <Space size="small">*/}
            <Form.Item>
                <Button type="primary">
                    添加
                </Button>
                <Button type="primary" htmlType="submit">
                    搜索
                </Button>
                <Button
                    onClick={() => {
                        form.resetFields();
                    }}
                >
                    清空
                </Button>
            </Form.Item>
                    {/*<a*/}
                    {/*    style={{ fontSize: 12 }}*/}
                    {/*    onClick={() => {*/}
                    {/*        setExpand(!expand);*/}
                    {/*    }}*/}
                    {/*><DownOutlined rotate={expand ? 180 : 0} /> Collapse*/}
                    {/*</a>*/}
            {/*    </Space>*/}
            {/*</div>*/}
        </Form>
    );
};
export default AdvancedSearchForm;