import clsx from 'clsx';
import { useNewNavigate } from '@/modules';
import { useTranslation } from 'react-i18next';
import { useLayoutStore } from '@/modules/layout/store';
import { useShallow } from 'zustand/shallow';
import { useMemo } from 'react';

const ServerPath = () => {
  const navigate = useNewNavigate();
  const { t } = useTranslation();
  const layoutStore = useLayoutStore(
    useShallow((state) => {
      return {
        isAdmin: state.isAdmin,
        checkHasOrg: state.checkHasOrg,
      };
    }),
  );
  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'],
    },
  ];
  return (
    <div className='p-2 w-full h-full bg-gray-200 '>
      <h1 className='py-4 w-1/2 m-auto h1 text-primary'>{t('Site Map')}</h1>
      <div className='w-1/2 m-auto bg-white p-4 border border-gray-200 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;
                    }
                    if (link === '/') {
                      navigate(`/${item.path}`);
                      return;
                    }
                    if (link) {
                      navigate(`/${item.path}/${link}`);
                    } else {
                      navigate(`/${item.path}`);
                    }
                  }}>
                  <div className={clsx('border border-gray-200 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;