import WithDraggable from '@/components/common/draggable/WithDraggable'
import { useEffect, useState } from 'react'
import QSelectBox from '@/components/common/select/QSelectBox'
import { useRecoilValue } from 'recoil'
import { contextPopupPositionState } from '@/store/popupAtom'
import { useMessage } from '@/hooks/useMessage'
import { usePopup } from '@/hooks/usePopup'

export default function FlowDirectionSetting(props) {
  const contextPopupPosition = useRecoilValue(contextPopupPositionState)
  const { id, pos = contextPopupPosition, target } = props
  const { getMessage } = useMessage()
  const { closePopup } = usePopup()
  const [compasDeg, setCompasDeg] = useState(360)
  const orientations = [
    { name: `${getMessage('commons.south')}`, value: 360 },
    { name: `${getMessage('commons.south')}${getMessage('commons.east')}`, value: 315 },
    { name: `${getMessage('commons.south')}${getMessage('commons.west')}`, value: 45 },
    { name: `${getMessage('commons.east')}`, value: 270 },
    { name: `${getMessage('commons.west')}`, value: 90 },
    { name: `${getMessage('commons.north')}${getMessage('commons.east')}`, value: 225 },
    { name: `${getMessage('commons.north')}${getMessage('commons.west')}`, value: 135 },
    { name: `${getMessage('commons.north')}`, value: 180 },
  ]
  const [selectedOrientation, setSelectedOrientation] = useState(orientations[0])
  const [type, setType] = useState('0')
  useEffect(() => {
    if (target?.angle === 0) {
      setCompasDeg(360)
    } else {
      setCompasDeg(target?.angle ?? 360)
    }
  }, [])
  useEffect(() => {
    if (type === '0') {
      setCompasDeg(selectedOrientation.value)
    }
  }, [selectedOrientation])

  useEffect(() => {
    if (type === '1') {
      if ([15, 345, 360].includes(compasDeg)) {
        setSelectedOrientation(orientations[0])
      } else if ([30, 45, 60].includes(compasDeg)) {
        setSelectedOrientation(orientations[2])
      } else if ([75, 90, 105].includes(compasDeg)) {
        setSelectedOrientation(orientations[4])
      } else if ([120, 135, 150].includes(compasDeg)) {
        setSelectedOrientation(orientations[6])
      } else if ([165, 180, 195].includes(compasDeg)) {
        setSelectedOrientation(orientations[7])
      } else if ([210, 225, 240].includes(compasDeg)) {
        setSelectedOrientation(orientations[5])
      } else if ([255, 270, 285].includes(compasDeg)) {
        setSelectedOrientation(orientations[3])
      } else if ([300, 315, 330].includes(compasDeg)) {
        setSelectedOrientation(orientations[1])
      }
    }
  }, [compasDeg])
  return (
    <WithDraggable isShow={true} pos={pos}>
      <div className={`modal-pop-wrap ml mount`}>
        <div className="modal-head">
          <h1 className="title">{getMessage('modal.shape.flow.direction.setting')} </h1>
          <button className="modal-close" onClick={() => closePopup(id)}>
            닫기
          </button>
        </div>
        <div className="modal-body">
          <div className="drawing-flow-wrap">
            <div className="discrimination-box">
              <div className="discrimination-tit mb15">{getMessage('modal.flow.direction.setting')}</div>
              <div className="guide">{getMessage('modal.flow.direction.setting.info')}</div>
              <div className="object-direction-wrap">
                <div className="plane-direction">
                  <span className="top">{getMessage('commons.north')}</span>
                  <button className="plane-btn up"></button>
                  <span className="right">{getMessage('commons.east')}</span>
                  <button className="plane-btn right"></button>
                  <span className="bottom">{getMessage('commons.south')}</span>
                  <button className="plane-btn down act"></button>
                  <span className="left">{getMessage('commons.west')}</span>
                  <button className="plane-btn left"></button>
                </div>
              </div>
            </div>
            <div className="discrimination-box">
              <div className="discrimination-tit mb15">{getMessage('modal.module.basic.setting.orientation.setting')}</div>
              <div className="guide">{getMessage('modal.shape.flow.direction.setting.orientation.setting.info')}</div>
              <div className="mb-box">
                <div className="d-check-radio pop mb15">
                  <input type="radio" name="radio01" id="ra01" value={0} checked={type === '0'} onChange={(e) => setType(e.target.value)} />
                  <label htmlFor="ra01">{getMessage('modal.shape.flow.direction.setting.orientation.8')}</label>
                </div>
                <div className="grid-select ">
                  <QSelectBox title={''} options={orientations} value={selectedOrientation} onChange={(e) => setSelectedOrientation(e)} />
                </div>
              </div>
              <div className="mb-box">
                <div className="d-check-radio pop">
                  <input type="radio" name="radio01" id="ra02" value={1} checked={type === '1'} onChange={(e) => setType(e.target.value)} />
                  <label htmlFor="ra02">{getMessage('modal.shape.flow.direction.setting.orientation.24')}</label>
                </div>
              </div>
              <div className="draw-flow-wrap">
                <div className="compas-box">
                  <div className="compas-box-inner">
                    {Array.from({ length: 180 / 15 + 1 }).map((dot, index) => (
                      <div
                        key={index}
                        className={`circle ${compasDeg === 15 * (12 + index) ? 'act' : ''}`}
                        onClick={() => setCompasDeg(15 * (12 + index))}
                      >
                        <i>{13 - index}</i>
                      </div>
                    ))}
                    {Array.from({ length: 180 / 15 - 1 }).map((dot, index) => (
                      <div
                        key={index}
                        className={`circle ${compasDeg === 15 * (index + 1) ? 'act' : ''}`}
                        onClick={() => setCompasDeg(15 * (index + 1))}
                      >
                        <i>{24 - index}</i>
                      </div>
                    ))}
                    <div className="compas">
                      <div className="compas-arr" style={{ transform: `rotate(${compasDeg}deg)` }}></div>
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </div>
          <div className="grid-btn-wrap">
            <button className="btn-frame modal act">{getMessage('modal.common.save')}</button>
          </div>
        </div>
      </div>
    </WithDraggable>
  )
}