<template>
  <div>
    <div :class="$style.contentMultiSlect">
      <div :class="$style.inputSearch">
        <input
          type="text"
          v-bind:readonly="isReadOnly"
          autocomplete="off"
          placeholder="Wtgs..."
          v-model="selectedSpace"
          @click="showListsSearch = !showListsSearch"
        />
        <small :class="$style.leyend" v-if="selected.length - 6 >= 1"
          >{{ selected.length - 6 }} más</small
        >
      </div>

      <transition name="multiselect">

      <ul :class="$style.listsOptions" v-if="showListsSearch">
        <div :class="$style.searchs" v-if="visibilitySearch">
          <input
            type="text"
            placeholder="Busqueda Aerogeneradores"
            v-model="searchQuery"
          />
        </div>
        <div :class="$style.allItems" v-if="resultQuery.length <= 0 === false">
          <input
            type="checkbox"
            id="todos"
            value="todos"
            name="todos"
            @click="checkAll()"
            v-model="isCheckAll"
            @change="dispatchListsSelected"
          />
          <label for="todos">Todos</label>
        </div>

        <li v-for="(option, index) in (options, resultQuery)" :key="index">
          <input
            type="checkbox"
            :id="option"
            :value="option"
            :name="option"
            v-model="selected"
            @change="dispatchListsSelected"
          />
          <label :for="option">{{ option.label }}</label>
        </li>
        <div>
          <small v-if="resultQuery.length <= 0">Sin resultados</small>
        </div>
        <div>
          <button @click="showListsSearch = !true">Cerrar</button>
        </div>
      </ul>
      </transition>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      isReadOnly: true,
      selected: [],
      selectedSpace: [],
      isCheckAll: false,
      searchQuery: "",
      showListsSearch: true,
    };
  },
  props: {
    options: {
      type: Array,
      required: true
    },
    visibilitySearch: {
      default: true,
    },
  },
  methods: {
    openLists() {
      this.showListsSearch = !this.showListsSearch;
    },
    dispatchListsSelected() {
      this.$emit("sending-selected", this.selected);
      if (this.selected.length === 0) {
        this.isCheckAll = false;
      }

      const selectedData = this.selected;
      this.selectedSpace = selectedData.join(", ");
    },
    checkAll() {
      this.isCheckAll = !this.isCheckAll;
      this.selected = [];
      if (this.isCheckAll) {
        for (var key in this.options) {
          this.selected.push(this.options[key] + "");
        }
      }
    },
  },
  computed: {
    resultQuery() {
      if (this.searchQuery) {
        return this.options.filter((option) => {
          return this.searchQuery
            .toLowerCase()
            .split(" ")
            .every((v) => option.toLowerCase().includes(v));
        });
      } else {
        return this.options;
      }
    },
  },
};
</script>


<style lang="css">
.multiselect {
  opacity: 1;
  transition: all 0.5s;
  transform: translateY(0);
}

.multiselect-leave,
.multiselect-enter {
  opacity: 0;
  transform: translateY(-10px);
}
</style>

<style lang="scss" module>
@import '@/assets/custom/main.scss';
.contentMultiSlect {
  background-color: rgb(255, 255, 255);
  position: relative;
  max-width: 380px;
  margin-left: 20px;

  .inputSearch {
    input[type="text"] {
      display: block;
      width: 99%;
      border: 1px solid $color-border;
      outline: none;
      height: calc(1.5em + 0.75rem + 2px);
      border-radius: 3px;
      font-size: 14px;
      line-height: 14px;
      overflow: hidden;
      white-space: nowrap;
      text-overflow: ellipsis;
    }

    .leyend {
      border-radius: 30px;
      position: absolute;
      background-color: $color-base-primary;
      top: 8px;
      right: 10px;
      padding: 2px 10px;
      color: #ffffff;
    }
  }

  .searchs {
    input[type="text"] {
      display: block;
      width: 90%;
      border: 1px solid $color-border;
      margin: 10px 20px;
border-radius: 3px;
      outline: none;
      height: calc(1.5em + 0.75rem + 2px);
      font-size: 14px;
      line-height: 14px;
    }
  }

  .listsOptions {
    border-bottom: 1px solid $color-border;
    border-left: 1px solid $color-border;
    border-right: 1px solid $color-border;
    position: absolute;
    width: 100%;
    list-style: none;
    margin: 0;
    padding: 0;
    box-shadow: 0 15px 30px 10px rgba(0, 0, 0, 0.08);
    transition: all 0.2s ease-in-out;
    max-height: 300px;
    overflow: auto;

    li {
      border-bottom: 1px solid $color-border;
      background-color: #ffffff;
      padding: 9px 10px;

      font-size: 14px;
      transition: all ease 0.3s;

      &:hover {
        cursor: pointer;
        color: $color-base-primary;
        background-color: #f6f6f6;
      }

      label {
        @extend .labelAlign;
      }

      @extend .styleInputCheck, .alignAerosEntryLists;
    }
  }

  .allItems {
    padding: 9px 10px;
    border-top: 1px solid $color-border;
    border-bottom: 1px solid $color-border;
    @extend .styleInputCheck, .alignAerosEntryLists;

    label {
      @extend .labelAlign;
    }
  }

  .styleInputCheck {
    input[type="checkbox"]:focus {
      outline: 5px auto -webkit-focus-ring-color;
      outline-offset: -2px;
      outline: none;
    }

    input[type="checkbox"] {
      position: relative;
      width: 1.5em;
      height: 1.5em;
      color: black;
      border: 1px solid $color-border;
      border-radius: 3px;
      appearance: none;
      outline: 0;
      cursor: pointer;
      transition: background 175ms cubic-bezier(0.1, 0.1, 0.25, 1);
      &::before {
        outline: none;
        position: absolute;
        content: "";
        display: block;
        top: 2px;
        left: 5px;
        width: 5px;
        height: 9px;
        border-style: solid;
        border-color: white;
        border-width: 0 2px 2px 0;
        transform: rotate(45deg);
        opacity: 0;
      }
      &:checked {
        color: white;
        border-color: $color-base-primary;
        background: $color-base-primary;
        outline: none;
        &::before {
          opacity: 1;
        }
        ~ label::before {
          clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%);
        }
      }
    }
  }

  .labelAlign {
    margin-left: 10px;
    font-size: 14px;
  }

  .alignAerosEntryLists {
    display: flex;
    align-items: center;
    flex-direction: row;
    justify-content: flex-start;
  }
}
</style>