<template>
  <nav
    class="top-nav flex items-center px-6 h-16 border-b border-base w-full bg-body top-0"
  >
    <div class="flex items-center">
      <a href="/">
        <div class="logo-wrapper">
          <svg
            width="110"
            viewBox="0 0 110 24"
            fill="none"
            xmlns="http://www.w3.org/2000/svg"
          >
            <path
              fill-rule="evenodd"
              clip-rule="evenodd"
              d="M0 12C0 15.5565 2.8776 18.1919 6.4416 18.1919C8.6064 18.1919 10.2432 17.2708 11.2728 15.71C11.484 15.403 11.352 15.1215 11.0616 14.8656L9.8736 13.8934C9.6624 13.7143 9.2928 13.7654 9.108 13.9701C8.58 14.5586 7.8672 15.275 6.5208 15.275C4.62 15.275 3.3264 13.8422 3.3264 12C3.3264 10.1833 4.6464 8.7505 6.5472 8.7505C7.6824 8.7505 8.3952 9.23664 8.976 9.77395C9.2136 10.0042 9.504 10.1322 9.768 9.85071L10.8768 8.67374C11.1408 8.41787 11.2728 8.08525 11.0088 7.82939C9.8472 6.62683 8.3688 5.83365 6.468 5.83365C2.8512 5.83365 0 8.52022 0 12ZM12.7502 17.3476C12.7502 17.6546 13.0406 17.9105 13.331 17.9105H15.4166C15.8918 17.9105 16.0502 17.6802 16.0502 17.3476V10.8231C16.367 9.62049 17.159 8.75055 18.5846 8.75055C20.0366 8.75055 20.8022 9.74842 20.8022 11.386V17.3476C20.8022 17.6546 21.0662 17.9105 21.383 17.9105H23.5214C23.8118 17.9105 24.1022 17.6546 24.1022 17.3476V11.4115C24.1022 8.44352 23.0462 5.8337 19.1654 5.8337C17.7134 5.8337 16.6574 6.31984 16.0502 6.83157V0.562901C16.0502 0.281451 15.7862 0 15.4694 0H13.331C13.0406 0 12.7502 0.281451 12.7502 0.562901V17.3476ZM25.5005 14.1492C25.5005 12.0511 27.2693 10.4392 30.3581 10.4392C31.5989 10.4392 32.7077 10.7718 32.7077 10.7718C32.7605 9.26223 32.3117 8.54581 31.0181 8.54581C29.9093 8.54581 28.2989 8.77608 27.5861 8.98077C27.1901 9.10871 26.9525 8.82726 26.8997 8.46905L26.6357 7.13855C26.5301 6.70358 26.7677 6.49889 27.0317 6.42213C27.2957 6.31979 29.2229 5.83365 31.2029 5.83365C35.0045 5.83365 35.7965 7.75263 35.7965 10.9765V17.3475C35.7965 17.6546 35.5325 17.9104 35.2157 17.9104H34.3181C34.1069 17.9104 33.9485 17.8337 33.7901 17.5011L33.4469 16.7079C32.7341 17.3731 31.5197 18.1919 29.6189 18.1919C27.1901 18.1919 25.5005 16.6823 25.5005 14.1492ZM28.6684 14.1493C28.6684 15.1471 29.302 15.8124 30.4372 15.8124C31.5196 15.8124 32.47 14.9936 32.6284 14.5587V12.8188C32.6284 12.8188 31.81 12.4606 30.8332 12.4606C29.434 12.4606 28.6684 13.1002 28.6684 14.1493ZM38.0923 17.3475V6.65241C38.0923 6.31979 38.3827 6.08951 38.6731 6.08951H39.6499C39.9403 6.08951 40.0723 6.21744 40.1779 6.47331L40.6267 7.6247C41.0491 7.03621 42.1843 5.83365 44.0587 5.83365C45.5107 5.83365 46.6987 6.21744 46.3555 6.98503L45.5635 8.72491C45.4315 9.00636 45.1411 9.10871 44.8507 8.98077C44.5603 8.85284 44.2699 8.7505 43.7155 8.7505C42.3955 8.7505 41.6035 9.56926 41.3923 9.97865V17.3475C41.3923 17.7825 41.1019 17.9104 40.7059 17.9104H38.6731C38.3827 17.9104 38.0923 17.6546 38.0923 17.3475ZM55.2513 14.6099V10.3881C54.9873 9.72285 54.1425 8.75056 52.5585 8.75056C50.6577 8.75056 49.6809 10.3625 49.6809 12.0256C49.6809 13.6887 50.7105 15.2751 52.7169 15.2751C54.2481 15.2751 55.2513 14.6099 55.2513 14.6099ZM58.5513 6.65241V18.0384C58.5513 21.8507 55.8057 23.7697 52.4793 23.7697C50.4729 23.7697 48.6777 22.8742 48.0969 22.4392C47.9121 22.2857 47.8329 21.9787 47.9649 21.774L48.7569 20.1109C48.8625 19.8806 49.2057 19.8038 49.4697 19.9573C49.9185 20.2132 51.1065 20.8529 52.3737 20.8529C54.2481 20.8529 55.2513 20.2388 55.2513 18.0384V17.7057C54.6969 17.9104 53.5353 18.1919 52.3209 18.1919C48.6777 18.1919 46.2753 15.4797 46.2753 12.0256C46.2753 8.44346 48.7833 5.83365 52.1097 5.83365C54.6969 5.83365 56.0961 7.59911 56.0961 7.59911L56.4129 6.65241C56.5185 6.31979 56.7033 6.08951 56.9937 6.08951H57.9705C58.2873 6.08951 58.5513 6.34537 58.5513 6.65241ZM60.2135 12C60.2135 8.67374 62.7479 5.83365 66.3647 5.83365C69.5327 5.83365 71.9615 8.11084 71.9615 11.3091C71.9615 11.4882 71.9351 11.8976 71.9087 12.0767C71.8823 12.3838 71.5919 12.614 71.3279 12.614H63.5135C63.5399 14.0725 64.7807 15.3518 66.5495 15.3518C67.7639 15.3518 68.6087 14.9168 69.1631 14.4819C69.4535 14.2516 69.7703 14.226 69.9551 14.4819L70.9847 15.8123C71.1959 16.0426 71.2223 16.3241 70.9319 16.5799C69.8759 17.4499 68.3711 18.1919 66.3911 18.1919C62.7479 18.1919 60.2135 15.3774 60.2135 12ZM63.6983 10.5169H68.6351C68.5823 9.36506 67.6319 8.46917 66.2855 8.46917C64.8071 8.46917 63.8567 9.33947 63.6983 10.5169ZM74.2838 14.3804C74.2838 16.4274 74.9702 18.1928 77.6894 18.1928C78.9566 18.1928 80.699 17.6555 81.1214 17.4252C81.4118 17.2717 81.5438 17.0414 81.4646 16.7344L81.1214 15.1736C81.0686 14.8922 80.7782 14.7387 80.435 14.8666C80.1181 14.9689 79.115 15.2504 78.587 15.2504C77.9798 15.2504 77.5838 15.0713 77.5838 14.2781V8.95613H80.435C80.7518 8.95613 81.0158 8.67468 81.0158 8.39323V6.65335C81.0158 6.32073 80.7518 6.09045 80.435 6.09045H77.5838V2.81539C77.5838 2.50835 77.3462 2.25249 77.0294 2.25249H74.8646C74.5742 2.25249 74.2838 2.50835 74.2838 2.81539V6.09045H73.0957C72.779 6.09045 72.5414 6.32073 72.5414 6.65335V8.39323C72.5414 8.67468 72.779 8.95613 73.0957 8.95613H74.2838V14.3804ZM82.7836 17.3475C82.7836 17.6546 83.074 17.9104 83.3644 17.9104H85.3972C85.7932 17.9104 86.0836 17.7825 86.0836 17.3475V9.97865C86.2948 9.56926 87.0868 8.7505 88.4068 8.7505C88.9612 8.7505 89.2516 8.85284 89.542 8.98077C89.8324 9.10871 90.1228 9.00636 90.2548 8.72491L91.0468 6.98503C91.39 6.21744 90.202 5.83365 88.75 5.83365C86.8756 5.83365 85.7404 7.03621 85.318 7.6247L84.8692 6.47331C84.7636 6.21744 84.6316 6.08951 84.3412 6.08951H83.3644C83.074 6.08951 82.7836 6.31979 82.7836 6.65241V17.3475ZM92.0226 17.3475C92.0226 17.6546 92.313 17.9104 92.6034 17.9104H94.7418C95.0322 17.9104 95.3226 17.6546 95.3226 17.3475V6.6524C95.3226 6.31978 95.0322 6.0895 94.7418 6.0895H92.6034C92.313 6.0895 92.0226 6.31978 92.0226 6.6524V17.3475ZM110 12.0256C110 15.4797 107.598 18.1919 103.954 18.1919C102.74 18.1919 101.578 17.9104 101.024 17.7057V23.4371C101.024 23.7185 100.734 24 100.443 24H98.3048C97.988 24 97.724 23.7185 97.724 23.4371V6.65241C97.724 6.34537 97.988 6.08951 98.3048 6.08951H99.2816C99.572 6.08951 99.7568 6.31979 99.8624 6.65241L100.179 7.59911C100.179 7.59911 101.578 5.83365 104.166 5.83365C107.492 5.83365 110 8.44346 110 12.0256ZM101.024 10.3881V14.6099C101.024 14.6099 102.027 15.2751 103.558 15.2751C105.565 15.2751 106.594 13.6887 106.594 12.0256C106.594 10.3625 105.618 8.75056 103.717 8.75056C102.133 8.75056 101.288 9.72285 101.024 10.3881Z"
              class="text-font-primary fill-current"
            />
          </svg>
        </div>
      </a>
      <template v-if="logo">
        <div class="h-2 mx-2 w-px bg-alt rounded" />
        <img :src="logo" />
      </template>
    </div>
    <div class="container flex-1 flex items-center">
      <slot />
      <div
        class="ctas ml-auto xl:flex items-center "
        :class="{ hidden: !applyForm }"
      >
        <slot name="cta" />
        <div class="flex" v-if="showItems">
          <MenuItem
            v-for="(item, key) in normalizedItems"
            :key="key"
            v-bind="item"
            class="mr-4 last:mr-0 font-semibold"
            @click.native="onClick(item)"
          />
        </div>
      </div>
    </div>
  </nav>
</template>

<script lang="ts">
import { Component, Prop, Vue } from "vue-property-decorator";
import MenuItem from "../menu-item/MenuItem.vue";

@Component({ components: { MenuItem } })
export default class TopNav extends Vue {
  @Prop({ default: true }) showItems;
  @Prop() applyForm!: () => void;
  @Prop() navigateOnSignOut;
  @Prop() isLoggedIn;
  @Prop() logo!: string;

  onClick(item) {
    item?.onClick?.();
  }

  get normalizedItems() {
    if (this.applyForm) {
      return [
        {
          title: "Apply",
          color: "primary",
          onClick: this.applyForm,
          arrow: true
        }
      ];
    }

    return [
      {
        href: "https://account.chargetrip.com",
        icon: "person-circle",
        color: this.isLoggedIn ? "accent" : "primary",
        title: this.isLoggedIn ? "Account" : "Sign in"
      },
      ...(this.isLoggedIn
        ? []
        : [
            {
              color: "accent",
              href: "https://account.chargetrip.com/sign-up",
              title: "Sign up"
            }
          ])
    ];
  }
}
</script>
<style lang="scss">
.theme-light:not(.is-web) .top-nav {
  @apply bg-subdued;
}
.top-nav {
  .ctas {
    .c-menu-item {
      &:nth-last-child(2) {
        @apply pr-4 border-r border-alt2;
      }
    }

    .icon-arrow-up-right {
      @apply opacity-100;
    }

    .icon {
      @apply mr-2;
    }
  }
}
</style>
