import React, { FC } from 'react';
import tw, { css, styled } from 'twin.macro';

import CollapseExpandIcon from '../../icons/CollapseExpandIcon';
import { NAV_SUBMENU_DATA_ATTR_NAME } from './constants';
import { getMarkupFromSVGComponent } from './helpers';

export const TopNavBody = styled.nav(() => [
  tw`p-4 sm:px-6 md:(px-8 shadow) sticky top-0 inset-x-0 bg-white mx-0 flex flex-row justify-between`,
  css`
    z-index: 2;
  `,
]);

export const TopNavLeftContent = styled.nav(() => [tw`flex flex-row gap-6`]);

export const TopNavRightContent = styled.nav(() => [tw`flex flex-row gap-6`]);

export const NavItemWrapper = styled.div`
  position: relative;

  @media (min-width: 768px) {
    &:hover {
      [${NAV_SUBMENU_DATA_ATTR_NAME}] {
        display: flex;
      }
    }
  }

  @media (max-width: 767px) {
    width: 100%;
  }
`;

const TopNavSubmenu: FC<{ className?: string }> = (props) => (
  <ul {...{ [NAV_SUBMENU_DATA_ATTR_NAME]: '' }} {...props} />
);

export const NavSubmenu = styled(TopNavSubmenu)(() => [
  tw`md:(border border-solid border-blue)`,
  css`
    background-color: #fff;
    flex-direction: column;
    top: 100%;
    left: 0;
    list-style: none;
    padding-left: 0;

    @media (min-width: 768px) {
      display: none;
      position: absolute;
    }

    @media (max-width: 767px) {
      display: flex;
      gap: 24px;
      position: relative;
    }
  `,
]);

export const NavSubmenuLabel = styled.h3`
  display: block;
  cursor: pointer;

  @media (min-width: 768px) {
    padding-right: 17px;

    &:after {
      content: url(${getMarkupFromSVGComponent(
        <CollapseExpandIcon
          width={11}
          height={6}
          strokeWidth={1}
          stroke="#221D35"
          mode="expand"
        />,
      )});
      position: absolute;
      right: 0;
      top: 50%;
      transform: translateY(-55%);
    }
  }

  @media (max-width: 767px) {
    text-align: center;
    text-transform: uppercase;
    font-size: 20px;
    line-height: 28px;
    padding-bottom: 3px;
    margin-bottom: 12px;
    border-bottom: 1px solid #000;
  }
`;

export const NavSubmenuItem = styled.li(() => [
  tw`text-blue md:(hover:bg-blue-light border-blue)`,
  css`
    cursor: pointer;

    @media (min-width: 768px) {
      font-size: 20px;
      line-height: 30px;
      border-bottom-width: 1px;
      border-bottom-style: solid;

      &:last-of-type {
        border-bottom: none;
      }

      & > * {
        padding: 10px;
        min-width: 187px;
      }
    }

    @media (max-width: 767px) {
      font-weight: 600;
      font-size: 16px;
      line-height: 22px;
      text-align: center;

      & > * {
        width: 100%;
      }
    }
  `,
]);

export const NavLink = styled.a`
  display: inline-block;
`;