qcast-front/src/components/floor-plan/modal/flowDirection/FlowDirectionSetting.jsx

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'
import { useSurfaceShapeBatch } from '@/hooks/surface/useSurfaceShapeBatch'

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()

  const { changeSurfaceLineType } = useSurfaceShapeBatch({})

  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()
    changeSurfaceLineType(roof)
    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} className="ml">
      <WithDraggable.Header title={getMessage('modal.shape.flow.direction.setting')} onClose={() => closePopup(id)} />
      <WithDraggable.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>
      </WithDraggable.Body>
    </WithDraggable>
  )
}