'use client'

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

import { get, post } from '@/lib/Axios';

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

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

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

  // 클릭 시 상태 변경 함수
  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] === 'N' ? 'Y' : 'N';
      return { ...prevSettings, [type]: updated };
    });
  };

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

      // 데이터가 없는 경우
      if (!res || res.length === 0) {

        console.warn('조회 결과가 없습니다.');
        // 기본값을 설정하거나 사용자에게 알림 표시
        setSettings({
          display1: Array(11).fill('N'), // 화면 표시1 기본값
          display2: Array(3).fill('N'),  // 화면 표시2 기본값
          rangeSetting: 0,               // 흡착 범위 설정 기본값
          gridSettings: []               // 그리드 설정 초기화
        });

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

      const data = res.map((item) => ({
        display1: [
          item.assignDisplay, item.drawDisplay, item.gridDisplay, item.charDisplay, item.flowDisplay,
          item.hallwayDimenDisplay, item.actualDimenDisplay, item.noDimenDisplay, item.trestleDisplay,
          item.coordiDisplay, item.drawConverDisplay
        ],
        display2: [item.onlyBorder, item.lineHatch, item.allPainted],
        rangeSetting: Number(item.adsorpRangeSetting)
      }));
      
      setSettings({
        display1: data[0].display1,
        display2: data[0].display2,
        rangeSetting: data[0].rangeSetting,
        gridSettings: [] // 초기화
      });
    } catch (error) {
      console.error('Data fetching error:', error);
    }
  };

  // Canvas Setting 저장
  const handleSubmit = async (e) => {
    e.preventDefault();

    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: String(settings.rangeSetting)
    };

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

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

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

  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] === 'Y' ? '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] === 'Y' ? 'selected' : 'unselected'}`}
                onClick={() => handleToggle('display2', index)}
              >
                {settings.display2[index]} {item}
              </div>
            ))}
          </div>
          <h1>[글꼴/도면크기 설정]</h1>
          <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)}
              >
                {settings.rangeSetting === index ? 'Y' : 'N'} {item}
              </div>
            ))}
          </div>
          <h1>[그리드 설정]</h1>
          <div className="grid-container2 border">
            {gridItems.gridSettings.map((item, index) => (
              <div
                key={index}
                className={`grid-item ${settings.gridSettings.includes(index) ? 'selected' : 'unselected'}`}
                onClick={() => handleToggle('gridSettings', index)}
              >
                {settings.gridSettings.includes(index) ? 'Y' : 'N'} {item}
              </div>
            ))}
          </div>
        </div>
      </div>
    </>
  );
}