'use client'

import React, { useEffect, useState } from 'react'
import { Button } from '@nextui-org/react'

import { get, post } from '@/lib/Axios'
import { useRecoilState } from 'recoil'
import { customSettingsState } from '@/store/canvasAtom'

export default function Settings() {
  const [objectNo, setObjectNo] = useState('test123240829010')
  const [error, setError] = useState(null)
  const [customSettings, setCustomSettings] = useRecoilState(customSettingsState)

  // 상태를 하나의 객체로 관리
  const [settings, setSettings] = useState({
    display1: Array(11).fill(false), // 화면 표시1
    display2: Array(3).fill(false), // 화면 표시2
    rangeSetting: 0, // 흡착 범위 설정
    gridSettings: Array(5).fill(false), // 그리드 설정
  })

  const gridItems = {
    display1: [
      '할당 표시',
      '도면 표시',
      '그리드 표시',
      '문자 표시',
      '흐름방향 표시',
      '복도치수 표시',
      '실제치수 표시',
      '치수 표시 없음',
      '가대 표시',
      '좌표 표시',
      '도면전환 표시',
    ],
    display2: ['테두리만', '라인해치', 'All Painted'],
    rangeSetting: ['극소', '소', '중', '대'],
    gridSettings: ['임의 그리드', '실선 그리드', '점 그리드', '그리드 색 설정', '흡착점 추가'],
  }

  // 초기 조회
  useEffect(() => {
    if (!objectNo) {
      alert('object_no를 입력하세요.')
    }
  }, [])

  // 클릭 시 상태 변경 함수
  const handleToggle = (type, index) => {
    setSettings((prevSettings) => {
      // prevSettings[type]이 배열인지 확인하고, 그렇지 않은 경우 빈 배열로 초기화
      let updated = Array.isArray(prevSettings[type]) ? [...prevSettings[type]] : []

      if (type === 'rangeSetting') {
        return { ...prevSettings, [type]: index }
      }

      updated[index] = updated[index] === false ? true : false
      return { ...prevSettings, [type]: updated }
    })
  }

  // Canvas Setting 조회 및 초기화
  const handleSelect = async () => {
    try {
      if (!objectNo) {
        alert('object_no를 입력하세요.')
        return
      }

      const res = await get({ url: `/api/canvas-management/canvas-settings/by-object/${objectNo}` })

      // 데이터가 없는 경우
      if (!res) {
        console.warn('조회 결과가 없습니다.')
        // 기본값을 설정하거나 사용자에게 알림 표시
        setSettings({
          display1: Array(11).fill(false), // 화면 표시1 기본값
          display2: Array(3).fill(false), // 화면 표시2 기본값
          rangeSetting: 0, // 흡착 범위 설정 기본값
          gridSettings: Array(5).fill(false), // 그리드 설정 기본값
        })

        alert('조회된 데이터가 없습니다. 기본 설정이 적용됩니다.')
        return // 이후 코드 실행을 중단
      }

      const data = {
        display1: [
          res.assignDisplay,
          res.drawDisplay,
          res.gridDisplay,
          res.charDisplay,
          res.flowDisplay,
          res.hallwayDimenDisplay,
          res.actualDimenDisplay,
          res.noDimenDisplay,
          res.trestleDisplay,
          res.coordiDisplay,
          res.drawConverDisplay,
        ],
        display2: [res.onlyBorder, res.lineHatch, res.allPainted],
        rangeSetting: res.adsorpRangeSetting,
        gridSettings: [res.randomGrid, res.solidGrid, res.dotGrid, res.gridColorSet, res.adsorpPointAdd],
      }

      // 데이터 설정
      setSettings({
        display1: data.display1,
        display2: data.display2,
        rangeSetting: data.rangeSetting,
        gridSettings: data.gridSettings,
      })
    } catch (error) {
      console.error('Data fetching error:', error)
    }
  }

  // Canvas Setting 저장
  const handleSubmit = async () => {
    if (!objectNo) {
      alert('object_no를 입력하세요.')
      return
    }

    const patternData = {
      objectNo,
      assignDisplay: settings.display1[0],
      drawDisplay: settings.display1[1],
      gridDisplay: settings.display1[2],
      charDisplay: settings.display1[3],
      flowDisplay: settings.display1[4],
      hallwayDimenDisplay: settings.display1[5],
      actualDimenDisplay: settings.display1[6],
      noDimenDisplay: settings.display1[7],
      trestleDisplay: settings.display1[8],
      coordiDisplay: settings.display1[9],
      drawConverDisplay: settings.display1[10],
      onlyBorder: settings.display2[0],
      lineHatch: settings.display2[1],
      allPainted: settings.display2[2],
      adsorpRangeSetting: settings.rangeSetting,
      randomGrid: settings.gridSettings[0],
      solidGrid: settings.gridSettings[1],
      dotGrid: settings.gridSettings[2],
      gridColorSet: settings.gridSettings[3],
      adsorpPointAdd: settings.gridSettings[4],
    }

    console.log('patternData', patternData)

    await post({ url: `/api/canvas-management/canvas-settings`, data: patternData })

    //Recoil 설정
    setCustomSettings({ ...patternData })

    // 저장 후 재조회
    await handleSelect()
  }

  return (
    <>
      <div className="container mx-auto p-4 m-4 border">
        <div align="right">
          <input type="text" placeholder="Object No 입력" value={objectNo} onChange={(e) => setObjectNo(e.target.value)} />
          <Button onClick={handleSelect}>조회</Button>
          <Button onClick={handleSubmit}>저장</Button>
        </div>
        <div className="container mx-auto p-4 m-4 border">
          <h1>[디스플레이 설정]</h1>
          <h1>* 도면에 표시할 항목을 클릭하면 적용 됩니다.</h1>
          <div className="grid-container2">
            {gridItems.display1.map((item, index) => (
              <div
                key={index}
                className={`grid-item ${settings.display1[index] === true ? 'selected' : 'unselected'}`}
                onClick={() => handleToggle('display1', index)}
              >
                {settings.display1[index]} {item}
              </div>
            ))}
          </div>
          <br />
          <h1>* 화면 표시</h1>
          <div className="grid-container3">
            {gridItems.display2.map((item, index) => (
              <div
                key={index}
                className={`grid-item ${settings.display2[index] === true ? 'selected' : 'unselected'}`}
                onClick={() => handleToggle('display2', index)}
              >
                {settings.display2[index]} {item}
              </div>
            ))}
          </div>
          <h1>[글꼴/도면크기 설정]</h1>
          <h1>* 글꼴 및 크기 변경</h1>
          <div className="grid-container2">
            <div className="grid-item">문자 글꼴 변경</div>
            <div className="grid-item">흐름방향 글꼴 변경</div>
            <div className="grid-item">치수 글꼴 변경</div>
            <div className="grid-item">회로번호 글꼴 변경</div>
          </div>
          ``
          <h1>* 흡착 범위 설정</h1>
          <div className="grid-container4">
            {gridItems.rangeSetting.map((item, index) => (
              <div
                key={index}
                className={`grid-item ${settings.rangeSetting === index ? 'selected' : 'unselected'}`}
                onClick={() => handleToggle('rangeSetting', index)}
              >
                {item}
              </div>
            ))}
          </div>
          <div className="grid-container3">
            <div className="grid-item">치수선 설정</div>
            <div className="grid-item">도면 크기 설정</div>
            <div className="grid-item">흡착점 ON</div>
          </div>
          <h1>[그리드 설정]</h1>
          <div className="grid-container2">
            {gridItems.gridSettings.map((item, index) => (
              <div
                key={index}
                className={`grid-item ${settings.gridSettings[index] === true ? 'selected' : 'unselected'}`}
                onClick={() => handleToggle('gridSettings', index)}
              >
                {settings.gridSettings[index]} {item}
              </div>
            ))}
          </div>
        </div>
      </div>
    </>
  )
}