import 'twin.macro';

import React from 'react';

import { ITopNavItem } from '~/layout/TopNav';
import {
  NavItemWrapper,
  NavSubmenu,
  NavSubmenuItem,
  NavSubmenuLabel,
} from '~/layout/TopNav/styles';
import { TopNav } from '~/layout/TopNav/TopNav';

export default {
  title: 'layout/TopNav',
  component: TopNav,
};

const topNavItems: ITopNavItem[] = [
  {
    position: { desktop: 'left' },
    element: (
      <NavItemWrapper>
        <NavSubmenuLabel>Shop</NavSubmenuLabel>

        <NavSubmenu>
          <NavSubmenuItem>Sleep Supplements</NavSubmenuItem>
          <NavSubmenuItem>Sleep Coaching</NavSubmenuItem>
          <NavSubmenuItem>Reviews</NavSubmenuItem>
        </NavSubmenu>
      </NavItemWrapper>
    ),
  },
  {
    position: { desktop: 'left' },
    element: (
      <NavItemWrapper>
        <NavSubmenuLabel>Learn</NavSubmenuLabel>

        <NavSubmenu>
          <NavSubmenuItem>Our Story</NavSubmenuItem>
          <NavSubmenuItem>Our Ingredients</NavSubmenuItem>
          <NavSubmenuItem>Our Science</NavSubmenuItem>
          <NavSubmenuItem>Blog</NavSubmenuItem>
          <NavSubmenuItem>FAQ</NavSubmenuItem>
        </NavSubmenu>
      </NavItemWrapper>
    ),
  },
  {
    position: { desktop: 'left', mobile: 'below' },
    element: <span>Reviews</span>,
  },
  {
    position: { desktop: 'right', mobile: 'below' },
    element: <span>Login</span>,
  },
  {
    position: { desktop: 'right', mobile: 'above' },
    element: <span>Cart (0)</span>,
  },
];

export function Desktop() {
  return (
    <>
      <TopNav documentWidth={768} items={topNavItems} />

      <main tw="max-w-screen-md mx-auto">{DUMMY_CONTENT}</main>
    </>
  );
}

// For correct render watch on <= 767px
export function Mobile() {
  return (
    <div tw="overflow-hidden w-full">
      <TopNav documentWidth={767} items={topNavItems} />

      <main tw="max-w-screen-md mx-auto">{DUMMY_CONTENT}</main>
    </div>
  );
}

const DUMMY_CONTENT = (
  <>
    <p tw="mb-4">
      Voluptate minim pariatur eu sint. Quis magna deserunt adipisicing veniam
      ad incididunt occaecat. Eiusmod proident ipsum anim ex id dolor anim
      aliqua commodo mollit sunt veniam laborum. Adipisicing aute ea Lorem
      mollit reprehenderit. Reprehenderit sunt minim commodo officia proident
      culpa incididunt excepteur pariatur. Pariatur veniam sint aliquip est
      ipsum mollit consequat qui dolore fugiat. Do sint exercitation veniam
      ullamco nostrud pariatur ut ut tempor reprehenderit deserunt pariatur.
      Labore eu irure consequat proident.
    </p>
    <p tw="mb-4">
      Cupidatat exercitation consectetur aliqua laboris proident irure culpa
      irure et excepteur. Consectetur Lorem nisi id ex enim aute cillum tempor
      duis eiusmod. Excepteur do adipisicing nostrud voluptate exercitation non
      id commodo nisi dolor dolor dolore sit. Sit ex eiusmod do Lorem dolor
      commodo in dolore adipisicing excepteur et amet. Id sunt amet laborum
      aliquip enim nostrud pariatur minim incididunt duis enim commodo. Esse
      excepteur ipsum aute dolore anim eiusmod do ut adipisicing commodo qui.
    </p>
    <p tw="mb-4">
      In laborum nisi id. Velit proident incididunt adipisicing dolor quis eu
      consectetur. Enim laborum voluptate reprehenderit laboris consectetur
      deserunt sint do occaecat irure ad irure. Nisi adipisicing mollit veniam
      est cillum adipisicing pariatur. Veniam fugiat enim nostrud adipisicing
      exercitation.
    </p>
    <p tw="mb-4">
      Consequat ullamco nulla consectetur adipisicing mollit incididunt cillum
      anim veniam quis ex esse quis exercitation. Officia do consequat ut amet
      id esse deserunt elit. Reprehenderit nulla Lorem reprehenderit proident
      magna elit ad culpa elit mollit culpa. Adipisicing culpa aliqua nisi
      occaecat. Nisi aute consequat est nulla do est ad. Voluptate aliqua mollit
      velit eiusmod. Minim sunt sint minim pariatur proident proident sunt
      magna.
    </p>
    <p tw="mb-4">
      Nisi cillum id esse. Laboris sunt deserunt magna ullamco dolore ad minim.
      Exercitation cupidatat aliqua elit ex elit tempor aliqua sunt id minim
      quis commodo nisi quis magna. Ullamco excepteur amet Lorem laboris nisi.
      Veniam commodo deserunt magna sit incididunt labore mollit occaecat
      deserunt aute. Do enim excepteur ex. Incididunt ipsum deserunt ipsum sunt
      duis labore consectetur culpa dolor elit exercitation voluptate do fugiat.
    </p>
    <p tw="mb-4">
      Eu laboris fugiat sit dolore dolor cillum cillum et Lorem nulla minim
      quis. Sint esse id et incididunt sunt reprehenderit culpa. Voluptate
      dolore nulla tempor anim cillum et id in nulla. Et sit aliquip magna sit
      cillum. Do nulla aliqua in ipsum consectetur consectetur sit sit esse.
      Mollit tempor ad velit enim voluptate est Lorem amet enim duis officia
      aute sunt reprehenderit excepteur.
    </p>
    <p tw="mb-4">
      Sunt ut duis voluptate aliquip voluptate. Aliqua occaecat ea aute irure
      consequat in anim ullamco cupidatat consequat eu mollit reprehenderit.
      Dolore laboris reprehenderit ad adipisicing cillum sunt irure tempor ea
      esse do proident officia ut et. Anim ea sint anim exercitation occaecat
      deserunt Lorem. Ullamco officia culpa duis enim velit non veniam est
      occaecat eu ut sint enim et et. Cupidatat anim velit est pariatur eu est
      est commodo non voluptate magna eu. Velit ea magna ullamco deserunt
      laboris dolor dolor cupidatat culpa enim anim tempor laborum. Ipsum ex
      reprehenderit sint deserunt voluptate ea duis officia incididunt dolor
      Lorem eiusmod veniam.
    </p>
    <p tw="mb-4">
      Sint nisi est fugiat Lorem reprehenderit dolore voluptate nostrud labore
      nulla non culpa. Amet sunt proident ex. Lorem esse eu occaecat id ipsum
      excepteur proident. Mollit adipisicing nostrud sit occaecat duis dolore
      elit amet elit. Ea est ullamco culpa et consequat ad labore Lorem sit
      officia incididunt id aute voluptate. Labore veniam excepteur aute non
      ipsum. Aliqua voluptate nostrud nulla. Lorem fugiat ea sunt et. Proident
      commodo proident enim minim laboris sunt ut non eu culpa anim.
    </p>
    <p tw="mb-4">
      Officia officia sunt incididunt nulla qui qui ut eu cupidatat labore. Id
      laborum esse sint officia laboris cillum aliquip excepteur cillum. Non
      minim tempor sint cillum non voluptate excepteur incididunt voluptate ex
      pariatur eu excepteur ea. Voluptate ut sit excepteur anim mollit ut quis
      sunt laborum. Commodo id et laborum esse sint magna laborum ea dolor.
    </p>
    <p tw="mb-4">
      Consequat non sit ullamco eu officia occaecat reprehenderit ullamco duis
      esse irure dolor cillum tempor. Magna consectetur sunt do est irure ipsum
      aute et commodo nulla. Ex pariatur cillum ut reprehenderit sit enim culpa
      consectetur commodo consequat dolore laborum. Minim sit nostrud nisi
      labore cillum ea dolore Lorem eiusmod elit culpa aliqua. Magna sint ea
      velit Lorem exercitation Lorem consequat consequat aliqua duis culpa irure
      do laboris.
    </p>
  </>
);