import { useRecoilState, useRecoilValue } from 'recoil'
import { canvasState } from '@/store/canvasAtom'
import { useEffect } from 'react'
import { settingModalFirstOptionsState } from '@/store/settingAtom'

export function useFirstOption() {
  const canvas = useRecoilValue(canvasState)

  const [settingModalFirstOptions, setSettingModalFirstOptions] = useRecoilState(settingModalFirstOptionsState)

  useEffect(() => {
    const option1 = settingModalFirstOptions.option1

    // 'allocDisplay' 할당 표시
    // 'outlineDisplay' 외벽선 표시  'outerLine', 'wallLine'
    // 'gridDisplay' 그리드 표시     'lindGrid', 'dotGrid'
    // 'lineDisplay' 지붕선 표시     'roof', 'roofBase'
    // 'wordDisplay' 문자 표시
    // 'circuitNumDisplay' 회로번호 표시
    // 'flowDisplay' 흐름방향 표시   'arrow'
    // 'trestleDisplay' 가대 표시
    // 'totalDisplay' 집계표 표시

    let optionName //옵션명
    let optionSelected //옵션상태

    for (let i = 0; i < option1.length; i++) {
      switch (option1[i].column) {
        case 'allocDisplay': //할당 표시
          optionName = ['1']
          break
        case 'outlineDisplay': //외벽선 표시
          optionName = ['outerLine', 'wallLine']
          break
        case 'gridDisplay': //그리드 표시
          optionName = ['lindGrid', 'dotGrid']
          break
        case 'lineDisplay': //지붕선 표시
          optionName = ['roof', 'roofBase']
          break
        case 'wordDisplay': //문자 표시
          optionName = ['6']
          break
        case 'circuitNumDisplay': //회로번호 표시
          optionName = ['7']
          break
        case 'flowDisplay': //흐름방향 표시
          optionName = ['arrow']
          break
        case 'trestleDisplay': //가대 표시
          optionName = ['8']
          break
        case 'totalDisplay': //집계표 표시
          optionName = ['9']
          break
      }
      // 표시 선택 상태(true/false)
      optionSelected = option1[i].selected

      canvas
        .getObjects()
        .filter((obj) => optionName.includes(obj.name))
        //.filter((obj) => obj.name === optionName)
        .forEach((obj) => {
          obj.set({ visible: optionSelected })
          //obj.set({ visible: !obj.visible })
        })

      // console.log(
      //   'optionName',
      //   optionName,
      //   canvas.getObjects().filter((obj) => optionName.includes(obj.name)),
      // )
    }
  }, [settingModalFirstOptions])

  return { settingModalFirstOptions, setSettingModalFirstOptions }
}