import React,{useState,useEffect,useRef,useMemo} from "react"
import {Tag,Button,Tooltip,Typography,Modal,message} from "antd"
import {useSetState} from "ahooks"
import { useGetStandardMatchByIds } from "@/hooks/standard";
import { useGetModalInfoAndAction } from "@/hooks/common"

interface p1{
    item:any,
    id:string,
    isManager?:boolean,
}

const MetaMatchStandard:React.FC<any>=(props:p1)=>{

    const {item,id,isManager=false} = props

    const [currentItem,setCurrentItem] = useState<any>({})
    const [visible,setVisible] = useSetState({
        item:{},
        visible:false
    })

    const [reload,setReload] = useState(0)
    const detailmodal = useGetModalInfoAndAction()

    const checkStandard = useMemo(()=>{
        if(reload){
            return true
        }else{
            return false
        }
    },[reload])

    const ids=useMemo(()=>{
        return [id]
    },[id])

    const {standardmap} = useGetStandardMatchByIds({metadataIds:ids,reload,checkStandard})

    useEffect(()=>{
        if(standardmap[id]){
            setCurrentItem(standardmap[id])
        }
    },[standardmap])

    useEffect(()=>{
        if(item?.id){
            setCurrentItem(item)
        }
    },[item])

    const color = '#196AD2'
    
    const onPreventMouseDown = (event:any) => {
        event.preventDefault();
        event.stopPropagation();
    };

    const name = useMemo(()=>{
        try {
            if(currentItem.standardCode){
                return `${currentItem.standardName} | ${currentItem.standardCode}`
            }else{
                return currentItem.standardName
            }
        } catch (error) {
            return ''
        }
    },[currentItem])

    const openDetal=(record:any)=>{
        console.log(record)
        const type = record.standardId.split('=')[0]
        detailmodal.openModal(record,{type:'detail',standardType:type,standardId:record.standardId})
    }

    return(
        <>
            <div>
                {
                    currentItem.id?(
                        <Tooltip title={name}>
                            <Tag
                                onMouseDown={onPreventMouseDown}
                                style={{
                                    marginRight: 3,
                                    padding: '2px 7px',
                                    textAlign: 'center',
                                    borderColor: color,
                                    color,
                                    backgroundColor: '#fff',
                                    cursor:'pointer'
                                }}
                                onClick={()=>{openDetal(currentItem)}}
                            > 
                                <Typography.Text ellipsis={true} style={{ width: 80 }}>
                                    <span style={{ color }}>{currentItem?.standardName}</span>
                                </Typography.Text>
                            </Tag>
                        </Tooltip>
                    ):(
                        <span></span>
                    )
                }
            </div>
        </>
    )
}

export default MetaMatchStandard