'use client'

import { useRecoilValue } from 'recoil'
import { useMessage } from '@/hooks/useMessage'
import WithDraggable from '@/components/common/draggable/WithDraggable'
import { usePopup } from '@/hooks/usePopup'
import { contextPopupPositionState } from '@/store/popupAtom'
import { useRef, useState } from 'react'
import { useObjectBatch } from '@/hooks/object/useObjectBatch'
import { BATCH_TYPE, POLYGON_TYPE } from '@/common/common'
import { useSurfaceShapeBatch } from '@/hooks/surface/useSurfaceShapeBatch'

export default function SizeSetting(props) {
  const contextPopupPosition = useRecoilValue(contextPopupPositionState)
  const [settingTarget, setSettingTarget] = useState(1)
  const { id, pos = contextPopupPosition, target } = props
  const { getMessage } = useMessage()
  const { closePopup } = usePopup()
  const { resizeObjectBatch } = useObjectBatch({})
  const { resizeSurfaceShapeBatch } = useSurfaceShapeBatch()
  const widthRef = useRef(null)
  const heightRef = useRef(null)

  // const { initEvent } = useEvent()
  // const { initEvent } = useContext(EventContext)

  // useEffect(() => {
  //   initEvent()
  // }, [])

  const handleReSizeObject = () => {
    const width = widthRef.current.value
    const height = heightRef.current.value

    if (
      target.name === BATCH_TYPE.OPENING ||
      target.name === BATCH_TYPE.SHADOW ||
      target.name === BATCH_TYPE.TRIANGLE_DORMER ||
      target.name === BATCH_TYPE.PENTAGON_DORMER
    ) {
      resizeObjectBatch(settingTarget, target, width, height)
    } else if (target.name === POLYGON_TYPE.ROOF) {
      resizeSurfaceShapeBatch(settingTarget, target, width, height)
    }
  }

  return (
    <WithDraggable isShow={true} pos={pos}>
      <div className={`modal-pop-wrap ssm mount`}>
        <div className="modal-head">
          <h1 className="title">{getMessage('modal.size.setting')} </h1>
          <button className="modal-close" onClick={() => closePopup(id)}>
            닫기
          </button>
        </div>
        <div className="modal-body">
          <div className="slope-wrap">
            <div className="size-option-top">
              <div className="size-option-wrap">
                <div className="size-option mb5">
                  <input type="text" className="input-origin mr5" value={target?.width.toFixed(0) * 10} readOnly={true} />
                  <span className="normal-font">mm</span>
                </div>
                <div className="size-option">
                  <input type="text" className="input-origin mr5" defaultValue={target?.width.toFixed(0) * 10} ref={widthRef} />
                  <span className="normal-font">mm</span>
                </div>
              </div>
            </div>
            <div className="size-inner-warp">
              <div className="size-option-side">
                <div className="size-option-wrap">
                  <div className="size-option mb5">
                    <input type="text" className="input-origin mr5" value={target?.height.toFixed(0) * 10} readOnly={true} />
                    <span className="normal-font">mm</span>
                  </div>
                  <div className="size-option">
                    <input type="text" className="input-origin mr5" defaultValue={target?.height.toFixed(0) * 10} ref={heightRef} />
                    <span className="normal-font">mm</span>
                  </div>
                </div>
              </div>
              <div className="size-check-wrap">
                <button className={`size-btn ${settingTarget === 1 ? 'act' : ''}`} onClick={() => setSettingTarget(1)}></button>
                <button className={`size-btn ${settingTarget === 2 ? 'act' : ''}`} onClick={() => setSettingTarget(2)}></button>
                <button className={`size-btn ${settingTarget === 3 ? 'act' : ''}`} onClick={() => setSettingTarget(3)}></button>
                <button className={`size-btn ${settingTarget === 4 ? 'act' : ''}`} onClick={() => setSettingTarget(4)}></button>
                <div className="size-box"></div>
              </div>
            </div>
          </div>
          <div className="grid-btn-wrap">
            <button className="btn-frame modal act" onClick={() => handleReSizeObject()}>
              {getMessage('write')}
            </button>
          </div>
        </div>
      </div>
    </WithDraggable>
  )
}