<template>
  <div>
    <div class="header-container">
      <h2 class="page-header">Reporting</h2>
      <div class="header-controls">
        <basic-button @click="showModal = true" icon="file">Create report</basic-button>
      </div>
    </div>

    <div v-if="loading" class="report-spinner-container">
      <div class="report-spinner">
        <spinner></spinner>
      </div>
    </div>
    <div v-else-if="hasReport">
      <box>
        <report v-for="report in reports" :key="report.id" :report="report"></report>


      </box>
    </div>
    <div v-else class="empty-container">
      <box><span class="space-around">No report selected</span></box>
    </div>


    <modal :state="showModal">
      <select-for-report @close="closeModal"></select-for-report>
    </modal>

  </div>

</template>

<script>

import Modal from "@/components/UI/Modal.vue";
import BasicButton from "@/components/UI/BasicButton.vue";
import SelectForReport from "@/components/layout/report/SelectForReport.vue";
import {mapStores} from "pinia";
import {useReportsStore} from "@/store/reports.js";
import Box from "@/components/UI/Box.vue";
import Spinner from "@/components/UI/Spinner.vue";
import ReportChart from "@/components/UI/ReportChart.vue";
import Report from "@/components/layout/report/Report.vue";

export default {
  name: "Reporting",
  components: {Report, ReportChart, Spinner, Box, SelectForReport, BasicButton, Modal},
  data() {
    return {
      showModal: false,
    }
  },
  computed: {
    ...mapStores(useReportsStore),
    hasReport() {
      return this.reportsStore.reports?.length > 0;
    },
    reports() {
      return this.reportsStore.reports
    },
    loading() {
      return this.reportsStore.loading;
    }
  },
  methods: {
    closeModal(data) {
      console.log("closeModal: ", data.action)
      if (data.action === 'accept') {
        console.log("create report")
        this.reportsStore.fetchReports(data.materialId, data.supplierIds);
      }
      this.showModal = false;
    }
  },
  created() {
    if (!this.hasReport)
      this.showModal = true;
  }
}
</script>


<style scoped>

.space-around {
  margin: 3rem;
}

.header-container {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 1.6rem;
}

.header-controls {
  display: flex;
  gap: 1.6rem;
}


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

.report-spinner-container {
  display: flex;
  align-items: center;
  justify-content: center;
  flex: 1 1 30rem
}

.report-spinner {
  font-size: 1.6rem;
  width: 24rem;
  height: 12rem;
  display: flex;
  justify-content: center;
  align-items: center;
}

</style>