<template>
  <div class="component-toolbar">
    <div class="toolbar-container">
      <span class="header-icons">
        <span @click="mobileShow = true">&#9776;</span>
        &nbsp;&nbsp;
        <span @click="$segment('homePage')">
          <router-link :to="{name: 'HomePage'}" class="logo" href="/zap/subscribe">
            <img :src="require('~/assets/logo-zap.svg')" alt="ZAP" class="zapLogo">
          </router-link>
        </span>
      </span>
      <span class="toolbar-top-icons">
        <router-link :to="{name: 'SelectionPage'}" @click="$segment('showAll')">
          See All Cars
        </router-link>
        |
        <router-link :to="{name: 'OffersPage'}">
          See All Offers
        </router-link>
        |
        <template v-if="isLoggedIn">
          <a @click.prevent="handleReferral" v-if="isLoggedIn">
            Refer & Earn
          </a>
          |
        </template>
        <a class="black-bar" @click.prevent="!isLoggedIn ? handleLoginSignup() : handleLogout()">
          <template>
            {{isLoggedIn ? 'Logout' : 'Sign Up/Log In'}}
          </template>
        </a>
      </span>
      <div class="ovl" @click="mobileShow = false" v-if="mobileShow"></div>
      <div class="links" @click="mobileShow = false" :class="mobileShow ? 'show' : ''">
        <a class="black-bar" @click.prevent="!isLoggedIn ? handleLoginSignup() : ''">
          <span class="mdi mdi-account toolbar-icon"/>
          <template>
            {{isLoggedIn ? (User.userDetails && User.userDetails.name ? User.userDetails.name : 'Hello') : 'Sign Up/Log In'}}
          </template>
        </a>
        <a href="#" @click="showCitySelection();$segment('selectCity')">
          <span class="mdi mdi-map-marker toolbar-icon"/>
          Change City
        </a>
        <router-link :to="{name: 'SelectionPage'}" @click="$segment('showAll')">
          <span class="mdi mdi-car toolbar-icon"/>
          See All Cars
        </router-link>
        <router-link :to="{name: 'OffersPage'}">
          <span class="mdi mdi-sale toolbar-icon"/>
          See All Offers
        </router-link>
        <router-link :to="{name: 'SubscriptionsPage'}" v-if="isLoggedIn && User.subscriptions.length">
          <span class="mdi mdi-calendar toolbar-icon"/>
          Subscription Details
        </router-link>
        <a @click.prevent="handleReferral" v-if="isLoggedIn">
          <span class="mdi mdi-currency-inr toolbar-icon"/>
          Refer & Earn
        </a>
        <a @click="$segment('faq')" target='_blank' href="/zap-subscribe-faq">
          <span class="mdi mdi-help-circle-outline toolbar-icon"/>
          FAQs
        </a>
        <router-link :to="{name: 'HelpPage'}">
          <span class="mdi mdi-phone-classic toolbar-icon"/>
          Help & Support
        </router-link>
        <a @click="$segment('selectCity')" target='_blank' href="/zap-subscribe-policies">
          <span class="mdi mdi-file-document-box-multiple toolbar-icon"/>
          Policies
        </a>
        <a @click.prevent="handleLogout" v-if="isLoggedIn">
          <span class="mdi mdi-power toolbar-icon"/>
          Logout
        </a>
      </div>
    </div>
  </div>
</template>

<script>
import './toolbar.scss';

import Toolbar from './toolbar';
export default Toolbar;
</script>
