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'
import { canvasState } from '@/store/canvasAtom'
import { usePolygon } from '@/hooks/usePolygon'

const FLOW_DIRECTION_TYPE = {
  EIGHT_AZIMUTH: 'eightAzimuth',
  TWENTY_FOUR_AZIMUTH: 'twentyFourAzimuth',
}

export default function FlowDirectionSetting(props) {
  const contextPopupPosition = useRecoilValue(contextPopupPositionState)
  const { id, pos = contextPopupPosition, target } = props
  const canvas = useRecoilValue(canvasState)
  const { getMessage } = useMessage()

  useEffect(() => {
    return () => {
      canvas?.discardActiveObject()
    }
  }, [])

  const [compasDeg, setCompasDeg] = useState(target.surfaceCompass ?? null)
  const [flowDirection, setFlowDirection] = useState(target.direction)
  const { closePopup } = usePopup()

  const orientations = [
    { name: `${getMessage('commons.none')}`, value: 0 },
    { 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 { drawDirectionArrow } = usePolygon()

  const [type, setType] = useState(target.surfaceCompassType ?? FLOW_DIRECTION_TYPE.EIGHT_AZIMUTH)

  const changeSurfaceFlowDirection = (roof, direction, orientation) => {
    roof.set({
      direction: direction,
      surfaceCompass: orientation,
      surfaceCompassType: type,
    })
    drawDirectionArrow(roof)
    canvas?.renderAll()
    closePopup(id)
  }

  const [selectedOrientation, setSelectedOrientation] = useState(
    target.surfaceCompassType !== null && target.surfaceCompassType === FLOW_DIRECTION_TYPE.EIGHT_AZIMUTH
      ? orientations.find((item) => item.value === target.surfaceCompass)
      : orientations[0],
  )

  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 ${flowDirection === 'north' ? 'act' : ''}`} onClick={() => setFlowDirection('north')}></button>
                  <span className="right">{getMessage('commons.east')}</span>
                  <button className={`plane-btn right ${flowDirection === 'east' ? 'act' : ''}`} onClick={() => setFlowDirection('east')}></button>
                  <span className="bottom">{getMessage('commons.south')}</span>
                  <button className={`plane-btn down ${flowDirection === 'south' ? 'act' : ''}`} onClick={() => setFlowDirection('south')}></button>
                  <span className="left">{getMessage('commons.west')}</span>
                  <button className={`plane-btn left ${flowDirection === 'west' ? 'act' : ''}`} onClick={() => setFlowDirection('west')}></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"
                    checked={type === FLOW_DIRECTION_TYPE.EIGHT_AZIMUTH}
                    onChange={(e) => {
                      setCompasDeg(0)
                      setType(FLOW_DIRECTION_TYPE.EIGHT_AZIMUTH)
                    }}
                  />
                  <label htmlFor="ra01">{getMessage('modal.shape.flow.direction.setting.orientation.8')}</label>
                </div>
                <div className="grid-select ">
                  <QSelectBox
                    value={selectedOrientation}
                    options={orientations}
                    onChange={(e) => {
                      setType(FLOW_DIRECTION_TYPE.EIGHT_AZIMUTH)
                      setSelectedOrientation(e)
                      setCompasDeg(e.value)
                    }}
                    showKey={'name'}
                    targetKey={'value'}
                    sourceKey={'value'}
                  />
                </div>
              </div>
              <div className="mb-box">
                <div className="d-check-radio pop">
                  <input
                    type="radio"
                    name="radio01"
                    id="ra02"
                    value={1}
                    checked={type === FLOW_DIRECTION_TYPE.TWENTY_FOUR_AZIMUTH}
                    onChange={(e) => {
                      setType(FLOW_DIRECTION_TYPE.TWENTY_FOUR_AZIMUTH)
                    }}
                  />
                  <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) && type === FLOW_DIRECTION_TYPE.TWENTY_FOUR_AZIMUTH ? 'act' : ''}`}
                        onClick={() => {
                          setType(FLOW_DIRECTION_TYPE.TWENTY_FOUR_AZIMUTH)
                          setCompasDeg(15 * (12 + index))
                        }}
                      ></div>
                    ))}
                    {Array.from({ length: 180 / 15 - 1 }).map((dot, index) => (
                      <div
                        key={index}
                        className={`circle ${compasDeg === 15 * (index + 1) && type === FLOW_DIRECTION_TYPE.TWENTY_FOUR_AZIMUTH ? 'act' : ''}`}
                        onClick={() => {
                          setType(FLOW_DIRECTION_TYPE.TWENTY_FOUR_AZIMUTH)
                          setCompasDeg(15 * (index + 1))
                        }}
                      ></div>
                    ))}
                    <div className="compas">
                      <div
                        className="compas-arr"
                        style={{ transform: `${type === FLOW_DIRECTION_TYPE.TWENTY_FOUR_AZIMUTH && `rotate(${compasDeg}deg)`}` }}
                      ></div>
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </div>
          <div className="grid-btn-wrap">
            <button className="btn-frame modal act" onClick={() => changeSurfaceFlowDirection(target, flowDirection, compasDeg)}>
              {getMessage('modal.common.save')}
            </button>
          </div>
        </div>
      </div>
    </WithDraggable>
  )
}