<template>
  <itf-dropdown text ref="dropdown" autoclose="outside" shadow class="h-100" append-to-context>
    <template #button>
      <div class="filter-pill rounded" :class="{'filter-not-default-pill': !isDefault && !isInvalid, 'filter-invalid-pill': isInvalid}">
        <div class="filter-pill__label" :class="{'filter-pill__not-default-value': !isDefault && !isInvalid, 'filter-pill__default-value': isDefault, 'filter-pill__label-invalid': isInvalid}">
          <itf-icon v-if="icon" :size="20" new :name="icon" class="icon" />
          {{ text }}
        </div>
        <div @click.stop.prevent="resetValue" v-if="!isDefault" class="filter-pill__icon" :class="{'filter-pill__icon-not-default-value': !isDefault && !isInvalid, 'filter-pill__icon-invalid': isInvalid}">
          <itf-icon new name="close" />
        </div>
      </div>
    </template>

    <div>
      <template v-if="type === 'list'">
        <a
          v-for="(item, n) in options.items"
          href=""
          @click.prevent="onFilterChange(item)"
          class="dropdown-item"
          :class="{'active': item.value === (value && value.value)}"
          :key="n">{{item.text}}</a>
      </template>
      <template v-else-if="type === 'period'">
        <itf-date-range-picker-inline
          style="margin: -.5rem"
          :value="value.value"
          @input="onFilterChange({ value: $event })"
        />
      </template>
      <template v-else-if="type === 'timeframe'">
        <itf-period-picker-inline
          :value="value.value"
          value-format="yyyy-MM-dd"
          @input="onFilterChange({ value: $event })"
        />
      </template>
      <template v-else-if="type === 'month'">
        <itf-date-picker-inline
          style="margin: -.5rem"
          start-view="months"
          min-view="months"
          :value="value.value"
          only-calendar
          @input="onFilterChange({ value: $event })"
        />
      </template>
      <template v-else-if="type === 'date'">
        <itf-date-picker-inline
          style="margin: -.5rem"
          :value="value.value"
          :only-calendar="options.calendarOptions && options.calendarOptions.onlyCalendar"
          :max-date="options.calendarOptions && options.calendarOptions.maxDate"
          :min-date="options.calendarOptions && options.calendarOptions.minDate"
          value-format="yyyy-MM-dd"
          @input="onFilterChange({ value: $event })"
        />
      </template>
      <div v-else-if="type === 'facets-list'" style="width: 300px;">
        <filter-facets-list
          :title="options.title"
          :options="options"
          :value="value.value"
          :items="options.items"
          :total="options.total"
          :multiple="options.multiple"
          @input="onFilterChange({ value: $event })"
        />
      </div>
      <div v-else-if="type === 'amount'" style="width: 300px;">
        <filter-amount-range
          :value="value.value"
          :histogram="options.histogram"
          :min="options.min"
          :max="options.max"
          @input="onFilterChange({ value: $event })"
        />
      </div>
    </div>
  </itf-dropdown>
</template>
<style lang="scss">
:root {
  --filter-badge__default-color: #475266;
  --filter-badge__icon-color: #A7AFBB;
  --filter-badge__default-border-color: #0000001A;
  --filter-badge__default-bg-color: transparent;
  --filter-badge__default-bg-color-hover: #1A4A970D;

  --filter-badge__invalid-color: #D83C31;
  --filter-badge__invalid-bg-color: #D83C311A;
  --filter-badge__invalid-bg-color-hover: #D83C3142;

  --filter-badge__selected-color: #1A4A97; // #0d935b;
  --filter-badge__selected-bg-color: #1A4A970D; // #0d935b1A;
  --filter-badge__selected-bg-color-hover: rgba(26, 74, 151, 0.1); // #0d935b42;
  --filter-badge__padding-y: .5rem;
  --filter-badge__padding-x: .75rem;
}
body[data-theme="dark"] {
  --filter-badge__default-border-color: #FFFFFF1A;
  --filter-badge__selected-color: #efd877;
}
.filter-pill {
  align-items: center;
  font-size: 14px;
  line-height: 100%;
  outline: 1px solid var(--filter-badge__default-border-color);
  background-color: var(--filter-badge__default-bg-color);
  display: flex;
  min-height: 2rem;
  transition: 0.1s;

  .icon {
    margin: -2px;
    color: var(--filter-badge__icon-color);
  }
  &:hover {
    background-color: var(--filter-badge__default-bg-color-hover);
    cursor: pointer;
  }
  &.filter-not-default-pill {
    background-color: var(--filter-badge__selected-bg-color);
    outline: 1px solid var(--filter-badge__selected-color);

    .icon { color: var(--filter-badge__selected-color) }
  }
  &.filter-invalid-pill {
    background-color: var(--filter-badge__invalid-bg-color);

    .icon { color: var(--filter-badge__invalid-color) }
  }
  &.filter-pill__default-value {
    padding: var(--filter-badge__padding-y) var(--filter-badge__padding-x);
  }
}
.filter-pill__label {
  //color: var(--filter-badge__default-color);
  padding: var(--filter-badge__padding-y) 0 var(--filter-badge__padding-y) var(--filter-badge__padding-x);
  max-width: 330px;
  text-overflow: ellipsis;
  white-space: nowrap;
  overflow: hidden;
  display: flex;
  gap: .25rem;
  align-items: center;

  &.filter-pill__default-value {
    padding: var(--filter-badge__padding-y) var(--filter-badge__padding-x);
  }
  &.filter-pill__not-default-value {
    color: var(--filter-badge__selected-color);
  }
  &.filter-pill__label-invalid {
    color: var(--filter-badge__invalid-color);
  }
}

.filter-pill__icon {
  padding: 0 calc(var(--filter-badge__padding-x) / 2) 0 calc(var(--filter-badge__padding-x) / 4);

  svg {
    //color: var(--filter-badge__default-color);
  }
  &.filter-pill__icon-invalid svg {
    color: var(--filter-badge__invalid-color);
  }
  &.filter-pill__icon-not-default-value svg {
    color: var(--filter-badge__selected-color);
  }
}
</style>
<script>
import { Vue, Model, Prop, Component } from 'vue-property-decorator';
import itfIcon from '../icon/Icon';
import itfButton from '../button/Button';
import itfDropdown from '../dropdown/Dropdown.vue';
import itfDatePickerInline from '../datepicker/DatePickerInline.vue';
import itfDateRangePickerInline from '../datepicker/DateRangePickerInline.vue';
import itfPeriodPickerInline from '../datepicker/PeriodPickerInline.vue'
import itfTextField from '../text-field/TextField.vue';
import FilterFacetsList from './FilterFacetsList';
import FilterAmountRange from './FilterAmountRange.vue';

export default @Component({
  components: {
    itfIcon,
    itfButton,
    itfDropdown,
    itfDatePickerInline,
    itfDateRangePickerInline,
    itfPeriodPickerInline,
    itfTextField,
    FilterFacetsList,
    FilterAmountRange
  }
})
class FilterBadge extends Vue {
  @Model('input') value;
  @Prop(Boolean) isDefault;
  @Prop(Boolean) isInvalid;
  @Prop() text;
  @Prop() type;
  @Prop() icon;
  @Prop() options;

  resetValue() {
    this.onFilterChange({ ...this.options.defaultValue });
    this.$refs.dropdown.hide();
  }

  onFilterChange(value) {
    this.$emit('input', value);
    this.$emit('change', value);
    if (!['facets-list', 'amount'].includes(this.type)) {
      this.$refs.dropdown.hide();
    }
  }
}
</script>
