<template>
  <div>
    <div class="header-container">
      <h2 class="page-header page-header-align">Reporting
        <div class="page-header-badges">
          <basic-badge variant="primary" v-if="period">{{ period }}</basic-badge>
          <basic-badge variant="secondary" v-if="partNumber">{{ partNumber }}</basic-badge>
        </div>
      </h2>
      <div class="header-controls">
        <basic-button @click="createReport" icon="file">Create report</basic-button>
        <basic-button :disabled="!hasReport" variant="secondary" @click="downloadReport" icon="Download">Export
        </basic-button>
      </div>
    </div>

    <div v-if="showComparableWarning && hasReport" class="destination-differ-warning">
      <ph-warning size="18px"></ph-warning>
      Reports may not be comparable! Calculations differ in destinations and/or their annual quantities.
    </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" :chart-scale="chartScale"
                :route-section-scale="routeSectionScale"></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";
import BasicBadge from "@/components/UI/BasicBadge.vue";
import {buildDate} from "@/common.js";

export default {
  name: "Reporting",
  components: {BasicBadge, Report, ReportChart, Spinner, Box, SelectForReport, BasicButton, Modal},
  data() {
    return {
      showModal: false,
    }
  },
  computed: {
    ...mapStores(useReportsStore),
    showComparableWarning() {
      return this.reportsStore.getShowComparableWarning;
    },
    hasReport() {
      return this.reportsStore.reports?.length > 0;
    },
    routeSectionScale() {
      const reports = this.reportsStore.reports;
      const scale = new Array(reports.map(r => r.premises.length).reduce((max, n) => Math.max(n, max), 0)).fill(0);

      for (let i = 0; i < scale.length; i++) {
        for (const report of reports) {
          if(report.premises.length > i) {
            scale[i] = Math.max(scale[i], report.premises[i].sections.length);
          }
        }
      }

      return scale.map(s => (s+1)*4);
    },
    reports() {
      return this.reportsStore.reports
    },
    loading() {
      return this.reportsStore.loading;
    },
    chartScale() {
      return this.reportsStore.getChartScale;
    },
    partNumber() {
      if (!this.hasReport) return null;
      return this.reportsStore.reports[0].material.part_number;
    },
    period() {
      if (!this.hasReport) return null;
      const start = this.reportsStore.reports[0].start_date;
      const end = this.reportsStore.reports[0].end_date;

      if (end === null) {
        return `Validity period: since ${this.buildDate(start)}`;
      }

      return `Validity period: ${this.buildDate(start)} – ${this.buildDate(end)}`;
    }
  },
  methods: {
    downloadReport() {
      this.reportsStore.downloadReport();
    },
    createReport() {
      this.showModal = true;
    },
    buildDate(date) {
      return buildDate(date, false);
    },
    async closeModal(data) {
      if (data.action === 'accept') {
        await this.reportsStore.fetchReports(data.materialId, data.supplierIds, data.userSupplierIds);
      }
      this.showModal = false;
    }
  },
  created() {

    this.reportsStore.reset();

  }
}
</script>


<style scoped>

.page-header-align {
  display: flex;
  align-items: center;
  gap: 1.6rem;
}

.page-header-badges {
  display: flex;
  align-items: center;
  gap: 0.8rem;
}

.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: 400;
}

.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;
}

.destination-differ-warning {
  display: flex;
  align-items: center;
  font-size: 1.4rem;
  gap: 1.6rem;
  background-color: #c3cfdf;
  color: #002F54;
  border-radius: 0.8rem;
  padding: 1.6rem;
  margin-bottom: 1.6rem;
}


</style>