import { useAjax } from "@/Hook/useAjax";
import { addV3StrategyApi, getV3StrategyListApi } from "@/services/adqV3";
import { Button, Form, Input, message, Modal, Select, Space } from "antd"
import React, { useEffect, useState } from "react"

interface Props {
    type: string
    strategyValue: string
    onChange?: (value: string) => void
}
/**
 * 保存搜索条件
 * @returns 
 */
const SaveSearch: React.FC<Props> = ({ type, strategyValue, onChange }) => {

    /****************************************/
    const [form] = Form.useForm();
    const [visible, setVisible] = useState<boolean>(false)
    const [queryFormNew] = useState<PULLIN.GetV3StrategyListProps>({ pageNum: 1, pageSize: 100, type })


    const addV3Strategy = useAjax((params) => addV3StrategyApi(params))
    const getStrategy = useAjax((params) => getV3StrategyListApi(params))
    /****************************************/

    useEffect(() => {
        getStrategy.run({ ...queryFormNew, type })
    }, [queryFormNew, type])

    const seve = () => {
        setVisible(true)
    }

    const handleOk = () => {
        form.validateFields().then(values => {
            addV3Strategy.run({ ...values, strategyValue: strategyValue, type: type }).then(res => {
                if (res) {
                    getStrategy.refresh()
                    message.success('保存成功')
                    form.resetFields()
                    setVisible(false)
                }
            })
        })
    }

    return <>
        <Space>
            <Select
                showSearch
                placeholder="选择预设"
                optionFilterProp="children"
                onChange={(_, option) => {
                    if (option?.strategyValue) {
                        onChange?.(option?.strategyValue)
                    }
                }}
                allowClear
                loading={getStrategy.loading}
                filterOption={(input: any, option: any) =>
                    (option!.children as unknown as string).toLowerCase().includes(input.toLowerCase())
                }
                style={{ width: 150 }}
            >
                {getStrategy?.data?.records?.map((item: { strategyKey: string; strategyValue: string; id: any }) => <Select.Option value={item.id} strategyValue={item.strategyValue} key={item.id}>{item.strategyKey}</Select.Option>)}
            </Select>
            <Button onClick={seve}>搜索条件存为预设</Button>
        </Space>
        {visible && <Modal
            title={<strong>搜索条件存为预设</strong>}
            open={visible}
            onCancel={() => { form.resetFields(); setVisible(false) }}
            onOk={handleOk}
            confirmLoading={addV3Strategy.loading}
            className="modalResetCss"
        >
            <Form
                form={form}
                layout='vertical'
                name="saveUpdateAd"
                colon={false}
                initialValues={{}}
            >
                <Form.Item label={<strong>预设名称</strong>} name='strategyKey' rules={[{ required: true, message: '请输入预设名称' }]}>
                    <Input placeholder="请输入预设名称" showCount maxLength={30} />
                </Form.Item>
            </Form>
        </Modal>}
    </>
}

export default React.memo(SaveSearch)