import clsx from 'clsx';
import { useNavigate } from 'react-router-dom';
const serverList = ['container', 'panel', 'publish', 'code-editor', 'map', 'ai-chat'];
const serverPath = [
  {
    path: 'container',
    links: ['edit/list', 'preview/:id', 'edit/:id'],
  },
  {
    path: 'panel',
    links: ['edit/list', 'flow/:id', 'deck/:id'],
  },
  {
    path: 'publish',
    links: ['edit/list'],
  },
  {
    path: 'map',
    links: ['/'],
  },
  {
    path: 'ai-chat',
    links: ['/'],
  },
];
const ServerPath = () => {
  const navigate = useNavigate();
  return (
    <div className='p-2 w-full h-full bg-gray-200'>
      <h1 className='p-4 w-1/2 m-auto h1'>Map</h1>
      <div className='flex flex-col w-1/2 m-auto bg-white p-4 border rounded-md shadow-md'>
        {serverPath.map((item) => {
          const links = item.links.map((link) => {
            const hasId = link.includes(':id');
            const _path = link === '/' ? item.path : item.path + '/' + link;
            return (
              <div
                key={link}
                className={clsx('flex flex-col', !hasId && 'cursor-pointer')}
                onClick={() => {
                  if (hasId) {
                    return;
                  }
                  if (link) {
                    navigate(`/${item.path}/${link}`);
                  } else {
                    navigate(`/${item.path}`);
                  }
                }}>
                <div className={clsx('border rounded-md p-2 m-2', hasId && 'bg-gray-200')}>{_path}</div>
              </div>
            );
          });
          return (
            <div key={item.path} className='flex'>
              {links}
            </div>
          );
        })}
      </div>
    </div>
  );
};
export const App = ServerPath;
export const ServerList = () => {
  return (
    <div className='p-2 w-full h-full bg-gray-200'>
      <div className='flex flex-col w-1/2 m-auto bg-white p-4 border rounded-md shadow-md'>
        {serverList.map((item) => {
          return (
            <div key={item} className='flex flex-col'>
              <div>{item}</div>
            </div>
          );
        })}
      </div>
    </div>
  );
};