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()
  // const [colorId, setColorId] = useState(uuidv4())
  // const [dotLineId, setDotLineId] = useState(uuidv4())

  let colorId = null
  let dotLineId = null

  useEffect(() => {
    colorId = uuidv4()
    dotLineId = uuidv4()
  }, [])

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

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

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

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

  const onClickOption = (option) => {
    const newGridOptions = [...gridOptions]
    console.log(colorId, dotLineId)
    newGridOptions.map((item) => {
      if (item.id === option.id) {
        item.selected = !item.selected
      }
    })

    if (option.id === 1) {
      // 점 그리드
      setAdsorptionPointAddMode(false)
      setTempGridMode(option.selected)
      newGridOptions[2].selected = false
    }

    if (option.id === 2) {
      // 점.선 그리드
      if (option.selected) {
        addPopup(dotLineId, 2, <DotLineGrid {...dotListGridProps} />)
      } else {
        closePopup(dotLineId)
      }
    }

    if (option.name === 'modal.canvas.setting.grid.absorption.add') {
      setAdsorptionPointAddMode(!adsorptionPointAddMode)
      setTempGridMode(false)
      newGridOptions[0].selected = false
    }

    if (option.id === 4) {
      // 그리드 색 설정
      if (option.selected) {
        setShowColorPickerModal(true)
        addPopup(colorId, 2, <ColorPickerModal {...colorPickerProps} />)
      } else {
        setShowColorPickerModal(false)
        closePopup(colorId)
      }
    }

    setGridOptions(newGridOptions)
  }

  const dotListGridProps = {
    id: dotLineId,
    setIsShow: setShowDotLineGridModal,
    pos: {
      x: 845,
      y: 180,
    },
  }

  const colorPickerProps = {
    id: colorId,
    color: gridColor,
    setColor: setGridColor,
    isShow: showColorPickerModal,
    setIsShow: setShowColorPickerModal,
    pos: {
      x: 785,
      y: 180,
    },
  }

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