<template>
  <div class="container">
    <div class="row">
      <div class="col-12">
        <div v-b-toggle.collapse-all class="filters-header">
          <img
            class="image"
            src="@/assets/img/product-filter-filtrar.svg"
            alt=""
          />
          <h2 class="text">FILTRAR POR</h2>
        </div>
        <BCollapse id="collapse-all" visible>
          <!-- Location -->
          <div class="row">
            <div class="col-12">
              <div class="location">
                <div class="googleaddress-container">
                  <!-- TODO: Revisar componente -->
                  <!-- <GoogleAddress
                    @addedData="getPlace"
                    :geo="geo"
                    :label="'Cercanía'"
                  /> -->
                </div>
              </div>
            </div>
          </div>

          <div class="collapsible collapsible-range">
            <hr />
            <div v-b-toggle.collapse-price class="m-1 filter-header">
              <h2 class="title">Precio</h2>
              <img
                src="../assets/img/latienda-arrow-down.svg"
                alt=""
                class="arrow"
              />
            </div>
            <BCollapse id="collapse-price" visible>
              <!-- Price -->
              <div class="filter-range-container">
                <ClientOnly>
                    <v-range-slider
                      v-model="priceRange"
                      :min="0"
                      :max="500"
                      step="10"
                      thumb-label="always"
                      color="#8cead8"
                      track-color="#d6d5d5"
                    >
                      <template #prepend>
                        <span>{{ priceRange[0] }} €</span>
                      </template>
                      <template #append>
                        <span>{{ priceRange[1] }} €</span>
                      </template>
                    </v-range-slider>
                </ClientOnly>
              </div>
              <hr class="dotted-hr" />
              <div class="form-check">
                <input
                  id="checkbox-shipped"
                  v-model="filterForm.shipping_cost"
                  class="form-check-input"
                  type="checkbox"
                />
                <label class="form-check-label" for="checkbox-shipped">
                  Sin gastos de envío
                </label>
              </div>
              <hr class="dotted-hr" />
              <div class="form-check">
                <input
                  id="checkbox-discount"
                  v-model="filterForm.discount"
                  class="form-check-input"
                  type="checkbox"
                  value=""
                />
                <label class="form-check-label" for="checkbox-discount">
                  Descuentos
                </label>
              </div>
            </BCollapse>
          </div>
          <div class="collapsible collapsible-checkboxes">
            <hr />
            <div v-b-toggle.collapse-categories class="m-1 filter-header">
              <h2 class="title">Categorías</h2>
              <img
                src="../assets/img/latienda-arrow-down.svg"
                alt=""
                class="arrow"
              />
            </div>
            <BCollapse id="collapse-categories" visible>
              <div class="checkboxes">
                <div
                  v-for="(n, index) in categories"
                  :key="index"
                  class="form-check"
                >
                  <input
                    :id="'checkbox-' + index"
                    v-model="checkedCategories"
                    class="form-check-input"
                    type="checkbox"
                    :value="n"
                  />
                  <label class="form-check-label" :for="'checkbox-' + index">
                    {{ n }}
                  </label>
                </div>
              </div>
              <div>
                <button class="filter-button" @click="applyFilters">
                  Aplicar
                </button>
              </div>
            </BCollapse>
          </div>
        </BCollapse>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  props: {
    filters: {
      type: Object,
      default: () => ({})
    },
    prices: {
      type: Object,
      default: () => ({})
    },
    currentFilters: {
      type: Object,
      default: () => ({})
    },
    geo: {
      type: Object,
      default: () => ({})
    }
  },

  emits: ['applyFilters'],

  data() {
    return {
      filterForm: {
        shipping_cost: false,
        discount: false,
      },
      visible: true,
      checkedCategories: [],
      categories: [
        'Alimentación, bebida y tabaco',
        'Arte y ocio',
        'Bebés y niños pequeños',
        'Bricolaje',
        'Cámaras y ópticas',
        'Casa y jardín',
        'Economía e industria',
        'Electrónica',
        'Elementos religiosos y ceremoniales',
        'Equipamiento deportivo',
        'Juegos y juguetes',
        'Maletas y bolsos de viaje',
        'Material de oficina',
        'Mobiliario',
        'Multimedia',
        'Productos para adultos',
        'Productos para mascotas y animales',
        'Ropa y accesorios',
        'Salud y belleza',
        'Software',
        'Vehículos y recambios',
      ],
      priceRange: [0, 500],
      priceRangeFilter: {},
      place: null,
      coordinates: null,
    }
  },

  watch: {
    currentFilters(newCurrentFilters) {
      if (newCurrentFilters) {
        if (newCurrentFilters['category']) {
          this.checkedCategories = newCurrentFilters['category']
        } else {
          this.checkedCategories = []
        }
        if (Object.keys(newCurrentFilters).includes('shipping_cost')) {
          this.filterForm.shipping_cost = true
        } else {
          this.filterForm.shipping_cost = false
        }
      }
      this.filterForm.discount = this.$route.query.hasOwnProperty('discount')
    },
    prices(newPrices) {
      if (newPrices.min && newPrices.max) {
        this.priceRange = [newPrices.min, newPrices.max]
      }
    },
  },

  mounted() {
    if (this.prices.min && this.prices.max) {
      this.priceRange = [this.prices.min, this.prices.max]
    }
  },

  methods: {
    getPlace(value) {
      this.place = value
    },

    applyFilters() {
      const filters = {}
      filters.price_min = this.priceRange[0]
      filters.price_max = this.priceRange[1]
      if (this.filterForm.shipping_cost) filters.shipping_cost = false
      if (this.filterForm.discount) filters.discount = true
      filters.category = this.checkedCategories
      if (this.place) {
        filters.latitude = this.place.geo.latitude
        filters.longitude = this.place.geo.longitude
      }
      this.$emit('applyFilters', filters)
    },
  },
}
</script>

<style lang="scss" scoped>
.filter-button {
  margin-top: 30px;
  background-color: $color-navy;
  color: $color-light;
  font-size: $xs;
  padding: 0.5em 0.8em;
  border-radius: 5px;
}
.filter-range-container {
  margin-top: 60px;
}
.filters-header {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: flex-start;
  margin-bottom: 20px;
  outline: none;
  @include mobile {
    margin-top: 2rem;
  }
  .text {
    font-size: $s;
    margin: 0;
    margin-left: 10px;
    color: $color-navy;
    font-weight: $bold;
  }
  .image {
    height: 20px;
  }
}

.location {
  label {
    font-size: $s;
    color: $color-navy;
    font-weight: $bold;
    position: relative;
  }

  label:before {
    content: '';
    position: absolute;
    left: 10px;
    top: 0;
    bottom: 0;
    width: 20px;
    background: url('../assets/img/product-filter-ubicacion.svg') center /
      contain no-repeat;
  }

  .location-input {
    background-color: $color-grey-nav;
    border: none;
    border-radius: 5px;
    padding-top: 40px;
    padding-bottom: 1px;
  }
}

.collapsible {
  .filter-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    outline: none;

    h2 {
      font-size: $s;
      color: $color-navy;
      font-weight: $bold;
    }
    img {
      width: 12px;
    }
  }
  label {
    display: inline-block;
    font-family: Noto Sans Regular, sans-serif;
    font-size: $s;
    color: $color-greytext;
  }
}

.checkboxes {
  height: 6rem;
  overflow-y: scroll;
}

.dotted-hr {
  border-top: 2px dotted $color-greylighter;
  margin: 8px 0;
}
</style>
