import { useEffect, useState } from 'react'
import { useRecoilState, useRecoilValue, useSetRecoilState } from 'recoil'
import { adsorptionPointModeState, adsorptionRangeState, canvasState } from '@/store/canvasAtom'
import { globalLocaleStore } from '@/store/localeAtom'
import { useMessage } from '@/hooks/useMessage'
import { useAxios } from '@/hooks/useAxios'
import { useSwal } from '@/hooks/useSwal'
import { corridorDimensionSelector, settingModalFirstOptionsState, settingModalSecondOptionsState } from '@/store/settingAtom'
import { setSurfaceShapePattern } from '@/util/canvas-util'
import { POLYGON_TYPE } from '@/common/common'

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

  const [settingModalFirstOptions, setSettingModalFirstOptions] = useRecoilState(settingModalFirstOptionsState)
  const [settingModalSecondOptions, setSettingModalSecondOptions] = useRecoilState(settingModalSecondOptionsState)
  const { option1, option2, dimensionDisplay } = settingModalFirstOptions
  const { option3, option4 } = settingModalSecondOptions

  const corridorDimension = useRecoilValue(corridorDimensionSelector)

  const globalLocaleState = useRecoilValue(globalLocaleStore)
  const { get, post } = useAxios(globalLocaleState)
  const { getMessage } = useMessage()
  const { swalFire } = useSwal()

  const [adsorptionPointMode, setAdsorptionPointMode] = useRecoilState(adsorptionPointModeState)
  const setAdsorptionRange = useSetRecoilState(adsorptionRangeState)

  const [objectNo, setObjectNo] = useState('test123240912001') // 이후 삭제 필요

  useEffect(() => {
    if (!canvas) {
      return
    }
    const { column } = corridorDimension
    const lengthTexts = canvas.getObjects().filter((obj) => obj.name === 'lengthText')
    switch (column) {
      case 'corridorDimension':
        lengthTexts.forEach((obj) => {
          if (obj.planeSize) {
            obj.set({ text: obj.planeSize.toString() })
          }
        })
        break
      case 'realDimension':
        lengthTexts.forEach((obj) => {
          if (obj.actualSize) {
            obj.set({ text: obj.actualSize.toString() })
          }
        })
        break
      case 'noneDimension':
        lengthTexts.forEach((obj) => {
          obj.set({ text: '' })
        })
        break
    }
    canvas.renderAll()
  }, [corridorDimension])

  useEffect(() => {
    console.log('useCanvasSetting useEffect 실행1')
    fetchSettings()
  }, [objectNo])

  useEffect(() => {
    console.log('useCanvasSetting useEffect 실행2')
    //fetchSettings()
    //onClickOption()
    //fetchSettings()
  }, [adsorptionPointMode])

  useEffect(() => {
    console.log('useCanvasSetting useEffect 실행3')
    //fetchSettings()
    //onClickOption()
    //fetchSettings()
  }, [settingModalFirstOptions, settingModalSecondOptions])

  const fetchSettings = async () => {
    try {
      const res = await get({ url: `/api/canvas-management/canvas-settings/by-object/${objectNo}` })
      console.log('res', res)
      const optionData1 = settingModalFirstOptions.option1.map((item) => ({ ...item, selected: res[item.column] }))
      const optionData2 = settingModalFirstOptions.option2.map((item) => ({ ...item, selected: res[item.column] }))
      const optionData3 = settingModalSecondOptions.option3.map((item) => ({ ...item }))
      const optionData4 = settingModalSecondOptions.option4.map((item) => ({ ...item, selected: res[item.column] }))
      const optionData5 = settingModalFirstOptions.dimensionDisplay.map((item) => ({ ...item }))

      const patternData = {
        adsorpPoint: res.adsorpPoint,
      }

      // 데이터 설정
      setSettingModalFirstOptions({
        option1: optionData1,
        option2: optionData2,
        dimensionDisplay: optionData5,
      })
      setSettingModalSecondOptions({
        option3: optionData3,
        option4: optionData4,
      })

      setAdsorptionPointMode(patternData.adsorpPoint)

      console.log('adsorptionPointMode', adsorptionPointMode)
    } catch (error) {
      console.error('Data fetching error:', error)
    }
  }

  // 옵션 클릭 후 저장
  const onClickOption = async (item) => {
    //치수 표시(단 건 선택)
    if (item.column === 'corridorDimension' || item.column === 'realDimension' || item.column === 'noneDimension') {
      console.log('치수 표시 ', item)
      const options = settingModalFirstOptions?.dimensionDisplay.map((option) => {
        option.selected = option.id === item.id
        return option
      })

      //화면 표시(단 건 선택)
    } else if (item.column === 'onlyBorder' || item.column === 'lineHatch' || item.column === 'allPainted') {
      console.log('화면 표시 ', item)
      const options2 = settingModalFirstOptions?.option2.map((option2) => {
        option2.selected = option2.id === item.id
        return option2
      })

      const polygons = canvas?.getObjects().filter((obj) => obj.name === POLYGON_TYPE.ROOF)

      polygons.forEach((polygon) => {
        setSurfaceShapePattern(polygon, item.column)
      })

      //흡착범위 설정(단 건 선택)
    } else if (
      item.column === 'adsorpRangeSmall' ||
      item.column === 'adsorpRangeSmallSemi' ||
      item.column === 'adsorpRangeMedium' ||
      item.column === 'adsorpRangeLarge'
    ) {
      console.log('화면 표시2 ', item, option4)
      // option4에서 한 개만 선택 가능하도록 처리
      const updatedOption4 = option4.map((option) =>
        option.id === item.id
          ? { ...option, selected: true }
          : {
              ...option,
              selected: false,
            },
      )

      setSettingModalSecondOptions({ option3, option4: updatedOption4 })

      //흡착점 ON / OFF
    } else if (item === 'adsorpPoint') {
      console.log('흡착점 ON / OFF ', item)
      const options2 = settingModalFirstOptions?.option2.map((option2) => {
        option2.selected = option2.id === item.id
        return option2
      })

      const polygons = canvas?.getObjects().filter((obj) => obj.name === POLYGON_TYPE.ROOF)

      polygons.forEach((polygon) => {
        setSurfaceShapePattern(polygon, item.column)
      })

      //디스플레이 설정(다 건 선택)
    } else {
      //console.log('디스플레이 설정1 ', item.column)
      console.log('디스플레이 설정 ', item)
      item.selected = !item.selected
    }

    setSettingModalFirstOptions({ option1, option2, dimensionDisplay })

    try {
      // 서버에 전송할 데이터
      const dataToSend = {
        firstOption1: option1.map((item) => ({
          column: item.column,
          selected: item.selected,
        })),
        firstOption2: option2.map((item) => ({
          column: item.column,
          selected: item.selected,
        })),
        firstOption3: dimensionDisplay.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,
        //디스플레이 설정(다중)
        allocDisplay: dataToSend.firstOption1[0].selected,
        outlineDisplay: dataToSend.firstOption1[1].selected,
        gridDisplay: dataToSend.firstOption1[2].selected,
        lineDisplay: dataToSend.firstOption1[3].selected,
        wordDisplay: dataToSend.firstOption1[4].selected,
        circuitNumDisplay: dataToSend.firstOption1[5].selected,
        flowDisplay: dataToSend.firstOption1[6].selected,
        trestleDisplay: dataToSend.firstOption1[7].selected,
        imageDisplay: dataToSend.firstOption1[8].selected,
        totalDisplay: dataToSend.firstOption1[9].selected,
        //차수 표시(단 건)
        corridorDimension: dataToSend.firstOption3[0].selected,
        realDimension: dataToSend.firstOption3[1].selected,
        noneDimension: dataToSend.firstOption3[2].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,
        //흡착점 ON/OFF
        adsorpPoint: adsorptionPointMode,
      }

      console.log('patternData ', patternData)

      // HTTP POST 요청 보내기
      await post({ url: `/api/canvas-management/canvas-settings`, data: patternData }).then((res) => {
        swalFire({ text: getMessage(res.returnMessage) })

        // Canvas 디스플레이 설정 시 해당 옵션 적용
        frontSettings()
      })
    } catch (error) {
      swalFire({ text: getMessage(res.returnMessage), icon: 'error' })
    }

    setAdsorptionRange(item.range)
  }

  // Canvas 디스플레이 설정 시 해당 옵션 적용
  const frontSettings = async () => {
    const option1 = settingModalFirstOptions.option1

    // 'allocDisplay' 할당 표시
    // 'outlineDisplay' 외벽선 표시  'outerLine', POLYGON_TYPE.WALL
    // 'gridDisplay' 그리드 표시     'lindGrid', 'dotGrid'
    // 'lineDisplay' 지붕선 표시     'roof', POLYGON_TYPE.ROOF
    // 'wordDisplay' 문자 표시
    // 'circuitNumDisplay' 회로번호 표시
    // 'flowDisplay' 흐름방향 표시   'arrow'
    // 'trestleDisplay' 가대 표시
    // 'imageDisplay' 이미지 표시
    // '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', POLYGON_TYPE.WALL]
          break
        case 'gridDisplay': //그리드 표시
          optionName = ['lindGrid', 'dotGrid', 'tempGrid']
          break
        case 'lineDisplay': //지붕선 표시
          optionName = ['roof', POLYGON_TYPE.ROOF]
          break
        case 'wordDisplay': //문자 표시
          optionName = ['commonText']
          break
        case 'circuitNumDisplay': //회로번호 표시
          optionName = ['7']
          break
        case 'flowDisplay': //흐름방향 표시
          optionName = ['arrow', 'flowText']
          break
        case 'trestleDisplay': //가대 표시
          optionName = ['8']
          break
        case 'imageDisplay': //이미지 표시
          optionName = ['9']
          break
        case 'totalDisplay': //집계표 표시
          optionName = ['10']
          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 })
        })

      canvas.renderAll()

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

  return {
    settingModalFirstOptions,
    setSettingModalFirstOptions,
    settingModalSecondOptions,
    setSettingModalSecondOptions,
    adsorptionPointMode,
    setAdsorptionPointMode,
    fetchSettings,
    onClickOption,
    frontSettings,
  }
}