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 { gridColorState } from '@/store/gridAtom'
import { useColor } from 'react-color-palette'
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'

export default function GridOption() {
  const [gridOptions, setGridOptions] = useRecoilState(settingModalGridOptionsState)
  const [adsorptionPointAddMode, setAdsorptionPointAddMode] = useRecoilState(adsorptionPointAddModeState)
  const setSettingModalGridOptions = useSetRecoilState(settingModalGridOptionsState)
  const { getMessage } = useMessage()
  const { tempGridMode, setTempGridMode } = useTempGrid()
  const [gridColor, setGridColor] = useRecoilState(gridColorState)
  const [color, setColor] = useColor(gridColor)
  const [showColorPickerModal, setShowColorPickerModal] = useState(false)
  const [showDotLineGridModal, setShowDotLineGridModal] = useState(false)
  const { addPopup, closePopup } = usePopup()
  let [colorId, dotLineId] = ''

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

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

  useEffect(() => {
    colorId = uuidv4()
    dotLineId = uuidv4()
    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)
    closePopup(dotLineId)
    closePopup(colorId)
    //

    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) {
      // 임의 그리드 모드
      setTempGridMode(selectedOption.selected)
    } else if (selectedOption.id === 2) {
      // 점 선 그리드 설정 모달
      setShowDotLineGridModal(selectedOption.selected)
      addPopup(dotLineId, 2, <DotLineGrid setShowDotLineGridModal={setShowDotLineGridModal} id={dotLineId} />)
    } else if (selectedOption.id === 3) {
      // 흡착점 모드
      setAdsorptionPointAddMode(selectedOption.selected)
    } else if (selectedOption.id === 4) {
      // 그리드 색 설정 모달
      setShowColorPickerModal(selectedOption.selected)
      addPopup(colorId, 2, <ColorPickerModal {...colorPickerProps} id={colorId} />)
    }

    setGridOptions(newGridOptions)
  }

  const colorPickerProps = {
    color: gridColor,
    setColor: setGridColor,
    isShow: showColorPickerModal,
    setIsShow: setShowColorPickerModal,
  }

  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} />*/}
    </>
  )
}