<template>
  <div class="page page-selection">
    <Toolbar @showlogin="showLoginModal" @showreferral="showReferral"/>
    <zc-dialog v-if="showLoginSignupModal" v-bind="loginDialog" @onClose="showLoginSignupModal=false">
      <Login @done="handleLogin"></Login>
    </zc-dialog>
    <zc-dialog v-if="showReferralModal" v-bind="loginDialog" @onClose="showReferralModal=false">
      <Referral
        referralType="zap"
        :zapRequestId="parseInt(zapRequestId)"
      />
    </zc-dialog>

    <section v-if="!isMobile" class="breadcrumb">
      <div class="container">
        <router-link :to="{name: 'HomePage'}">Home</router-link> /
        All Cars
      </div>
    </section>
 
    <section class="offers-filter-selections">
      <div class="container">
        <div class="offers-title">
          Cars in {{User.city}}
          {{Car.items.length ? `- ${carFilterResult.length} cars` : ''}}
        </div>
        <div class="offer-pills">
          <template v-for="val, type in carFilters">
            <div class="pill" v-for="filter in carFilters[type]">
              {{filter}}
              <div class="remove" @click="setFilter(type, filter)">&times;</div>
            </div>
          </template>
        </div>
      </div>
    </section>

    <section class="car-list">
      <div class="container">
        <div class="offer-filters" v-if="!isMobile">
          <div class="filter">
            By Brand
            <br>
            <br>
            <template v-if="maxCars != carFilterResult.length">
              <input placeholder="Search for a car" class="car-filter-input" v-model='carName'/>
              <br>
              <br>
            </template>
            <div class="filter-options" v-if="index < maxCars" v-for="car,index in filteredCarBrands" @click="setFilter('cargroup', car.cargroup_name)" :key="car.id">
              <Checkbox :ticked="carFilters.cargroup.includes(car.cargroup_name)"/>
                {{car.cargroup_name}}
            </div>
            <template v-if="filteredCarBrands.length > maxCars">
              <span @click="maxCars = carFilterResult.length" class="more-cars">+ {{filteredCarBrands.length - maxCars}} more</span>
            </template>
          </div>
          <br>
          <div class="filter">
            By Car Segment
            <br>
            <br>
            <div class="filter-options" @click="setFilter('cartype', 'Hatchback')">
              <Checkbox :ticked="carFilters.cartype.includes('Hatchback')"/>
              Hatchback
            </div>
            <div class="filter-options" @click="setFilter('cartype', 'Sedan')">
              <Checkbox :ticked="carFilters.cartype.includes('Sedan')"/>
              Sedan
            </div>
            <div class="filter-options" @click="setFilter('cartype', 'SUV')">
              <Checkbox :ticked="carFilters.cartype.includes('SUV')"/>
              SUV
            </div>
          </div>
        </div>


        <div class='action-results-wrapper'>

            <div class='car-slider-sort-wrapper'>
              <section class="filters">
                <div class="container">
                  <div class="range" style="margin-top: 0px; display: flex; align-items: center">
                    <label>Share for</label>
                    <vue-slider
                      v-model="daysToShare" max="31" width="300px" min="0" tooltip-dir="bottom"
                      :formatter="v => `${v} Days`"
                      :processStyle="{backgroundColor: '#70ad4d'}"
                      :tooltipStyle="{
                        backgroundColor: '#70ad4d',
                        borderColor: '#70ad4d',
                        fontWeight: '400',
                        fontSize: '12px',
                        padding: '2px 10px'
                      }"
                    />
                  </div>
                </div>
              </section>
              <div v-if='!isMobile' class='sort-div'>
                <label>Sort by: </label>
                <multiselect v-model='sorting' :allow-empty='false' :searchable='false'
                    :options='["price-descend", "price-ascend"]' :show-labels="false"
                >
                <template slot="singleLabel" slot-scope="props">
                    <span class="sort-option">
                      {{props.option == 'price-ascend' ? "Price: Low to High" : "Price: High to Low"}}
                    </span>
                </template>
                <template slot='option' slot-scope='props' class='grayscale'>
                    <span class="sort-option">
                      {{props.option == 'price-ascend' ? "Price: Low to High" : "Price: High to Low"}}
                    </span>
                </template>
                </multiselect>
              </div>
        </div>

          <div class="loading" v-if="$store.state.Car.loading">
            <div class="loader"></div>
            Loading Cars
          </div>
          <div v-else-if="!$store.state.Car.loading && carFilterResult.length" class="items">
            <div class="item" @click="$segment('tipClick', 'protip')" :style="`order: ${parseInt(carFilterResult.length / 3)}`">
              <div class="component-car-item tip-tile">
                <img :src="require('~/assets/icons/pro-tip.svg')" alt=""/>
                <h3 class="title">Pro Tip</h3>
                <div class="total-price">All of our cars are covered by manufacturer-backed warranties, so you can drive in peace.</div>
              </div>
            </div>
            <div class="item" @click="$segment('tipClick', 'subscription_offer')" :style="`order: ${parseInt(carFilterResult.length / 1.5)}`">
              <div class="component-car-item tip-tile">
                <img :src="require('~/assets/icons/tenure-offer.svg')" alt=""/>
                <h3 class="title">Choose Instapay and waive off your security deposit of ₹9,999</h3>
                <div class="total-price">Enjoy prioritized car allocation & seamless payments for the complete subscription tenure</div>
              </div>
            </div>
            <div v-for="car, index in carFilterResult"
              @click="$segment('carSelection', car.cargroup_id);
                      $gtm.trackEvent({
                        'CarModel': car.cargroup_name,
                        'CarType': (car.cartype == 5 || car.cartype == 6) ? 'SUV' : (car.cartype == 3 || car.cartype == 1) ? 'Hatchback' : car.cartype == 4 ? 'Sedan' : '',
                        'Rent' : car.rental,
                        'event': 'CarSelect',
                        'UserID': User.userDetails.user_id,
                        'LoginID': User.userDetails.email
                      })"
              class="item"
              :style="`order: ${index}`"
            >
              <router-link :key="car.cargroup_id" :to="{name: 'CarDetailsPage', params: {id: car.cargroup_id}}">
                <CarItem v-bind="car" :shareForDays="daysToShare" />
              </router-link>
            </div>
          </div>
          <div class="loading" v-else>
            <template v-if="User.userDetails && User.userDetails.email && User.userDetails.email.includes('@zoomcar.com')">
              <img :src="require('~/assets/icons/missing_zoom.png')"/>
              <strong>Oh Poop!</strong>
              All cars are gone
            </template>
            <template v-else>
              <img :src="require('~/assets/icons/missing.png')"/>
              We're sorry, something went wrong fetching cars for your city. Please change your filters or try another city.
            </template>
            <!-- {{errorMessage || 'No offers Available'}} -->
          </div>
        </div>
        <div class="filters-button" :class="showFilters || showSorting? 'expanded' : ''" v-if="isMobile">
        <div class="title" v-if='!showSorting' @click="showFilters = true">
          <p>Filters <sup style='color: #4a90e2' v-if='filterCount > 0'>{{filterCount}}</sup> </p>
          <div style='display: flex; flex-direction: row; font-size: 12px;'>
            <p style='padding-right: 20px;' v-if='showFilters' @click.stop='resetFilters'>Reset</p>
            <p v-if='showFilters' @click.stop='showFilters = false'>Done</p>
          </div>
        </div>
        <div class="offer-filters" v-if="showFilters">
          <div class="filter" :class="activeFilter == 'cargroup' ? 'active-filter' : ''" @click="activeFilter='cargroup'">
            Car
            <div class="filter-options" v-if="activeFilter=='cargroup'">
              <div class="option"  v-for="car,index in filteredCarBrands" @click="setFilter('cargroup', car.cargroup_name)" :key="car.id">
                <Checkbox :ticked="carFilters.cargroup.includes(car.cargroup_name)"/>
                  {{car.cargroup_name}}
              </div>
            </div>
          </div>
          <div class="filter" :class="activeFilter == 'cartype' ? 'active-filter' : ''" @click="activeFilter='cartype'">
            Segment
            <div class="filter-options" v-if="activeFilter=='cartype'">
              <div class="option" @click="setFilter('cartype', 'Hatchback')">
                <Checkbox :ticked="carFilters.cartype.includes('Hatchback')"/>
                Hatchback
              </div>
              <div class="option" @click="setFilter('cartype', 'Sedan')">
                <Checkbox :ticked="carFilters.cartype.includes('Sedan')"/>
                Sedan
              </div>
              <div class="option" @click="setFilter('cartype', 'SUV')">
                <Checkbox :ticked="carFilters.cartype.includes('SUV')"/>
                SUV
              </div>
            </div>
          </div>
        </div>
        <div class="title" v-if='!showFilters' @click="showSorting = true">
          <p>Sort</p>
          <p v-if='showSorting' @click.stop='showSorting = false' style='font-size: 12px;'>Done</p>
        </div>
        <div class='offer-filters' style='padding:10px 20px;'v-if='showSorting'>
          <div class='filter-options' @click='sorting = "price-descend"'>
              <Checkbox :ticked="sorting == 'price-descend'"/>
              Price: High to Low
          </div>
          <div class='filter-options'  @click='sorting = "price-ascend"'>
              <Checkbox :ticked="sorting == 'price-ascend'"/>
              Price: Low to High
          </div>
        </div>
      </div>

      </div>
    </section>

    <Footer />
  </div>
</template>
<style src="vue-multiselect/dist/vue-multiselect.min.css"></style>
<script>
import './selection.scss';

import SelectionPage from './selection';
export default SelectionPage;
</script>
