import { App, Col, Empty, Input, Modal, Row, Spin } from "antd"
import React, { useEffect, useState } from "react"
import { ExclamationCircleFilled, DeleteOutlined } from '@ant-design/icons';
import { delMediaTagApi, editMedaiTagApi, getMedaiTagListApi } from "../../API/weMaterial/weMaterial";
import { useAjax } from "@/Hook/useAjax";
import { useUpdateEffect } from "ahooks";


interface NewProps {
    tagId: number
    tagName: string
    onChange: () => void
}
const NewInput: React.FC<NewProps> = ({ tagId, tagName, onChange }) => {

    /************************/
    const { message, modal } = App.useApp()
    const [value, setValue] = useState<string>(tagName)
    const delMediaTag = useAjax((params) => delMediaTagApi(params))
    const editMedaiTag = useAjax((params) => editMedaiTagApi(params))
    /************************/

    useUpdateEffect(() => {
        setValue(tagName)
    }, [tagName])

    /** 删除 */
    const del = () => {
        modal.confirm({
            title: '确定删除?',
            icon: <ExclamationCircleFilled />,
            content: `是否确定删除 [${tagName}] 标签`,
            okType: 'danger',
            onOk() {
                delMediaTag.run(tagId).then(res => {
                    message.success('删除成功')
                    onChange()
                })
            }
        });
    }

    /** 保存 */
    const onSave = () => {
        if (value !== tagName) {
            editMedaiTag.run({ tagId, tagName: value }).then(res => {
                onChange()
                message.success('修改成功')
            })
        }
    }

    return <Input.Search placeholder="输入标签" loading={delMediaTag.loading || editMedaiTag.loading} value={value} onBlur={onSave} onChange={(e) => setValue(e.target.value)} enterButton={<DeleteOutlined />} onSearch={() => { del() }} />
}

interface Props {
    onChange?: () => void
    onClose?: () => void
    visible?: boolean
}

/**
 * 管理标签
 * @returns 
 */
const ManageTag: React.FC<Props> = ({ onChange, visible, onClose }) => {

    /**********************************/

    const getMedaiTagList = useAjax((params) => getMedaiTagListApi(params))
    /**********************************/

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



    return <Modal
        zIndex={2000}
        title="标签管理"
        open={visible}
        onCancel={() => { onClose?.(); onChange?.() }}
        footer={null}
        width={700}
        styles={{ body: { minHeight: 160 } }}
    >
        <Spin spinning={getMedaiTagList.loading}>
            <Row gutter={[10, 10]}>
                {getMedaiTagList?.data?.data?.length > 0 ? getMedaiTagList?.data?.data?.map((item: { tagName: string, tagId: number }) =>
                    <Col span={8} key={item.tagId}><NewInput tagId={item.tagId} tagName={item.tagName} onChange={() => { getMedaiTagList.refresh() }} /></Col>)
                    : <Col span={24}><Empty image={Empty.PRESENTED_IMAGE_SIMPLE} description='暂无标签' /></Col>}
            </Row>
        </Spin>
    </Modal>
}


export default React.memo(ManageTag)