import clsx from 'clsx';
import { useNewNavigate } from '@/modules';
const serverList = ['container', 'map'];
const serverPath = [
  {
    path: 'container',
    links: ['edit/list', 'preview/:id', 'edit/:id'],
  },
  {
    path: 'app',
    links: ['edit/list', ':app/version/list'],
  },
  {
    path: 'file',
    links: ['edit/list'],
  },
  {
    path: 'map',
    links: ['/'],
  },
  {
    path: 'org',
    links: ['edit/list'],
  },
];
const ServerPath = () => {
  const navigate = useNewNavigate();
  return (
    <div className='p-2 w-full h-full bg-gray-200'>
      <h1 className='p-4 w-1/2 m-auto h1'>Site Map</h1>
      <div className='w-1/2 m-auto bg-white p-4 border rounded-md shadow-md min-w-[700px] max-h-[80vh] overflow-auto scrollbar'>
        <div className='flex flex-col w-full'>
          {serverPath.map((item) => {
            const links = item.links.map((link) => {
              const hasId = link.includes(':');
              const _path = link === '/' ? item.path : item.path + '/' + link;
              return (
                <div
                  key={link}
                  className={clsx('flex flex-col', !hasId && 'cursor-pointer')}
                  onClick={() => {
                    if (hasId) {
                      return;
                    }
                    console.log('link', link);
                    if (link === '/') {
                      navigate(`/${item.path}`);
                      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>
    </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>
  );
};