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 { DatabaseOutlined, HomeOutlined, PlusSquareOutlined } from 'ui/elements/icons';

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

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)`
  > :first-child {
    min-height: 100%;
    width: 280px;
  }
`;

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

const Flex = styled.div`
  display: flex;
`;

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

  return (
    <Flex>
      <MenuWrapper>
        <Menu selectedKeys={[pathname]} mode="inline" items={items} />
      </MenuWrapper>
      <ContentWrapper>{children}</ContentWrapper>
    </Flex>
  );
}