import { useRecoilState } from 'recoil'
import { settingModalFirstOptionsState, settingModalSecondOptionsState } from '@/store/settingAtom'
import { useMessage } from '@/hooks/useMessage'
import React, { useCallback, useEffect, useState } from 'react'
import { useAxios } from '@/hooks/useAxios'
import { toastUp } from '@/hooks/useToast'

export default function FirstOption() {
  const [objectNo, setObjectNo] = useState('test123240912001') // 이후 삭제 필요
  const [settingModalFirstOptions, setSettingModalFirstOptions] = useRecoilState(settingModalFirstOptionsState)
  const [settingModalSecondOptions, setSettingModalSecondOptions] = useRecoilState(settingModalSecondOptionsState)
  const { option1, option2 } = settingModalFirstOptions
  const { option3, option4 } = settingModalSecondOptions
  const { getMessage } = useMessage()
  const { get, post } = useAxios()

  // 데이터를 최초 한 번만 조회
  useEffect(() => {
    console.log('FirstOption useEffect 실행')
    fetchSettings()
  }, [objectNo])

  // Canvas Setting 조회 및 초기화
  const fetchSettings = async () => {
    try {
      const res = await get({ url: `/api/canvas-management/canvas-settings/by-object/${objectNo}` })
      const options1 = [
        'assignDisplay',
        'drawDisplay',
        'gridDisplay',
        'charDisplay',
        'flowDisplay',
        'hallwayDimenDisplay',
        'actualDimenDisplay',
        'noDimenDisplay',
        'trestleDisplay',
        'coordiDisplay',
        'drawConverDisplay',
      ]
      const option1 = settingModalFirstOptions.option1.map((item, index) => ({ ...item, selected: res[options1[index]] }))

      const options2 = ['onlyBorder', 'lineHatch', 'allPainted']
      const option2 = settingModalFirstOptions.option2.map((item, index) => ({ ...item, selected: res[options2[index]] }))

      const option3 = settingModalSecondOptions.option1.map((item) => ({ ...item }))

      const options4 = ['adsorpRangeSmall', 'adsorpRangeSmallSemi', 'adsorpRangeMedium', 'adsorpRangeLarge']
      const option4 = settingModalSecondOptions.option2.map((item, index) => ({ ...item, selected: res[options4[index]] }))

      // 데이터 설정
      setSettingModalFirstOptions({
        option1,
        option2,
      })
      setSettingModalSecondOptions({
        option3,
        option4,
      })
    } catch (error) {
      console.error('Data fetching error:', error)
    }
  }

  const onClickOption = async (option) => {
    option.selected = !option.selected

    setSettingModalFirstOptions({ option1, option2 })
    setSettingModalSecondOptions({ option3, option4 })

    try {
      // 서버에 전송할 데이터
      const dataToSend = {
        firstOption1: option1.map((item) => ({
          column: item.column,
          selected: item.selected,
        })),
        firstOption2: option2.map((item) => ({
          column: item.column,
          selected: item.selected,
        })),
        // secondOption1: secondOptions[0].option1.map((item) => ({
        //   name: item.id,
        //   name: item.name,
        //   // 필요한 경우 데이터 항목 추가
        // })),
        secondOption2: option4.map((item) => ({
          column: item.column,
          selected: item.selected,
        })),
      }

      const patternData = {
        objectNo,
        //디스플레이 설정(다중)
        assignDisplay: dataToSend.firstOption1[0].selected,
        drawDisplay: dataToSend.firstOption1[1].selected,
        gridDisplay: dataToSend.firstOption1[2].selected,
        charDisplay: dataToSend.firstOption1[3].selected,
        flowDisplay: dataToSend.firstOption1[4].selected,
        hallwayDimenDisplay: dataToSend.firstOption1[5].selected,
        actualDimenDisplay: dataToSend.firstOption1[6].selected,
        noDimenDisplay: dataToSend.firstOption1[7].selected,
        trestleDisplay: dataToSend.firstOption1[8].selected,
        coordiDisplay: dataToSend.firstOption1[9].selected,
        drawConverDisplay: dataToSend.firstOption1[10].selected,
        //화면 표시(다중)
        onlyBorder: dataToSend.firstOption2[0].selected,
        lineHatch: dataToSend.firstOption2[1].selected,
        allPainted: dataToSend.firstOption2[2].selected,
        //흡착범위 설정(단건)
        adsorpRangeSmall: dataToSend.secondOption2[0].selected,
        adsorpRangeSmallSemi: dataToSend.secondOption2[1].selected,
        adsorpRangeMedium: dataToSend.secondOption2[2].selected,
        adsorpRangeLarge: dataToSend.secondOption2[3].selected,
      }

      // HTTP POST 요청 보내기
      await post({ url: `/api/canvas-management/canvas-settings`, data: patternData }).then((res) => {
        toastUp({ message: res.returnMessage, type: 'success' })
      })
    } catch (error) {
      toastUp({ message: res.returnMessage, type: 'error' })
    }
  }

  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">
          {settingModalFirstOptions &&
            settingModalFirstOptions.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">
          {settingModalFirstOptions &&
            settingModalFirstOptions.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>
    </>
  )
}