<template>
  <div class="calculation-search-bar-container">
    <div class="search-wrapper">
      <PhMagnifyingGlass :size="32" weight="bold" class="search-icon"/>
      <input
          @input="inputChanged"
          v-model="searchTerm"
          type="text"
          class="search-input"
          placeholder="Search term"
          autocomplete="off"
      >
    </div>
    <checkbox :checked="draft" @checkbox-changed="setDraft">draft</checkbox>
    <checkbox :checked="done" @checkbox-changed="setDone">completed</checkbox>
    <checkbox :checked="archived" @checkbox-changed="setArchived">archived</checkbox>
    <basic-button variant="primary" :showIcon="true" icon="plus" :link="true" to="assistant">New calculation</basic-button>
  </div>
</template>

<script>
import {useDebounceFn} from '@vueuse/core';
import Checkbox from "@/components/UI/Checkbox.vue";
import BasicButton from "@/components/UI/BasicButton.vue";
import Tooltip from "@/components/UI/Tooltip.vue";

export default {
  name: "TheCalculationSearch",
  components: {Tooltip, BasicButton: BasicButton, Checkbox},
  emits: ['executeSearch'],
  data() {
    return {
      debouncedSearch: null,
      searchTerm: null,
      archived: false,
      done: false,
      draft: true,
    }
  },
  created() {
    this.debouncedSearch = useDebounceFn((query) => {
      this.$emit('executeSearch', query)
    }, 500);
  },
  methods: {
    updateQuery() {
      const searchQuery = {
        searchTerm: this.searchTerm,
        archived: this.archived,
        done: this.done,
        draft: this.draft,
      }

      this.debouncedSearch(searchQuery);
    },
    inputChanged() {
      this.updateQuery();
    },
    setArchived(value) {
      this.archived = value;
      this.updateQuery();
    },
    setDone(value) {
      this.done = value;
      this.updateQuery();
    },
    setDraft(value) {
      this.draft = value;
      this.updateQuery();
    }
  }
}
</script>

<style scoped>

.calculation-search-bar-container {
  background: white;
  overflow: hidden;
  padding: 24px;
  display: flex;
  align-items: center;
  gap: 24px;
  flex: 1 1 auto;
}


.search-wrapper {
  display: flex;
  align-items: center;
  background: white;
  border-radius: 0.4rem;
  padding: 0.6rem 1.2rem;
  /* box-shadow: 0 8px 32px rgba(0, 0, 0, 0.1);
  backdrop-filter: blur(10px);*/
  border: 0.2rem solid #E3EDFF;
  transition: all 0.1s ease;
  flex: 1 1 auto;
}

.search-wrapper:hover {
  background: #EEF4FF;
  border: 0.2rem solid #8DB3FE;
  /*transform: translateY(2px);*/
  transform: scale(1.01);
}

/*.search-wrapper:focus-within {
//  background: #EEF4FF;
//  border: 2px solid #8DB3FE;
//} */

.search-icon {
  width: 1.8rem;
  height: 1.8rem;
  margin-right: 1.2rem;
  color: #6B869C;
  flex-shrink: 0;
}

.search-input {
  flex: 1 1 auto;
  border: none;
  outline: none;
  font-size: 1.4rem;
  color: #002F54;
  background: transparent;
  font-weight: 400;
}

.search-input::placeholder {
  color: #6B869C;
  font-weight: 400;
}

</style>