'use client'

import { useRecoilValue } from 'recoil'
import Image from 'next/image'
import { useMessage } from '@/hooks/useMessage'
import WithDraggable from '@/components/common/draggable/WithDraggable'
import { usePopup } from '@/hooks/usePopup'
import { contextPopupPositionState } from '@/store/popupAtom'
import { useEffect, useRef, useState } from 'react'
import { useObjectBatch } from '@/hooks/object/useObjectBatch'
import { BATCH_TYPE, POLYGON_TYPE } from '@/common/common'
import { useSurfaceShapeBatch } from '@/hooks/surface/useSurfaceShapeBatch'
import { CalculatorInput } from '@/components/common/input/CalcInput'
import { useSwal } from '@/hooks/useSwal'

export default function SizeSetting(props) {
  const contextPopupPosition = useRecoilValue(contextPopupPositionState)
  const [settingTarget, setSettingTarget] = useState(props.side || 1)
  const { id, pos = contextPopupPosition, target, initialPlacement = false } = props
  const { getMessage } = useMessage()
  const { closePopup } = usePopup()
  const { resizeObjectBatch } = useObjectBatch({})
  const { resizeSurfaceShapeBatch } = useSurfaceShapeBatch({})
  const { swalFire } = useSwal()
  const widthRef = useRef(null)
  const heightRef = useRef(null)
  const [width, setWidth] = useState(target?.width ? (target.width * 10).toFixed() : 0)
  const [height, setHeight] = useState(target?.height ? (target.height * 10) : 0)
  const [useCalcPad, setUseCalcPad] = useState(false)
  const disableKeypad = !useCalcPad
  // const { initEvent } = useEvent()
  // const { initEvent } = useContext(EventContext)

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

  useEffect(() => {
    if (target?.width !== undefined) {
      setWidth((target.width * 10).toFixed());
    }
    if (target?.height !== undefined) {
      setHeight((target.height * 10).toFixed());
    }
  }, [target]);

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

    // [OPENING-MIN-SIZE 2026-05-08] 0/빈값 입력 시 적용 차단. 0,0 으로 확정되면 4정점 동일
    // 0-dim 객체가 plan 에 저장되어 모듈배치 단계에서 turf throw → 화면 크래시.
    if (target.name === BATCH_TYPE.OPENING || target.name === BATCH_TYPE.SHADOW) {
      if (width === '' || height === '' || Number(width) <= 0 || Number(height) <= 0) {
        swalFire({ text: getMessage('common.canvas.validate.size'), icon: 'error' })
        return
      }
    }

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

  return (
    <WithDraggable isShow={true} pos={pos} className="ssm">
      <WithDraggable.Header title={getMessage('modal.size.setting')} onClose={() => closePopup(id)} />
      <WithDraggable.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={width}
                       onChange={(e) => setWidth(e.target.value)} readOnly={true} />
                <span className="normal-font">mm</span>
              </div>
              <div className="size-option">
                {/*<input type="text" className="input-origin mr5" defaultValue={(target?.originWidth * 10).toFixed(0)} ref={widthRef} />*/}
                <CalculatorInput
                  id=""
                  name=""
                  label=""
                  className="input-origin block"
                  value={width}
                  ref={widthRef}
                  onChange={(value) => setWidth(value)}
                  disableKeypad={disableKeypad}
                  options={{
                    allowNegative: false,
                    allowDecimal: false
                  }}
                />
                <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={height}
                         onChange={(e) => setHeight(e.target.value)}  readOnly={true} />
                  <span className="normal-font">mm</span>
                </div>
                <div className="size-option">
                  {/*<input type="text" className="input-origin mr5" defaultValue={(target?.originHeight * 10).toFixed(0)} ref={heightRef} />*/}
                  <CalculatorInput
                    id=""
                    name=""
                    label=""
                    className="input-origin block"
                    value={height}
                    ref={heightRef}
                    onChange={(value) => setHeight(value)}
                    disableKeypad={disableKeypad}
                    options={{
                      allowNegative: false,
                      allowDecimal: false
                    }}
                  />
                  <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" style={{ display: 'flex', alignItems: 'center', justifyContent: 'flex-end', gap: '5px' }}>
          <button style={{ width: 'auto' }} onClick={() => setUseCalcPad((prev) => !prev)}>
            <Image src={useCalcPad ? '/static/images/common/Icon_ON_Black.png' : '/static/images/common/Icon_OFF_Black.png'} alt="toggle" width={34} height={34} />
          </button>
          <button className="btn-frame modal act" onClick={() => handleReSizeObject(id)}>
            {getMessage('write')}
          </button>
        </div>
      </WithDraggable.Body>
    </WithDraggable>
  )
}