import { useAjax } from "@/Hook/useAjax"
import useNewToken from "@/Hook/useNewToken"
import { Modal, Select, Typography } from "antd"
import React, { useEffect, useState } from "react"
import { getMedaiTagListApi } from "../../API/weMaterial/weMaterial"
import style from './index.less'
import { CloseCircleOutlined } from '@ant-design/icons';

interface TagProps {
    tagId: number
    tagName: string
}
interface Props {
    value?: TagProps[]
    visible?: boolean,
    onClose?: () => void
    onChange?: (data: any[]) => void
}
/**
 * 设置标签
 * @returns 
 */
const EditTag: React.FC<Props> = ({ visible, onClose, value, onChange }) => {

    /*************************************/
    const [queryForm, setQueryForm] = useState<TagProps[]>([])
    const { token } = useNewToken()
    const [isHovering, setIsHovering] = useState<number>(-1)
    const [tag, setTag] = useState<string>()
    const getMedaiTagList = useAjax((params) => getMedaiTagListApi(params))
    /*************************************/

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

    useEffect(() => {
        if (tag) {
            let newQueryForm = JSON.parse(JSON.stringify(queryForm))
            let [tagName, tagId] = tag.split('_')
            newQueryForm.push({ tagName, tagId })
            setQueryForm(newQueryForm)
            setTag(undefined)
        }
    }, [tag])

    useEffect(() => {
        setQueryForm(value || [])
    }, [value])

    const handleOk = () => {
        onChange?.(queryForm || [])
    }

    return <Modal
        title="设置标签"
        open={visible}
        onCancel={() => onClose?.()}
        onOk={handleOk}
    >
        <div className={style.flexStartWrap} style={{ gap: 10 }}>
            {queryForm?.map((item: TagProps) => <div
                onMouseOver={() => { setIsHovering(item.tagId) }}
                onMouseOut={() => { setIsHovering(-1) }}
                key={item.tagId}
                className={style.selectTag}
                style={{
                    height: token.controlHeight,
                    border: `1px solid ${isHovering === item.tagId ? token.colorPrimaryBorderHover : token.colorBorder}`,
                    borderRadius: token.borderRadius,
                    padding: token.padding,
                    backgroundColor: token.colorBgContainer,
                    color: token.colorTextPlaceholder,
                    boxSizing: 'border-box',
                    width: 'auto',
                    minWidth: 'auto',
                    gap: 5
                }}
            >
                <Typography.Paragraph strong style={{ margin: 0 }}>{item.tagName}</Typography.Paragraph>
                <CloseCircleOutlined onClick={() => { setQueryForm(queryForm.filter(item1 => item1.tagId !== item.tagId)) }} style={{ color: `${isHovering === item.tagId ? token.colorPrimaryBorderHover : token.colorBorder}`, cursor: 'pointer' }} />
            </div>)}
            <Select
                style={{ minWidth: 150 }}
                loading={getMedaiTagList.loading}
                placeholder='选择标签'
                value={tag}
                onChange={(e) => { setTag(e) }}
                options={getMedaiTagList?.data?.data
                    ?.filter((item: TagProps) => !queryForm.some(item1 => item.tagId == item1.tagId))
                    ?.map((item: TagProps) => ({ value: item.tagName + '_' + item.tagId, label: item.tagName }))}
            />
        </div>
    </Modal>
}

export default React.memo(EditTag)