<template>
  <itf-popover :visible.sync="value" ref="popover" :trigger="trigger" custom-class="nopadding" :placement="placement">
    <template #activator="{ on }">
      <slot name="activator" :on="on"></slot>
    </template>

    <div class="modal-body py-2 px-3 text-center itf-select-popover">
      <div class="d-flex align-items-center justify-content-between">
        <div class="mb-0" v-if="title" v-html="title"></div>

        <itf-button v-if="removable" small secondary>
          Remove
        </itf-button>
      </div>

      <div class="d-flex py-2">
        <itf-text-field
          class="flex-grow-1 me-2"
          v-model="search"
          placeholder="Filter"
          prepend-icon="search"
          clearable
        />

        <itf-button v-tooltip="$t('random')">
          <itf-icon name="shuffle" />
        </itf-button>
      </div>

      <div class="itf-select-popover__scroll text-start">
        <swatches
          background-color="transparent"
          :value="value"
          :swatches="colors"
          shapes="circles"
          inline
          swatch-size="24"
          show-border
          @input="$emit('input', $event)"
        />
      </div>
      <slot>
      </slot>
    </div>
  </itf-popover>
</template>
<style lang="scss">
  .itf-select-popover {
    width: 280px;
    min-width: 180px;
    max-width: calc(100vw - 24px);
    height: 356px;
    max-height: 70vh;
    overflow: hidden;
    display: flex;
    flex-direction: column;

    &__scroll {
      overflow: hidden auto;
      flex-grow: 1;
    }
  }
</style>
<script>
import { Vue, Component, Prop, PropSync } from 'vue-property-decorator';
import itfPopover from './Popover';
import itfIcon from '../icon/Icon';
import iconsList from '../icon/icons';
import itfButton from '../button/Button';
import itfTextField from '../text-field/TextField.vue';
import tooltip from '../../directives/tooltip';
import Swatches from 'vue-swatches';
import 'vue-swatches/dist/vue-swatches.css';

const RECENT_ITEMS_KEY = 'itfSelectPopoverRecent';

export default @Component({
  name: 'itfSelectPopover',
  directives: {
    tooltip
  },
  components: {
    itfIcon,
    itfPopover,
    itfButton,
    itfTextField,
    Swatches
  },
})
class itfSelectPopover extends Vue {
  @PropSync('visible') value;
  @Prop({ type: String, default: '' }) title;
  @Prop({ type: Boolean, default: '' }) removable;
  @Prop({ type: String, default: 'bottom', validator: (value) => ['bottom', 'left', 'right', 'top'].includes(value) }) placement;
  @Prop({ type: String, default: 'click', validator: (value) => ['click', 'focus', 'hover', 'manual'].includes(value) }) trigger;

  search = '';
  recentIcons = [];

  colors = [
    ['#FFFFFF', '#DDE6E8', '#BDC3C8', '#E84B3C', '#F39C19', '#F2C511', '#27AF60', '#3398DB', '#8E43AD']
  ];

  created() {
    this.recentIcons = this.getRecentIcons();
  }

  get iconsList() {
    return Object.keys(iconsList).filter((icon) => icon.includes(this.search.toLowerCase()));
  }

  onSelectIcon(icon) {
    this.search = '';
    this.$emit('input', icon);
    this.$refs.popover.hide();

    const icons = this.getRecentIcons();
    icons.unshift(icon);
    this.recentIcons = [...new Set(icons.slice(0, 14))];
    localStorage.setItem(RECENT_ITEMS_KEY, JSON.stringify(this.recentIcons));
  }

  getRecentIcons() {
    return localStorage.getItem(RECENT_ITEMS_KEY) ? JSON.parse(localStorage.getItem(RECENT_ITEMS_KEY)) : [];
  }
}
</script>
