import { LitElement, html, css } from 'https://cdn.jsdelivr.net/gh/lit/dist@3/core/lit-core.min.js';

export class A4Header extends LitElement {
  static properties = { open: false };
  static styles = css`
    :host {
      display: block;
      height: var(--header-height);
    }

    button {
      cursor: pointer;
      font-feature-settings: inherit;
      font-variation-settings: inherit;
      font-family: inherit;
      font-size: 100%;
      font-weight: inherit;
      line-height: inherit;
      letter-spacing: inherit;
      color: inherit;
      margin: 0;
      padding: 0;
      text-transform: none;
      -webkit-appearance: button;
      background-color: #0000;
      background-image: none;
      border: none;
    }

    a {
      color: inherit;
      text-decoration: inherit;
    }

    header {
      position: absolute;
      left: 0;
      right: 0;
      display: flex;
      height: var(--header-height);
      border-bottom: 1px solid rgb(17 24 39 / 0.1);
      z-index: 50;
    }

    div.desktop {
      width: 100%;
      max-width: 80rem;

      display: flex;
      align-items: center;
      justify-content: space-between;

      margin: 0 auto;
      padding: 0 1rem;

      @media (min-width: 640px) {
        padding: 0 1.5rem;
      }

      @media (min-width: 1024px) {
        padding: 0 2rem;
      }

      & > div {
        display: flex;
        flex: 1;
        align-items: center;

        &:first-of-type {
          column-gap: 1.5rem;

          & > button {
            margin: -0.75rem;
            padding: 0.75rem;
            color: var(--color-gray-700);

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

            & > svg {
              height: 1.5rem;
              width: 1.5rem;
            }
          }

          & > img {
            height: 2rem;
            width: auto;
          }
        }

        &:last-of-type {
          column-gap: 2rem;
          justify-content: flex-end;

          & > button {
            margin: -0.75rem;
            padding: 0.75rem;
            color: var(--color-gray-400);

            &:hover {
              color: var(--color-gray-500);
            }

            & > svg {
              height: 1.5rem;
              width: 1.5rem;
            }
          }
        }
      }

      & > nav {
        display: none;
        column-gap: 2.75rem;
        font-size: 0.875rem;
        line-height: 1.5rem;
        font-weight: 600;

        & > a:hover {
          color: var(--color-gray-400);
        }

        @media (min-width: 768px) {
          display: flex;
        }
      }
    }

    div.mobile {
      & > div.backdrop {
        display: fixed;
        top: 0;
        left: 0;
        right: 0;
        z-index: 50;

        &.closed {
          display: none;
        }
      }

      & > div.foredrop {
        &.closed {
          height: 0vh;

          @media (min-width: 640px) {
            width: 0rem;
            height: 100vw;
          }
        }

        position: fixed;
        top: 0;
        left: 0;
        bottom: 0;
        z-index: 50;
        width: 100%;
        overflow-y: hidden;
        background-color: white;
        transition:
          height 500ms linear,
          width 250ms ease-in-out;
        height: 100vh;

        scrollbar-width: none;
        overflow: -moz-scrollbars-none;
        -ms-overflow-style: none;
        &::-webkit-scrollbar {
          display: none;
        }

        @media (min-width: 640px) {
          max-width: 20rem;
          width: 20rem;

          --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
          --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(1px + var(--tw-ring-offset-width)) var(--tw-ring-color);
          --tw-ring-color: rgb(17 24 39 / 0.1);
          box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000);
        }

        & > div {
          padding: 0 1rem 1.5rem 1rem;
          @media (min-width: 640px) {
            padding: 0 1.5rem;
          }

          & > div {
            &:first-of-type {
              /* margin-left: -0.5rem; */
              display: flex;
              height: 4rem;
              align-items: center;
              column-gap: 1.5rem;

              & > button {
                margin: -0.75rem;
                padding: 0.75rem;
                color: var(--color-gray-700);

                & > svg {
                  height: 1.5rem;
                  width: 1.5rem;
                }
              }

              & > div {
                & > a {
                  display: block;
                  margin: -1.25rem;
                  padding: 1.25rem;

                  & > img {
                    height: 2rem;
                    width: auto;
                    margin-top: 6px;
                  }
                }
              }
            }

            &:last-of-type {
              margin-top: 0.5rem;
              margin-top: 0.5rem;
              margin-bottom: 0.5rem;

              & > a {
                display: block;
                margin: -0.75rem;
                padding: 0.75rem;
                font-size: 1rem;
                line-height: 1.75rem;
                font-weight: 600;
                text-align: left;
                color: var(--color-gray-900);

                &:hover {
                  background-color: var(--color-gray-50);
                }
              }
            }
          }
        }
      }

      @media (min-width: 1024px) {
        display: none;
      }
    }
  `;

  constructor() {
    super();
    this.open = false;
  }

  mobileTemplate() {
    return html`<div class="mobile" role="dialog" aria-modal="true">
      <div class="backdrop ${this.open ? 'open' : 'closed'}"></div>
      <div class="foredrop ${this.open ? 'open' : 'closed'}">
        <div>
          <div>
            <button type="button" @click=${() => (this.open = false)}>
              <svg
                fill="none"
                viewBox="0 0 24 24"
                stroke-width="1.5"
                stroke="currentColor"
                aria-hidden="true"
                data-slot="icon">
                <path stroke-linecap="round" stroke-linejoin="round" d="M6 18 18 6M6 6l12 12" />
              </svg>
            </button>
            <div>
              <a href="#">
                <img src="./img/favicon.png" alt="Company Logo" />
              </a>
            </div>
          </div>
          <div>
            <a href="#">Home</a>
            <a href="#">About</a>
            <a href="#">Story</a>
            <a href="#">Adventures</a>
          </div>
        </div>
      </div>
    </div>`;
  }

  render() {
    return html`<header>
      <div class="desktop">
        <div>
          <button type="button" @click=${() => (this.open = true)}>
            <svg viewBox="0 0 20 20" fill="currentColor" aria-hidden="true" data-slot="icon">
              <path
                fill-rule="evenodd"
                d="M2 4.75A.75.75 0 0 1 2.75 4h14.5a.75.75 0 0 1 0 1.5H2.75A.75.75 0 0 1 2 4.75ZM2 10a.75.75 0 0 1 .75-.75h14.5a.75.75 0 0 1 0 1.5H2.75A.75.75 0 0 1 2 10Zm0 5.25a.75.75 0 0 1 .75-.75h14.5a.75.75 0 0 1 0 1.5H2.75a.75.75 0 0 1-.75-.75Z"
                clip-rule="evenodd" />
            </svg>
          </button>
          <img src="./img/favicon.png" alt="Company Logo" />
        </div>
        <nav>
          <a href="#">Home</a>
          <a href="#">About</a>
          <a href="#">Story</a>
          <a href="#">Adventures</a>
        </nav>
        <div>
          <button type="button">
            <svg
              fill="none"
              viewBox="0 0 24 24"
              stroke-width="1.5"
              stroke="currentColor"
              aria-hidden="true"
              data-slot="icon">
              <path
                stroke-linecap="round"
                stroke-linejoin="round"
                d="M14.857 17.082a23.848 23.848 0 0 0 5.454-1.31A8.967 8.967 0 0 1 18 9.75V9A6 6 0 0 0 6 9v.75a8.967 8.967 0 0 1-2.312 6.022c1.733.64 3.56 1.085 5.455 1.31m5.714 0a24.255 24.255 0 0 1-5.714 0m5.714 0a3 3 0 1 1-5.714 0" />
            </svg>
          </button>
        </div>
      </div>

      ${this.mobileTemplate()}
    </header> `;
  }
}

customElements.define('a4-header', A4Header);