<template>
  <div>

    <h2 class="page-header">My calculations</h2>


    <div class="calculation-list-container">

      <the-calculation-search @execute-search="executeSearch"/>

      <!-- Header -->
      <div class="calculation-list-header">
        <div>
          <checkbox @checkbox-changed="updateCheckBoxes" :checked="overallCheck"></checkbox>
        </div>
        <div>Material</div>
        <div>Supplier</div>
        <div>Status</div>
        <div>Action</div>
      </div>
      <transition name="list-container" mode="out-in">
        <div v-if="premiseStore.showData">
          <calculation-list-item v-for="premise in premiseStore.premises" :key="premise.id" :id="premise.id"
                                 :checked="premise.checked"></calculation-list-item>
        </div>
        <div v-else-if="premiseStore.showEmpty" class="empty-container">
          <span class="space-around">No Calculations found.</span>
        </div>

        <div v-else class="spinner-container">
          <spinner class="space-around"></spinner>
        </div>
      </transition>
    </div>


    <list-edit :show="showListEdit" @action="handleMultiselectAction"></list-edit>


  </div>


</template>


<script>

import TheCalculationSearch from "@/components/layout/calculation/TheCalculationSearch.vue";
import BasicBadge from "@/components/UI/BasicBadge.vue";
import IconButton from "@/components/UI/IconButton.vue";
import Flag from "@/components/UI/Flag.vue";
import NotificationBar from "@/components/UI/NotificationBar.vue";
import Checkbox from "@/components/UI/Checkbox.vue";
import CalculationListItem from "@/components/layout/calculation/CalculationListItem.vue";
import {usePremiseStore} from "@/store/premise.js";
import {mapStores} from "pinia";
import Spinner from "@/components/UI/Spinner.vue";
import ListEdit from "@/components/UI/ListEdit.vue";
import {UrlSafeBase64} from "@/common.js";

export default {
  name: "Calculation",
  components: {
    ListEdit,
    Spinner,
    CalculationListItem, Checkbox, NotificationBar, IconButton, BasicBadge, TheCalculationSearch, Flag
  },
  computed: {
    ...mapStores(usePremiseStore),
    showListEdit() {
      return usePremiseStore().premises.some(p => p.checked === true);
    }
  },
  data() {
    return {
      overallCheck: false
    }
  },
  created() {
    this.premiseStore.setQuery({});
  },
  methods: {
    handleMultiselectAction(action) {
      if (action === "delete") {

      } else if (action === "edit") {
        const ids = this.premiseStore.premises.filter(p => p.checked === true).map(p => p.id);

        if (ids.length === 1) {
          this.$router.push({name: "edit", params: {id: ids[0]}});
        } else {
          this.$router.push({name: "bulk", params: {ids: new UrlSafeBase64().encodeIds(ids)}});
        }

      } else if (action === "archive") {

      }
    },
    updateCheckBoxes(checked) {
      this.overallCheck = checked;
      this.premiseStore.premises.forEach(p => {
        p.checked = checked;
      })
    },
    executeSearch(query) {
      this.overallCheck = false;
      this.premiseStore.setQuery(query);
    }
  }
}
</script>

<style scoped>

.space-around {
  margin: 3rem;
}

/* Container Animation */
.list-container-enter-active, .list-container-leave-active {
  transition: all 0.3s ease;
}

.list-container-enter-from, .list-container-leave-to {
  opacity: 0;
}

.list-edit-enter-active {
  transition: all 0.1s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

.list-edit-leave-active {
  transition: all 0.1s ease-in;
}

.list-edit-enter-from {
  transform: translateY(-30px) scale(0.8);
  opacity: 0;
}

.list-edit-leave-to {
  transform: translateY(-30px) scale(0.8);
  opacity: 0;
}

.calculation-list-edit-container {
  display: flex;
  justify-content: center;
}

.spinner-container {
  display: flex;
  justify-content: center;
  align-items: center;
}

.empty-container {
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 1.6rem;
}

.errorCode {
  font-weight: 600;
}

.calculation-search-box {
  margin-top: 3rem;
  display: grid;
  gap: 0.8rem;
  grid-template-columns: 5rem 1fr 1fr 1fr 1fr;
}

.calculation-search-header {
  font-weight: 400;
  font-size: 1.4rem;
  color: #6B869C;
  text-transform: uppercase;
}

.calculation-list-container {
  background: white;
  border-radius: 1.2rem;
  box-shadow: 0 0.4rem 0.6rem -0.1rem rgba(0, 0, 0, 0.1);
  overflow: hidden;
  margin-top: 3rem;
  margin-bottom: 3rem;

}

.calculation-list-header {
  display: grid;
  grid-template-columns: 6rem 1fr 2fr 14rem 10rem;
  gap: 1.6rem;
  padding: 2.4rem;
  background-color: #ffffff;
  border-bottom: 1px solid rgba(107, 134, 156, 0.2);
  font-weight: 500;
  font-size: 1.4rem;
  color: #6B869C;
  text-transform: uppercase;
  letter-spacing: 0.08rem;
}

@media (max-width: 768px) {
  .calculation-list-header {
    display: none;
    grid-template-columns: 1fr;
    gap: 0.8rem;
  }
}


</style>