
import { Tag, TagProps } from "antd";
import { useState, useMemo, useEffect } from "react";
import { PERMISSION_DEFINITION } from "@common/const/permissions";
import { useGlobalContext } from "@common/contexts/GlobalStateContext";

export interface TagWithPermission extends TagProps{
    access?:string
}
export default function TagWithPermission(props:TagWithPermission){
    const {access,onClose} = props
    const [editAccess, setEditAccess] = useState<boolean>(access ? false:true)
    const {accessData,checkPermission,accessInit} = useGlobalContext()
    const lastAccess = useMemo(()=>{
      if(!access) return true
      return checkPermission(access as keyof typeof PERMISSION_DEFINITION[0])
  },[access, accessData,checkPermission,accessInit])

    useEffect(()=>{
        access ? setEditAccess(lastAccess) :  setEditAccess(true)
    },[lastAccess])
    
    const handleTagClose = (e: React.MouseEvent<HTMLElement>)=>{
        e.preventDefault();
        if(!editAccess) return
        onClose?.(e)
    }

    return  <Tag  
        closeIcon
        {...props}
        className={` rounded-SEARCH_RADIUS h-[32px] text-[14px] leading-[22px] py-[5px] px-btnbase bg-transparent mb-[8px] ${props.className}`}
        onClose={handleTagClose}>
    {props.children}
  </Tag>

}