'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 { 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'

export default function SizeSetting(props) {
  const contextPopupPosition = useRecoilValue(contextPopupPositionState)
  const [settingTarget, setSettingTarget] = useState(props.side || 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 [width, setWidth] = useState(target?.width ? (target.width * 10).toFixed() : 0)
  const [height, setHeight] = useState(target?.height ? (target.height * 10) : 0)
  // 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

    if (target.name === BATCH_TYPE.OPENING || target.name === BATCH_TYPE.SHADOW) {
      resizeObjectBatch(settingTarget, target, width, height, id)
    } 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)}
                  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)}
                    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">
          <button className="btn-frame modal act" onClick={() => handleReSizeObject(id)}>
            {getMessage('write')}
          </button>
        </div>
      </WithDraggable.Body>
    </WithDraggable>
  )
}