import { Media } from '@/styles/media';
import { min } from '@/styles/mq';
import type { MenuProps } from 'antd';
import Link from 'next/link';
import { useRouter } from 'next/router';
import type { PropsWithChildren } from 'react';
import styled from 'styled-components';
import { Menu } from 'ui/elements';
import { AppstoreOutlined, SettingOutlined } from 'ui/elements/icons';

const items: MenuProps['items'] = [
  {
    children: [
      {
        // icon: <HomeOutlined />,
        key: '/',
        label: <Link href="/">Главная</Link>,
      },
      {
        // icon: <PlusSquareOutlined />,
        key: '/unlimited',
        label: <Link href="/unlimited">Без ограничений</Link>,
      },
    ],
    icon: <AppstoreOutlined />,
    key: 'home',
    label: 'Приложение',
  },
  {
    children: [
      {
        // icon: <DatabaseOutlined />,
        key: '/admin/cache',
        label: <Link href="/admin/cache">Управление кэшем</Link>,
      },
    ],
    icon: <SettingOutlined />,
    key: 'admin',
    label: 'Панель управления',
  },
];

const Wrapper = styled.div`
  ${min('laptop')} {
    height: calc(100vh - var(--height-header));
    overflow-y: scroll;
  }

  ${min('desktop-xl')} {
    height: calc(calc(100vh - var(--height-header)) - 16px);
  }
`;

const MenuWrapper = styled(Wrapper)`
  ${min('laptop')} {
    > :first-child {
      min-height: 100%;
      width: 280px;
    }
  }
`;

const ContentWrapper = styled(Wrapper)`
  flex: 1;
`;

const Flex = styled.div`
  display: flex;
  flex-direction: column;

  ${min('laptop')} {
    flex-direction: row;
  }
`;

export function Layout({ children }: PropsWithChildren) {
  const { pathname } = useRouter();

  return (
    <Flex>
      <Media lessThan="laptop">
        <MenuWrapper>
          <Menu selectedKeys={[pathname]} mode="horizontal" items={items} />
        </MenuWrapper>
      </Media>
      <Media greaterThanOrEqual="laptop">
        <MenuWrapper>
          <Menu
            defaultOpenKeys={['home', 'admin']}
            selectedKeys={[pathname]}
            mode="inline"
            items={items}
          />
        </MenuWrapper>
      </Media>
      <ContentWrapper>{children}</ContentWrapper>
    </Flex>
  );
}