import { Button, Card, Form, Input, InputNumber, Select, Space } from "antd"
import React, { useEffect, useContext } from "react"
import { getUserAllApi } from "@/services/operating/account";
import { useAjax } from "@/Hook/useAjax";
import { SearchOutlined } from "@ant-design/icons";
import { useUpdateEffect } from "ahooks";
import { DispatchCloudNew } from ".";

interface Props {
    onSearch?: (value: Partial<CLOUDNEW.GetMaterialListProps>) => void
}

// 素材管理搜索
const Search: React.FC<Props> = ({ onSearch }) => {

    /**********************************/
    const [form] = Form.useForm();
    const { handleType } = useContext(DispatchCloudNew)!;

    const getUserAll = useAjax(() => getUserAllApi())
    /**********************************/

    useUpdateEffect(() => {
        form.resetFields()
    }, [handleType])

    useEffect(() => {
        getUserAll.run()
    }, [])

    const handleOk = (values: any) => {
        onSearch?.(values)
    }

    return <Card
        bodyStyle={{ padding: '10px', overflow: 'auto hidden', display: 'flex', gap: 6, flexWrap: 'wrap' }}
        className="cardResetCss buttonResetCss"
        bordered
    >
        <Form
            layout="inline"
            name="basicSearch"
            colon={false}
            form={form}
            onFinish={handleOk}
        >
            <Form.Item>
                <Input.Group compact>
                    <Select defaultValue={'file'} style={{ width: 70 }}>
                        <Select.Option value="file">名称</Select.Option>
                    </Select>
                    <Form.Item name={'materialName'} style={{ marginRight: 0 }}>
                        <Input style={{ width: 180 }} allowClear placeholder="请输入关键词" />
                    </Form.Item>
                </Input.Group>
            </Form.Item>
            <Form.Item>
                <Input.Group compact>
                    <Select defaultValue={'file'} style={{ width: 70 }}>
                        <Select.Option value="file">备注</Select.Option>
                    </Select>
                    <Form.Item name={'description'} style={{ marginRight: 0 }}>
                        <Input style={{ width: 180 }} allowClear placeholder="请输入关键词" />
                    </Form.Item>
                </Input.Group>
            </Form.Item>
            <Form.Item name={'designerIds'}>
                <Select
                    placeholder="设计师"
                    filterOption={(input, option) =>
                        ((option?.label ?? '') as any).toLowerCase().includes(input.toLowerCase())
                    }
                    style={{ minWidth: 120 }}
                    maxTagCount={1}
                    mode="multiple"
                    allowClear
                    options={getUserAll?.data?.map((item: { nickname: any; userId: any }) => ({ label: item.nickname, value: item.userId }))}
                />
            </Form.Item>

            <Form.Item name="materialType">
                <Select
                    placeholder="素材类型"
                    filterOption={(input, option) =>
                        ((option?.label ?? '') as any).toLowerCase().includes(input.toLowerCase())
                    }
                    allowClear
                    style={{ width: 120 }}
                    options={[
                        { label: '图片', value: 'image' },
                        { label: '视频', value: 'video' }
                    ]}
                />
            </Form.Item>

            <Form.Item name="width">
                <InputNumber addonBefore="素材宽" style={{ width: 180 }} placeholder="请输入素材宽" />
            </Form.Item>

            <Form.Item name="height">
                <InputNumber addonBefore="素材高" style={{ width: 180 }} placeholder="请输入素材高" />
            </Form.Item>

            <Form.Item>
                <Space>
                    <Button onClick={() => form.resetFields()}>重置</Button>
                    <Button type="primary" htmlType="submit" icon={<SearchOutlined />} className="modalResetCss">搜索</Button>
                </Space>
            </Form.Item>
        </Form>
    </Card>
}

export default React.memo(Search)