import { forwardRef, useContext, useEffect, useImperativeHandle, useState } from 'react'
import { useMessage } from '@/hooks/useMessage'
import { useOrientation } from '@/hooks/module/useOrientation'
import { getDegreeInOrientation } from '@/util/canvas-util'
import { numberCheck } from '@/util/common-utils'
import { useCanvasPopupStatusController } from '@/hooks/common/useCanvasPopupStatusController'

export const Orientation = forwardRef(({ tabNum }, ref) => {
  const { getMessage } = useMessage()

  const { trigger: canvasPopupStatusTrigger } = useCanvasPopupStatusController(1)

  const { nextStep, compasDeg, setCompasDeg } = useOrientation()

  const [hasAnglePassivity, setHasAnglePassivity] = useState(false)

  useImperativeHandle(ref, () => ({
    handleNextStep,
  }))

  const handleNextStep = () => {
    nextStep()
    canvasPopupStatusTrigger(compasDeg)
  }

  useEffect(() => {
    checkDegree(compasDeg)
  }, [compasDeg])

  const checkDegree = (e) => {
    if (e === '-0' || e === '-') {
      setCompasDeg('-')
      return
    }
    if (e === '0-') {
      setCompasDeg('-0')
      return
    }
    if (Number(e) >= -180 && Number(e) <= 180) {
      if (numberCheck(Number(e))) {
        setCompasDeg(Number(e))
      }
    } else {
      setCompasDeg(compasDeg)
    }
  }

  return (
    <>
      <div className="properties-setting-wrap">
        <div className="outline-wrap">
          <div className="guide">{getMessage('modal.module.basic.setting.orientation.setting.info')}</div>
          <div className="roof-module-compas">
            <div className="compas-box">
              <div className="compas-box-inner">
                {Array.from({ length: 180 / 15 }).map((dot, index) => (
                  <div
                    key={index}
                    className={`circle ${getDegreeInOrientation(compasDeg) === -1 * (-15 * index + 180) || (index === 0 && compasDeg >= 172 && index === 0 && compasDeg <= 180) || (compasDeg === -180 && index === 0) ? 'act' : ''}`}
                    onClick={() => {
                      if (index === 0) {
                        setCompasDeg(180)
                        return
                      }
                      setCompasDeg(-1 * (-15 * index + 180))
                    }}
                  >
                    {index === 0 && <i>180°</i>}
                    {index === 6 && <i>-90°</i>}
                  </div>
                ))}
                {Array.from({ length: 180 / 15 }).map((dot, index) => (
                  <div
                    key={index}
                    className={`circle ${compasDeg !== 180 && getDegreeInOrientation(compasDeg) === 15 * index ? 'act' : ''}`}
                    onClick={() => setCompasDeg(15 * index)}
                  >
                    {index === 0 && <i>0°</i>}
                    {index === 6 && <i>90°</i>}
                  </div>
                ))}
                <div className="compas">
                  <div className="compas-arr" style={{ transform: `rotate(${getDegreeInOrientation(compasDeg)}deg)` }}></div>
                </div>
              </div>
            </div>
          </div>
          <div className="center-wrap">
            <div className="d-check-box pop">
              <input type="checkbox" id="ch99" checked={hasAnglePassivity} onChange={() => setHasAnglePassivity(!hasAnglePassivity)} />
              <label htmlFor="ch99">{getMessage('modal.module.basic.setting.orientation.setting.angle.passivity')}（-180 〜 180）</label>
            </div>
            <div className="outline-form">
              <div className="input-grid mr10" style={{ width: '160px' }}>
                <input
                  type="text"
                  className="input-origin block"
                  value={compasDeg}
                  readOnly={!hasAnglePassivity}
                  placeholder={0}
                  onChange={
                    (e) => checkDegree(e.target.value)
                    // setCompasDeg(

                    // e.target.value === '-' || (e.target.value !== '' && parseInt(e.target.value) <= 180 && parseInt(e.target.value) >= -180)
                    //   ? e.target.value
                    //   : 0,
                    // )
                  }
                />
              </div>
              <span className="thin">°</span>
            </div>
          </div>
        </div>
      </div>
    </>
  )
})