qcast-front/src/components/floor-plan/modal/setting01/GridOption.jsx

import React, { useEffect, useState } from 'react'
import { useRecoilState, useSetRecoilState } from 'recoil'
import { settingModalGridOptionsState } from '@/store/settingAtom'
import { useMessage } from '@/hooks/useMessage'
import { adsorptionPointAddModeState } from '@/store/canvasAtom'
import { useTempGrid } from '@/hooks/useTempGrid'
import ColorPickerModal from '@/components/common/color-picker/ColorPickerModal'
import { usePopup } from '@/hooks/usePopup'
import { v4 as uuidv4 } from 'uuid'
import DotLineGrid from '@/components/floor-plan/modal/grid/DotLineGrid'
import { useCanvasSetting } from '@/hooks/option/useCanvasSetting'
import { useEvent } from '@/hooks/useEvent'

export default function GridOption(props) {
  const [gridOptions, setGridOptions] = useRecoilState(settingModalGridOptionsState)
  const [adsorptionPointAddMode, setAdsorptionPointAddMode] = useRecoilState(adsorptionPointAddModeState)
  const setSettingModalGridOptions = useSetRecoilState(settingModalGridOptionsState)
  const { getMessage } = useMessage()
  const { tempGridMode, setTempGridMode } = useTempGrid()
  const [showColorPickerModal, setShowColorPickerModal] = useState(false)
  const [showDotLineGridModal, setShowDotLineGridModal] = useState(false)
  const { addPopup, closePopup, closePopups } = usePopup()
  const [colorId, setColorId] = useState(uuidv4())
  const [dotLineId, setDotLineId] = useState(uuidv4())

  // const { gridColor, setGridColor, color } = useCanvasSetting()
  const { gridColor, setGridColor, color } = props

  const { initEvent } = useEvent()

  const { SelectOptions, settingsData, setSettingsData, settingsDataSave, setSettingsDataSave } = useCanvasSetting()

  useEffect(() => {
    console.log('GridOption useEffect 실행')
  }, [])

  useEffect(() => {
    setGridColor(color.hex)
  }, [color])

  useEffect(() => {
    gridOptions[3].selected = showColorPickerModal
    setGridOptions([...gridOptions])
  }, [showColorPickerModal])

  useEffect(() => {
    gridOptions[1].selected = showDotLineGridModal
    setGridOptions([...gridOptions])
  }, [showDotLineGridModal])

  useEffect(() => {
    return () => {
      setSettingModalGridOptions((prev) => {
        const newSettingOptions = [...prev]
        newSettingOptions[3].selected = false
        return [...newSettingOptions]
      })
    }
  }, [])

  const onClickOption = (option) => {
    const { id, name, selected } = option

    const newGridOptions = [...gridOptions]

    // 초기화
    // setShowColorPickerModal(false)
    // setShowDotLineGridModal(false)
    setTempGridMode(false)
    setAdsorptionPointAddMode(false)
    closePopups([colorId, dotLineId])

    newGridOptions.forEach((item) => {
      if (item.id === id) {
        item.selected = !item.selected
      } else {
        item.selected = false
      }
    })
    const selectedOption = newGridOptions.find((item) => item.id === option.id)
    if (selectedOption.id === 1) {
      // 임의 그리드 모드
      // setAdsorptionPointAddMode(false)
      setTempGridMode(option.selected)
      // newGridOptions[2].selected = false
    } else if (selectedOption.id === 2) {
      // 점 선 그리드 설정 모달
      setShowDotLineGridModal(selectedOption.selected)

      addPopup(dotLineId, 2, <DotLineGrid {...dotLineGridProps} />, true)
    } else if (selectedOption.id === 3) {
      // 흡착점 모드
      setAdsorptionPointAddMode(selectedOption.selected)
    } else if (selectedOption.id === 4) {
      // 그리드 색 설정 모달
      setShowColorPickerModal(selectedOption.selected)
      addPopup(colorId, 2, <ColorPickerModal {...colorPickerProps} />, true)
    }

    setGridOptions(newGridOptions)
  }

  useEffect(() => {
    //console.log('🚀 ~ useEffect ~ initEvent:')
    initEvent()
  }, [gridOptions])

  useEffect(() => {
    return () => {
      setAdsorptionPointAddMode(false)
      setTempGridMode(false)
      setTimeout(() => {
        initEvent()
      }, 100)
    }
  }, [])

  const dotLineGridProps = {
    id: dotLineId,
    setIsShow: setShowDotLineGridModal,
    isConfig: true,
    pos: {
      x: 845,
      y: 180,
    },
    settingsData,
    setSettingsData,
    settingsDataSave,
    setSettingsDataSave,
  }

  const colorPickerProps = {
    id: colorId,
    name: 'gridOptionColor',
    color: gridColor,
    setColor: setGridColor,
    isShow: showColorPickerModal,
    setIsShow: setShowColorPickerModal,
    isConfig: true,
    pos: {
      x: 785,
      y: 180,
    },
    settingsData,
    setSettingsData,
    settingsDataSave,
    setSettingsDataSave,
  }

  return (
    <>
      <div className="modal-check-btn-wrap">
        <h3 className="check-wrap-title light">{getMessage('modal.canvas.setting.grid')}</h3>
        <div className="flex-check-box for2">
          {gridOptions?.map((option) => (
            <button key={option.id} className={`check-btn ${option.selected ? 'act' : ''}`} onClick={(e) => onClickOption(option)}>
              <span className="check-area"></span>
              <span className="title-area">{getMessage(option.name)}</span>
            </button>
          ))}
        </div>
      </div>
      {/*<ColorPickerModal {...colorPickerProps} />*/}
    </>
  )
}