import { SerializedStyles } from '@emotion/react';
import tw, { css, styled } from 'twin.macro';

import { CloseIcon } from '../../../icons/CloseIcon';
import { IMenuCollapsedProps } from './types';

export const TopNavMobileContainer = styled.div<IMenuCollapsedProps>(
  ({ isCollapsed }) => [
    isCollapsed && tw`shadow`,
    css`
      position: sticky;
      top: 0;
    `,
  ],
);

export const TopNavMobileMenu = styled.div<IMenuCollapsedProps>(
  ({ isCollapsed }) => [
    tw`flex flex-col gap-9 shadow`,
    css`
      width: 100%;
      background-color: #fff;
      transition: transform 0.1s ease-out;
      transform: translateY(${isCollapsed ? 0 : '-100%'});
      position: absolute;
      padding: 14px 15px 68px;
    `,
  ],
);

export const TopNavMobileMenuContent = styled.div(() => [
  tw`flex flex-col gap-9`,
]);

export const TopNavMobileMenuFooter = styled.div(() => [
  tw`text-blue flex flex-col gap-1`,
  css`
    font-weight: 600;
    font-size: 16px;
    line-height: 22px;
  `,
]);

export const ToggleNavMobileMenuButton = styled.button<IMenuCollapsedProps>(
  ({ isCollapsed }) => [
    isCollapsed ? tw`border-brand-orange px-1.5` : tw`border-transparent`,
    css`
      display: inline-block;
      width: 32px;
      height: 24px;
      position: relative;
      padding-top: 2px;
      padding-bottom: 2px;
      border-style: solid;
      border-width: 2px;
      border-radius: 2px;
    `,
  ],
);

export const navMobileMenuButtonIconStyles: SerializedStyles = css`
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
`;

export const StyledCloseIcon = styled(CloseIcon)(() => [
  navMobileMenuButtonIconStyles,
  css`
    transform: translate(-50%, -50%) scale(0.9);
  `,
]);