import { Button, Card, Col, DatePicker, Form, Input, InputNumber, Row, Segmented, Select, Space } from "antd"
import React, { useEffect } from "react"
import { getUserAllApi } from "@/services/operating/account";
import { useAjax } from "@/Hook/useAjax";
import { AppstoreOutlined, BarsOutlined, SearchOutlined } from "@ant-design/icons";
import moment from "moment";
import '../../tencentAdPutIn/index.less'
import { IFuncUpdater } from "ahooks/lib/createUseStorageState";

interface Props {
    pageShowType: "List" | "Kanban"
    setPageShowType: (value?: "List" | "Kanban" | IFuncUpdater<"List" | "Kanban"> | undefined) => void
    onSearch?: (value: Partial<CLOUDNEW.GetMaterialListProps>) => void
}

/**
 * 远程素材库
 * @param param0 
 * @returns 
 */
const Search: React.FC<Props> = ({ onSearch, pageShowType, setPageShowType }) => {

    /**********************************/
    const [form] = Form.useForm();

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

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

    const handleOk = (values: any) => {
        console.log(values)
        let params: any = []
        Object.keys(values).forEach(key => {
            let value = values[key]
            if (['accountIds', 'adgroupIds', 'dynamicCreativeIds', 'tencentMaterialId'].includes(key) && value) {
                let value1 = value.replace(/[,，\s]/g, ',')
                params[key] = value1.split(',').filter((a: any) => a)
            } else if ('costTime' === key && value?.length === 2) {
                params.costTimeMin = moment(value?.[0]).format('YYYY-MM-DD')
                params.costTimeMax = moment(value?.[1]).format('YYYY-MM-DD')
            } else if ('createTime' === key && value?.length === 2) {
                params.createTimeMix = moment(value?.[0]).format('YYYY-MM-DD')
                params.createTimeMax = moment(value?.[1]).format('YYYY-MM-DD')
            } else if ('sizeQueries' === key) {
                params[key] = [value]
            } else {
                params[key] = value
            }
        })
        onSearch?.(params)
    }

    return <Card
        bodyStyle={{ padding: '5px 10px', overflow: 'auto hidden', display: 'flex', gap: 6, flexWrap: 'wrap' }}
        className="cardResetCss buttonResetCss"
        bordered
    >
        <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between', width: '100%' }}>
            <Form
                layout="inline"
                name="basicSelectSearch"
                colon={false}
                form={form}
                onFinish={handleOk}
                initialValues={{
                    sizeQueries: {
                        relation: '='
                    }
                }}
            >
                <Row gutter={[0, 6]}>
                    <Col><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
                            showSearch
                            loading={getUserAll.loading}
                            options={getUserAll?.data?.map((item: { nickname: any; userId: any }) => ({ label: item.nickname, value: item.userId }))}
                        />
                    </Form.Item></Col>
                    <Col><Form.Item name={'pitcherId'}>
                        <Select
                            placeholder="投手"
                            filterOption={(input, option) =>
                                ((option?.label ?? '') as any).toLowerCase().includes(input.toLowerCase())
                            }
                            style={{ minWidth: 120 }}
                            allowClear
                            showSearch
                            loading={getUserAll.loading}
                            options={getUserAll?.data?.map((item: { nickname: any; userId: any }) => ({ label: item.nickname, value: item.userId }))}
                        />
                    </Form.Item></Col>
                    <Col><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></Col>
                    <Col><Form.Item name={['sizeQueries', 'width']}>
                        <InputNumber placeholder="素材宽" />
                    </Form.Item></Col>
                    <Col><Form.Item name={['sizeQueries', 'height']}>
                        <InputNumber placeholder="素材高" />
                    </Form.Item></Col>
                    <Col><Form.Item name={'materialName'}>
                        <Input placeholder="素材名称" style={{ width: 120 }} allowClear/>
                    </Form.Item></Col>
                    <Col>
                        <Form.Item name={['sizeQueries', 'relation']}>
                            <Select
                                placeholder="运算符"
                                filterOption={(input, option) =>
                                    ((option?.label ?? '') as any).toLowerCase().includes(input.toLowerCase())
                                }
                                style={{ width: 100 }}
                                options={[
                                    { label: '小于', value: '<' },
                                    { label: '小于等于', value: '<=' },
                                    { label: '等于', value: '=' },
                                    { label: '大于', value: '>' },
                                    { label: '大于等于', value: '>=' },
                                ]}
                            />
                        </Form.Item>
                    </Col>
                    {<Col><Form.Item name='costTime'>
                        <DatePicker.RangePicker style={{ width: 250 }} placeholder={['消耗时间开始', '消耗时间结束']} />
                    </Form.Item></Col>}
                    {<Col><Form.Item name='createTime'>
                        <DatePicker.RangePicker style={{ width: 250 }} placeholder={['创建时间开始', '创建时间结束']} />
                    </Form.Item></Col>}
                    <Col><Form.Item>
                        <Space>
                            <Button onClick={() => form.resetFields()}>重置</Button>
                            <Button type="primary" htmlType="submit" icon={<SearchOutlined />} className="modalResetCss">搜索</Button>
                        </Space>
                    </Form.Item></Col>
                </Row>
            </Form>
            <Segmented
                value={pageShowType}
                onChange={(value: any) => setPageShowType(value)}
                options={[
                    {
                        value: 'Kanban',
                        icon: <AppstoreOutlined />
                    },
                    {
                        value: 'List',
                        icon: <BarsOutlined />
                    }
                ]}
            />
        </div>
    </Card>
}

export default React.memo(Search)