import { useState } from 'react';
import { useNavigate, useLocation } from 'react-router-dom';
import SideNav, { keyToPath, pathToKey } from './SideNav';

// 퍼블리시 패널 컴포넌트 재사용
import Panel1Component from '../../publish/pages/Panel1Component';
import Panel2Component from '../../publish/pages/Panel2Component';
import Panel3Component from '../../publish/pages/Panel3Component';
import Panel4Component from '../../publish/pages/Panel4Component';
import Panel5Component from '../../publish/pages/Panel5Component';
import Panel6Component from '../../publish/pages/Panel6Component';
import Panel7Component from '../../publish/pages/Panel7Component';
import Panel8Component from '../../publish/pages/Panel8Component';
// DisplayComponent는 스토어 연결된 버전 사용
import DisplayComponent from '../../component/wrap/side/DisplayComponent';

/**
 * 사이드바 컴포넌트
 * - 네비게이션 메뉴
 * - 패널 영역 (경로에 따라 다른 패널 표시)
 */
export default function Sidebar() {
  const navigate = useNavigate();
  const location = useLocation();
  const [isPanelOpen, setIsPanelOpen] = useState(true);

  // URL에서 활성 메뉴 키 추출
  const getActiveKey = () => {
    const path = location.pathname.split('/')[1] || 'ship';
    return pathToKey[path] || 'gnb1';
  };

  const activeKey = getActiveKey();

  const handleMenuChange = (key) => {
    setIsPanelOpen(true);
    const path = keyToPath[key] || 'ship';
    navigate(`/${path}`);
  };

  const handleTogglePanel = () => {
    setIsPanelOpen((prev) => !prev);
  };

  // 패널 공통 props
  const panelProps = {
    isOpen: isPanelOpen,
    onToggle: handleTogglePanel,
  };

  // 활성 키에 따른 패널 컴포넌트 렌더링
  const renderPanel = () => {
    switch (activeKey) {
      case 'gnb1':
        return <Panel1Component {...panelProps} />;
      case 'gnb2':
        return <Panel2Component {...panelProps} />;
      case 'gnb3':
        return <Panel3Component {...panelProps} />;
      case 'gnb4':
        return <Panel4Component {...panelProps} />;
      case 'gnb5':
        return <Panel5Component {...panelProps} />;
      case 'gnb6':
        return <Panel6Component {...panelProps} />;
      case 'gnb7':
        return <Panel7Component {...panelProps} />;
      case 'gnb8':
        return <Panel8Component {...panelProps} />;
      case 'filter':
      case 'layer':
        return <DisplayComponent {...panelProps} />;
      default:
        return <Panel1Component {...panelProps} />;
    }
  };

  return (
    <section id="sidePanel">
      <SideNav activeKey={activeKey} onChange={handleMenuChange} />
      <div className="sidePanelContent">
        {renderPanel()}
      </div>
    </section>
  );
}