import { useEffect, useRef, useState } from 'react'
import { useMessage } from '@/hooks/useMessage'
import WithDraggable from '@/components/common/draggable/WithDraggable'
import { useRecoilValue } from 'recoil'
import { contextPopupPositionState } from '@/store/popupAtom'
import { usePopup } from '@/hooks/usePopup'
import { useObjectBatch } from '@/hooks/object/useObjectBatch'
import { canvasState } from '@/store/canvasAtom'
import { CalculatorInput } from '@/components/common/input/CalcInput'

export default function DormerOffset(props) {
  const contextPopupPosition = useRecoilValue(contextPopupPositionState)
  const { id, pos = contextPopupPosition, title } = props
  const { getMessage } = useMessage()
  const { closePopup } = usePopup()
  const [arrow1, setArrow1] = useState(null)
  const [arrow2, setArrow2] = useState(null)
  const arrow1LengthRef = useRef(0)
  const arrow2LengthRef = useRef(0)
  const [arrow1Length, setArrow1Length] = useState(0)
  const [arrow2Length, setArrow2Length] = useState(0)

  const canvas = useRecoilValue(canvasState)
  const { dormerOffsetKeyEvent, dormerOffset } = useObjectBatch({})

  useEffect(() => {
    if (canvas) {
      dormerOffsetKeyEvent(setArrow1, setArrow2)
    }
  }, [])

  const handleOffsetDormer = () => {
    const length1 = arrow1LengthRef.current.value
    const length2 = arrow2LengthRef.current.value

    dormerOffset(arrow1, arrow2, length1, length2)

    // setArrow1(null)
    // setArrow2(null)
    // arrow1LengthRef.current.value = ''
    // arrow2LengthRef.current.value = ''

    // closePopup(id)
  }
  return (
    <WithDraggable isShow={true} pos={pos} className="xm">
      <WithDraggable.Header title={title} onClose={() => closePopup(id)} />
      <WithDraggable.Body>
        <div className="grid-option-tit">{getMessage('modal.dormer.offset.info')}</div>
        <div className="grid-option-wrap">
          <div className="grid-option-box">
            <div className="move-form">
              <p className="mb5">{getMessage('length')}</p>
              <div className="input-move-wrap mb5">
                <div className="input-move">
                  {/*<input type="text" className="input-origin" ref={arrow1LengthRef} placeholder="0" />*/}
                  <CalculatorInput
                    id=""
                    name=""
                    label=""
                    className="input-origin block"
                    value={arrow1LengthRef.current?.value ?? 0}
                    ref={arrow1LengthRef}
                    onChange={() => {}} // No-op function to prevent error
                    options={{ 
                      allowNegative: false,
                      allowDecimal: false,
                    }}
                  />
                </div>
                <span>mm</span>
                <div className="direction-move-wrap">
                  <button
                    className={`direction up ${arrow1 === 'up' ? 'act' : ''}`}
                    onClick={() => {
                      setArrow1('up')
                    }}
                  ></button>
                  <button
                    className={`direction down ${arrow1 === 'down' ? 'act' : ''}`}
                    onClick={() => {
                      setArrow1('down')
                    }}
                  ></button>
                </div>
              </div>
              <div className="input-move-wrap">
                <div className="input-move">
                  {/*<input type="text" className="input-origin" ref={arrow2LengthRef} placeholder="0" />*/}
                  <CalculatorInput
                    id=""
                    name=""
                    label=""
                    className="input-origin block"
                    value={arrow2LengthRef.current?.value ?? 0}
                    ref={arrow2LengthRef}
                    onChange={() => {}} // No-op function to prevent error
                    options={{
                      allowNegative: false,
                      allowDecimal: false,
                    }}
                  />
                </div>
                <span>mm</span>
                <div className="direction-move-wrap">
                  <button
                    className={`direction left ${arrow2 === 'left' ? 'act' : ''}`}
                    onClick={() => {
                      setArrow2('left')
                    }}
                  ></button>
                  <button
                    className={`direction right ${arrow2 === 'right' ? 'act' : ''}`}
                    onClick={() => {
                      setArrow2('right')
                    }}
                  ></button>
                </div>
              </div>
            </div>
          </div>
        </div>
        <div className="grid-btn-wrap">
          <button className="btn-frame modal act" onClick={handleOffsetDormer}>
            {getMessage('modal.common.save')}
          </button>
        </div>
      </WithDraggable.Body>
    </WithDraggable>
  )
}