import { get } from "lodash-es"
import { FC, useCallback } from "react"
// import { DynamicIcon } from "@/page/app/components/InspectPanel/PanelSetters/PublicComponent/DynamicIcon"
import { PanelLabel } from "@/page/App/components/InspectPanel/components/Label"
import BaseInput from "../InputSetter/BaseInput"
import { DynamicSwitchProps } from "./interface"
import {
  applyLabelWrapperStyle,
  customAndSwitchWrapperStyle,
  dynamicSwitchWrapperStyle,
} from "./style"

import { Switch } from "@/utils/switch/switch"
import { DynamicIcon } from "../PublicComponent/DynamicIcon"

const DynamicSwitchSetter: FC<DynamicSwitchProps> = (props) => {
  const {
    attrName,
    labelName,
    labelDesc,
    handleUpdateDsl,
    defaultValue,
    handleUpdateMultiAttrDSL,
    value,
    openDynamic,
    detailedDescription,
    widgetType,
    componentNode,
  } = props

  const customSelected = get(componentNode, `props.${attrName}Dynamic`, false)

  const handleClickDynamicIcon = useCallback(() => {
    if (customSelected) {
      handleUpdateMultiAttrDSL?.({
        [attrName]: undefined,
        [`${attrName}Dynamic`]: false,
      })
    } else {
      handleUpdateMultiAttrDSL?.({
        [attrName]: undefined,
        [`${attrName}Dynamic`]: true,
      })
    }
  }, [attrName, customSelected, handleUpdateMultiAttrDSL, widgetType])

  return (
    <div css={applyLabelWrapperStyle(customSelected)}>
      <div css={dynamicSwitchWrapperStyle}>
        {labelName && (
          <PanelLabel labelName={labelName} labelDesc={labelDesc} />
        )}
        <div css={customAndSwitchWrapperStyle}>
          {openDynamic && (
            <DynamicIcon
              isDynamic={customSelected}
              hasRightContent
              onClick={handleClickDynamicIcon}
            />
          )}
          {!customSelected && (
            <Switch
              defaultValue={defaultValue}
              onChange={(value) => {
                handleUpdateDsl(attrName, value)
          
              }}
              checked={value as boolean}
            />
          )}
        </div>
      </div>
      {customSelected && (
        <BaseInput
          {...props}
          value={value as string}
          isSetterSingleRow
          detailedDescription={detailedDescription ?? labelDesc}
          onlyHasSetter={true}
        />
      )}
    </div>
  )
}

DynamicSwitchSetter.displayName = "DynamicSwitchSetter"

export default DynamicSwitchSetter
