'use client'

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

import { useAxios } from '@/hooks/useAxios'

import { useRecoilState } from 'recoil'
import { customSettingsState } from '@/store/canvasAtom'
import { modalContent, modalState } from '@/store/modalAtom'

import ColorPicker from './common/color-picker/ColorPicker'

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

  const [color, setColor] = useState('#ff0000')

  const [open, setOpen] = useRecoilState(modalState)
  const [contents, setContent] = useRecoilState(modalContent)

  const { get, post } = useAxios()

  const handleSavePopup = () => {
    console.log('color ', color)
  }

  const handleClosePopup = () => {
    setContent('')
    setOpen(false)
    console.log('colorSetting ', color)
  }

  const colorSetting = (
    <>
      <br />
      <h1>React ColorPicker</h1>
      <ColorPicker color={color} setColor={setColor} />
      <div className="p-4">{color}</div>
      <div>
        <button onClick={handleSavePopup}>저장</button> <p />
        <button onClick={handleClosePopup}>취소</button>
      </div>
    </>
  )

  const customStyles = {
    overlay: {
      backgroundColor: 'rgba(0,0,0,0.5)',
    },
    content: {
      width: '300px',
      height: '400px',
      margin: 'auto',
      borderRadius: '4px',
      boxShadow: '0 2px 4px rgba(0,0,0,0.2)',
      padding: '20px',
    },
  }

  // 상태를 하나의 객체로 관리
  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) => {
    // '실선 그리드' 클릭 시 팝업 열기
    if (type === 'gridSettings' && gridItems.gridSettings[index] === '실선 그리드') {
      //openGridPopup()
    }

    // '그리드 색 설정' 클릭 시 팝업 열기
    if (type === 'gridSettings' && gridItems.gridSettings[index] === '그리드 색 설정') {
      //setSelectedGridSetting(gridItems.gridSettings[index])
      //setIsPopupOpen(true)
      //return prevSettings // 설정은 변경하지 않음

      setOpen(true)
      setContent({ ...colorSetting })
    }

    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 }
    })
  }

  // '실선 그리드' 클릭 시 팝업을 열기 위한 함수
  const openGridPopup = () => {
    const popupWidth = 500
    const popupHeight = 300

    // 팝업 창 위치를 화면 중앙으로 조정하기 위해 계산
    const left = window.innerWidth / 2 - popupWidth / 2
    const top = window.innerHeight / 2 - popupHeight / 2

    // 새 창 열기
    window
      .open
      //'./components/intro', // 팝업으로 띄울 페이지의 URL
      //'_blank', // 새 창으로 열기
      //`width=${popupWidth},height=${popupHeight},top=${top},left=${left}`, // 크기와 위치 지정
      ()
  }

  // 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>
            <ColorPicker color={color} setColor={setColor} />
            <div className="p-4">{color}</div>
          </div>
          <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>
    </>
  )
}