import React from "react";
import styled from "styled-components";
import { Link } from "@components/index";
import colors from "@theme/colors";
import breakpoints from "@theme/breakpoints";

interface AdminSidebarProps {
  path: string;
}

const SideBar = styled.nav`
  display: flex;
  flex-flow: column nowrap;
  margin-right: 1rem;
  background-color: ${colors.blue1};

  @media screen and (max-width: ${breakpoints.mobile}) {
    margin-right: 0;
    margin-bottom: 1rem;
  }
`;

const StyledLink = styled(Link)<{ $path: string }>`
  padding: 1rem 3rem 1rem 1rem;
  letter-spacing: 3px;
  text-transform: uppercase;
  line-height: 1.25;
  font-weight: bold;
  white-space: nowrap;
  color: ${colors.white};
  border-left: 4px solid transparent;

  ${(p) => p.$path === p.to && `
    border-left: 4px solid ${colors.white};
  `}

  &:hover {
    border-left: 4px solid ${colors.white};
  }

  @media screen and (max-width: ${breakpoints.mobile}) {
    margin-bottom: 1px;
  }
`;

const AdminSidebar: React.FC<AdminSidebarProps> = ({ path }) => (
  <SideBar>
    <StyledLink to="/admin" passHref $path={path}>Home&nbsp;›</StyledLink>
    <StyledLink to="/admin/events" passHref $path={path}>Events&nbsp;›</StyledLink>
    <StyledLink to="/admin/feed" passHref $path={path}>Feed&nbsp;›</StyledLink>
    <StyledLink to="/admin/signups" passHref $path={path}>Signup forms&nbsp;›</StyledLink>
    <StyledLink to="/admin/jobads" passHref $path={path}>Job advertisements&nbsp;›</StyledLink>
    <StyledLink to="https://static.sahkoinsinoorikilta.fi/admin" passHref $path={path}>Files&nbsp;›</StyledLink>
    <StyledLink data-e2e="admin-sidebar-logout" to="/admin/logout" passHref $path={path}>Logout&nbsp;›</StyledLink>
  </SideBar>
);

export default AdminSidebar;