/* eslint-disable react-hooks/exhaustive-deps */
import React, { useEffect, useState } from 'react';
import { Layout } from 'antd';
import Sider from 'antd/es/layout/Sider';
import SiderMenu from '../components/SiderMenu';
import { Route, Routes, useLocation, useNavigate } from 'react-router-dom';
import ProcessDiagramPage from './ProcessDiagramPage';
import RunningProcessesPage from './RunningProcessesPage';
import AccountsPage from './AccountsPage';
import EventsListPage from './EventsListPage';
import ConfigurationPage from './ConfigurationPage';

export default function MainLayout() {
  const navigate = useNavigate();
  const location = useLocation();
  const [collapsed, setCollapsed] = useState(false);
  const [selectedKey, setSelectedKey] = useState('1');

  const [width, setWidth] = useState<number | string>('15%');
  const [collapsedWidth, setCollapsedWidth] = useState(50);

  const calculateWidths = () => {
    const windowWidth = window.innerWidth;
    const expanded = Math.min(Math.max(windowWidth * 0.15, 180), 240);
    const collapsed = Math.max(windowWidth * 0.038, 50);
    setWidth(expanded);
    setCollapsedWidth(collapsed);
  };

  useEffect(() => {
    calculateWidths();
    window.addEventListener('resize', calculateWidths);
    return () => window.removeEventListener('resize', calculateWidths);
  }, []);

  useEffect(() => {
    if (location.pathname === '/') {
      navigate('/process-diagram');
    }
    setSelectedKey(location.pathname);
  }, [location.pathname]);

  function hangleMenuClick(e: any) {
    const key = e.key;
    if (key === 'toggle') {
      setCollapsed(!collapsed);
      return;
    }
    if (key === 'divider') {
      return;
    }

    setSelectedKey(key);
    navigate(key);
  }

  return (
    <Layout style={{ minHeight: '100vh' }}>
      <Sider
        className="sider"
        collapsible
        collapsed={collapsed}
        onCollapse={(value) => setCollapsed(value)}
        theme="light"
        width={width}
        collapsedWidth={collapsedWidth}
        trigger={null}
      >
        <SiderMenu
          collapsed={collapsed}
          selectedKey={selectedKey}
          hangleMenuClick={hangleMenuClick}
        />
      </Sider>
      <Layout>
        <Routes>
          <Route path="/process-diagram" element={<ProcessDiagramPage />} />
          <Route path="/running-processes" element={<RunningProcessesPage />} />
          <Route path="/accounts" element={<AccountsPage />} />
          <Route path="/events-list" element={<EventsListPage />} />
          <Route path="/configuration" element={<ConfigurationPage />} />
          <Route path="*" element={<div>404 Not Found</div>} />
        </Routes>
      </Layout>
    </Layout>
  );
}