import { useRender,  } from 'src/components/IdeWrapper/useRender'
import { useIdeContext } from 'src/helpers/hooks/useIdeContext'
import { genParams, getParams  } from 'src/helpers/cadPackages/jscadParams'

const Customizer = () => {
  const [open, setOpen] = React.useState(true)
  const ref = React.useRef()
  const jsCadCustomizerElement = ref.current
  const { state } = useIdeContext()
  const customizerParams = state?.objectData?.customizerParams
  const lastParameters = state?.objectData?.lastParameters
  const handleRender = useRender()
  const handleRender2 = ()=>handleRender(getParams(ref.current))

  React.useEffect(() => {
    console.log({ jsCadCustomizerElement, customizerParams, lastParameters })
    if (jsCadCustomizerElement && customizerParams) {
      genParams(customizerParams, jsCadCustomizerElement, lastParameters || {}, (values, source)=>{
        console.log('change source', source)
        if(source === 'group'){
          // save to local storage but do not render
          return
        }
        handleRender(values)
      },[])
    }
  }, [jsCadCustomizerElement, customizerParams, lastParameters])
  return (
    <div
      className={`absolute inset-x-0 bottom-0 bg-ch-gray-600 bg-opacity-60 text-ch-gray-300 text-lg font-fira-sans ${
        open ? 'h-2/3' : ''
      }`}
    >
      <div className="flex justify-between px-6 py-2 items-center">
        <div className="flex gap-6 items-center">
          <button className="px-2" onClick={() => setOpen(!open)}>
            {open ? '⬇' : '⬆'}
          </button>
          <div>Parameters</div>
        </div>
        <button
          className="px-4 py-1 rounded bg-ch-gray-300 text-ch-gray-800"
          onClick={handleRender2}
        >
          Update
        </button>
      </div>
      <div className={`${open ? 'h-full' : 'h-0'} overflow-y-auto py-3 px-12`}>
        <div id="jscad-customizer-block" ref={ref}>
          <p>lots of lines should cause scroll</p>
          <p>lots of lines should cause scroll</p>
          <p>lots of lines should cause scroll</p>
          <p>lots of lines should cause scroll</p>
          <p>lots of lines should cause scroll</p>
          <p>lots of lines should cause scroll</p>
          <p>lots of lines should cause scroll</p>
          <p>lots of lines should cause scroll</p>
          <p>lots of lines should cause scroll</p>
          <p>lots of lines should cause scroll</p>
          <p>lots of lines should cause scroll</p>
          <p>lots of lines should cause scroll</p>
          <p>lots of lines should cause scroll</p>
          <p>lots of lines should cause scroll</p>
          <p>lots of lines should cause scroll</p>
          <p>lots of lines should cause scroll</p>
          <p>lots of lines should cause scroll</p>
          <p>lots of lines should cause scroll</p>
          <p>lots of lines should cause scroll</p>
          <p>lots of lines should cause scroll</p>
          <p>lots of lines should cause scroll</p>
          <p>lots of lines should cause scroll</p>
          <p>lots of lines should cause scroll</p>
          <p>lots of lines should cause scroll</p>
          <p>lots of lines should cause scroll</p>
          <p>lots of lines should cause scroll</p>
          <p>lots of lines should cause scroll</p>
          <p>lots of lines should cause scroll</p>
          <p>lots of lines should cause scroll</p>
          <p>lots of lines should cause scroll</p>
          <p>lots of lines should cause scroll</p>
          <p>lots of lines should cause scroll</p>
          <p>lots of lines should cause scroll</p>
          <p>lots of lines should cause scroll</p>
          <p>lots of lines should cause scroll</p>
          <p>lots of lines should cause scroll</p>
          <p>lots of lines should cause scroll</p>
        </div>
      </div>
    </div>
  )
}

export default Customizer