import { FC, memo } from "react"
import { WorkSpaceTreeNodeProps } from "@/page/App/module/DataWorkspace/components/WorkSpaceTreeItem/interface"
import {
  applyJsonValueColorStyle,
  applySimpleItemContainerStyle,
  jsonNameStyle,
  labelNameAndValueContainerStyle,
} from "@/page/App/module/DataWorkspace/components/WorkSpaceTreeItem/style"
import { WorkSpaceTreeItem } from "."
import { renderJsonValue } from "./utils"
import { isObject } from "@/redux/utils"
import { isArray } from "util"


export const WorkSpaceTreeNode: FC<WorkSpaceTreeNodeProps> = memo(
  (props: WorkSpaceTreeNodeProps) => {
    const { name, value, level = 0, parentKey } = props
    if (isObject(value) || isArray(value)) {
      return (
        <WorkSpaceTreeItem
          title={name}
          data={value}
          level={level}
          parentKey={parentKey}
          isChild={level + 1 > 1}
        />
      )
    } else {
      return (
        <div css={applySimpleItemContainerStyle(false, level + 1)}>
          <div css={labelNameAndValueContainerStyle}>
            <label css={jsonNameStyle}>
              {level < 1 ? `{{${parentKey}.${name}}}` : name}&nbsp;
            </label>
            <label css={applyJsonValueColorStyle(typeof value)}>
              {renderJsonValue(value)}
            </label>
          </div>
          CopyIcon
          {/* <IconHotSpot onClick={handleClickCopy} id="copy-icon-hot-spot">
            <CopyIcon />
          </IconHotSpot> */}
        </div>
      )
    }
  },
)

WorkSpaceTreeNode.displayName = "WorkSpaceTreeNode"
