import { useRecoilState } from 'recoil'
import { settingModalFirstOptionsState } from '@/store/settingAtom'
import { useMessage } from '@/hooks/useMessage'
import React, { useEffect, useState } from 'react'
import { get } from '@/lib/Axios'

export default function FirstOption() {
  const [objectNo, setObjectNo] = useState('test123240912001')
  const [settingsModalOptions, setSettingModalOptions] = useRecoilState(settingModalFirstOptionsState)
  const { option1, option2 } = settingsModalOptions
  const { getMessage } = useMessage()
  const onClickOption = (option) => {
    option.selected = !option.selected

    setSettingModalOptions({ option1, option2 })
  }

  // 초기 조회
  useEffect(() => {
    // Canvas Setting 조회 및 초기화
    const fetchSettings = async () => {
      try {
        const res = await get({ url: `/api/canvas-management/canvas-settings/by-object/${objectNo}` })

        // console.log(res)

        const data = {
          option1: [
            { id: 1, column: 'assignDisplay', name: 'modal.canvas.setting.first.option.alloc', selected: res.assignDisplay },
            { id: 2, column: 'drawDisplay', name: 'modal.canvas.setting.first.option.outline', selected: res.drawDisplay },
            { id: 3, column: 'gridDisplay', name: 'modal.canvas.setting.first.option.plan', selected: res.gridDisplay },
            { id: 4, column: 'charDisplay', name: 'modal.canvas.setting.first.option.roof.line', selected: res.charDisplay },
            { id: 5, column: 'flowDisplay', name: 'modal.canvas.setting.first.option.grid', selected: res.flowDisplay },
            { id: 6, column: 'hallwayDimenDisplay', name: 'modal.canvas.setting.first.option.circuit.num', selected: res.hallwayDimenDisplay },
            { id: 7, column: 'actualDimenDisplay', name: 'modal.canvas.setting.first.option.word', selected: res.actualDimenDisplay },
            { id: 8, column: 'noDimenDisplay', name: 'modal.canvas.setting.first.option.trestle', selected: res.noDimenDisplay },
            { id: 9, column: 'trestleDisplay', name: 'modal.canvas.setting.first.option.flow', selected: res.trestleDisplay },
            { id: 10, column: 'coordiDisplay', name: 'modal.canvas.setting.first.option.total', selected: res.coordiDisplay },
            { id: 11, column: 'drawConverDisplay', name: 'modal.canvas.setting.first.option.corridor.dimension', selected: res.drawConverDisplay },
          ],
          option2: [
            { id: 1, column: 'onlyBorder', name: 'modal.canvas.setting.first.option.border', selected: res.onlyBorder },
            { id: 2, column: 'lineHatch', name: 'modal.canvas.setting.first.option.line', selected: res.lineHatch },
            { id: 3, column: 'allPainted', name: 'modal.canvas.setting.first.option.all', selected: res.allPainted },
          ],

          //rangeSetting: res.adsorpRangeSetting,
          //gridSettings: [res.randomGrid, res.solidGrid, res.dotGrid, res.gridColorSet, res.adsorpPointAdd],
        }

        // 데이터 설정
        setSettingModalOptions({
          option1: data.option1,
          option2: data.option2,
          // rangeSetting: data.rangeSetting,
          // gridSettings: data.gridSettings,
        })
      } catch (error) {
        console.error('Data fetching error:', error)
      }
    }

    fetchSettings()
  }, [])

  return (
    <>
      <div className="modal-check-btn-wrap">
        <h3 className="check-wrap-title light">{getMessage('modal.canvas.setting.first.option.info')}</h3>
        <div className="flex-check-box for2">
          {settingsModalOptions?.option1?.map((item) => (
            <button key={item.id} className={`check-btn ${item.selected ? 'act' : ''}`} onClick={(e) => onClickOption(item)}>
              <span className="check-area"></span>
              <span className="title-area">{getMessage(item.name)}</span>
            </button>
          ))}
        </div>
      </div>
      <div className="modal-check-btn-wrap">
        <h3 className="check-wrap-title">{getMessage('modal.canvas.setting.first.option.display')}</h3>
        <div className="flex-check-box for-line">
          {settingsModalOptions?.option2?.map((item) => (
            <button key={item.id} className={`check-btn ${item.selected ? 'act' : ''}`} onClick={(e) => onClickOption(item)}>
              <span className="check-area"></span>
              <span className="title-area">{getMessage(item.name)}</span>
            </button>
          ))}
        </div>
      </div>
    </>
  )
}