// import copy from "copy-to-clipboard"
import { FC, 
  // useCallback,
  //  useState
   } from "react"
// import { CopyIcon, ErrorIcon, Trigger } from "@illa-design/react"
import {
  HintTooltipContentProps,
  HintTooltipProps,
} from "@/components/CodeEditor/HintToolTip/interface"
import {
  applyHintTooltipContentMainWrapperStyle,
  applyHintTooltipContentWrapperStyle,
  // copyIconStyle,
  hintTooltipContentTitleStyle,
  hintTooltipContentTitleWrapperStyle,
  hintTooltipResultStyle,
} from "@/components/CodeEditor/HintToolTip/style"

export const HintTooltipContent: FC<HintTooltipContentProps> = (props) => {
  const { hasError = false, resultType, result, setIsHovered } = props

  // const handleClickCopy = useCallback(() => {
  //   if (result) {
  //     copy(result)
  //   }
  // }, [result])

  return (
    <div
      css={applyHintTooltipContentWrapperStyle(hasError)}
      onMouseEnter={() => {
        setIsHovered(true)
      }}
      onMouseLeave={() => {
        setIsHovered(false)
      }}
    >
      <div css={applyHintTooltipContentMainWrapperStyle(hasError)}>
        <div css={hintTooltipContentTitleWrapperStyle}>
          {hasError && <div>Error ICon </div>
          // <ErrorIcon size="12px" />
          }
          <span css={hintTooltipContentTitleStyle}>
            {hasError ? "Error" : resultType}
          </span>
        </div>
        <span css={hintTooltipResultStyle}>{result}</span>
      </div>
      <div>CopyIcon</div>
      {/* <CopyIcon css={copyIconStyle} onClick={handleClickCopy} /> */}
    </div>
  )
}

export const HintToolTip: FC<HintTooltipProps> = (props) => {
  const {
    // isEditorFocused,
    // result,
    // hasError,
    // resultType,
    children,
    // toolTipContainer,
  } = props
  // const [isHovered, setIsHovered] = useState(false)

  return (
    // <Trigger
    //   withoutPadding
    //   withoutOffset
    //   withoutShadow
    //   autoAlignPopupWidth
    //   showArrow={false}
    //   popupVisible={isEditorFocused || isHovered}
    //   position="bottom-start"
    //   colorScheme="white"
    //   popupContainer={toolTipContainer}
    //   content={
    //     <HintTooltipContent
    //       hasError={hasError}
    //       resultType={resultType}
    //       result={result}
    //       setIsHovered={setIsHovered}
    //     />
    //   }
    // >
    <div>
      {children}
      </div>
    // </Trigger>
  )
}
