import { txtLength } from "@/utils/utils"
import { DiffOutlined } from "@ant-design/icons"
import { Button, Dropdown, Input, Menu, Space } from "antd"
import { TextAreaProps } from "antd/lib/input/TextArea"
import React, { useEffect, useMemo, useState } from "react"
import './index.less'

interface Props extends TextAreaProps {
    length?: number
    isCurrent?: Array<'素材名称' | '落地页' | '文案'>
}
/**
 * 广告名称 设置 组件
 * @returns 
 */
const InputName: React.FC<Props> = ({ isCurrent, value, onChange, length, ...props }) => {

    /******************************/
    const [status, setStatus] = useState<{ status?: string }>({})
    /******************************/

    const menu = useMemo(() => {
        return <Menu
            onClick={(e) => insertMatching(e.key)}
            items={[
                {
                    key: '<广告版位>',
                    label: '广告版位',
                    disabled: value?.toString()?.includes('<广告版位>')
                },
                {
                    key: '<账号备注>',
                    label: '账号备注',
                    disabled: value?.toString()?.includes('<账号备注>')
                },
                {
                    key: '<商品ID>',
                    label: '商品ID',
                    disabled: value?.toString()?.includes('<商品ID>')
                },
                {
                    key: '<账号ID>',
                    label: '账号ID',
                    disabled: value?.toString()?.includes('<账号ID>')
                },
                {
                    key: '<日期>',
                    label: '日期',
                    disabled: value?.toString()?.includes('<日期>')
                },
                {
                    key: '<时分秒>',
                    label: '时分秒',
                    disabled: value?.toString()?.includes('<时分秒>')
                },
            ]}
        />
    }, [value])

    useEffect(() => {
        if (length && txtLength(value as any) > length) {
            setStatus({ status: 'error' })
        } else {
            setStatus({})
        }
    }, [value])

    /** 插入通配符 */
    const insertMatching = (matching: string) => {
        onChange?.(value + `-${matching}` as any)
    }

    return <Space direction="vertical" size={0}>
        <Space align="end">
            <Input.TextArea value={value} {...props} onChange={(e) => {
                onChange?.(e)
            }} />
            {length && <span style={Object.keys(status).length > 0 ? { color: 'red' } : {}}>{txtLength(value as any)}/{length}</span>}
        </Space>
        {isCurrent && isCurrent?.length > 0 && <div className="matching">
            <span>通配符：</span>
            <Space>
                {/* <Button type="link" onClick={() => insertMatching('<定向名>')} style={{ padding: 0 }} disabled={value?.toString()?.includes('<定向名>')}>+定向名</Button> */}
                {isCurrent.includes('素材名称') && <Button type="link" onClick={() => insertMatching('<素材名称>')} style={{ padding: 0 }} disabled={value?.toString()?.includes('<素材名称>')}>+素材名称</Button>}
                {isCurrent.includes('落地页') && <Button type="link" onClick={() => insertMatching('<落地页>')} style={{ padding: 0 }} disabled={value?.toString()?.includes('<落地页>')}>+落地页</Button>}
                {isCurrent.includes('文案') && <Button type="link" onClick={() => insertMatching('<文案>')} style={{ padding: 0 }} disabled={value?.toString()?.includes('<文案>')}>+文案(前5个文字)</Button>}
                {/* <Button type="link" onClick={() => insertMatching('<优化目标>')} style={{ padding: 0 }} disabled={value?.toString()?.includes('<优化目标>')}>+优化目标</Button>

                <Dropdown overlay={menu} trigger={['click']}>
                    <a style={{ marginLeft: 50 }} onClick={e => e.preventDefault()}><DiffOutlined /> 插入更多</a>
                </Dropdown> */}
            </Space>
        </div>}
        
    </Space>
}

export default React.memo(InputName)