<template>
  <div class="report-container">
    <div class="box-gap">
      <div class="report-header">{{ shorten(report.supplier.name, 35) }}</div>
    </div>
    <div class="report-chart">
      <report-chart
          title=""
          :mek_a="report.costs.mek_a.total"
          :logistics_costs="report.risk.mek_b.total-report.costs.mek_a.total"
          :chance_cost="report.risk.opportunity_scenario.total"
          :risk_cost="report.risk.risk_scenario.total"
          :scale="chartScale"
      ></report-chart>
    </div>

    <div class="box-gap">
      <collapsible-box :is-collapsable="false" variant="border" title="Overview" size="m" :stretch-content="true">
        <div class="report-content-container--3-col">

          <div class="report-content-row">
            <div class="report-content-row-highlight">MEK B</div>
            <div class="report-content-data-cell report-content-row-highlight">{{ report.risk.mek_b.total.toFixed(2) }} €</div>
            <div class="report-content-data-cell"></div>
          </div>

          <div class="report-content-row">
            <div>Opportunity scenario</div>
            <div class="report-content-data-cell">{{ report.risk.opportunity_scenario.total.toFixed(2) }} €</div>
            <div class="report-content-data-cell">{{
                `${(report.risk.opportunity_scenario.percentage * 100).toFixed(2)} %`
              }}
            </div>
          </div>

          <div class="report-content-row">
            <div>Risk scenario</div>
            <div class="report-content-data-cell">{{ report.risk.risk_scenario.total.toFixed(2) }} €</div>
            <div class="report-content-data-cell">{{ `${(report.risk.risk_scenario.percentage * 100).toFixed(2)} %`}}</div>
          </div>


        </div>
      </collapsible-box>
    </div>
    <div class="box-gap">
      <collapsible-box :is-collapsable="false" variant="border" title="Weighted cost breakdown" size="m"
                       :stretch-content="true">
        <div class="report-content-container--3-col">

          <div class="report-content-row">
            <div></div>
            <div class="report-content-data-header-cell">total [&euro;]</div>
            <div class="report-content-data-header-cell">share [%]</div>
          </div>

          <div class="report-content-row">
            <div>MEK A</div>
            <div class="report-content-data-cell">{{ report.costs.mek_a.total.toFixed(2) }}</div>
            <div class="report-content-data-cell">{{ (report.costs.mek_a.percentage * 100).toFixed(2) }}</div>
          </div>

          <div class="report-content-row">
            <div>FCA fee</div>
            <div class="report-content-data-cell">{{ report.costs.fca_fees.total.toFixed(2) }}</div>
            <div class="report-content-data-cell">{{ (report.costs.fca_fees.percentage * 100).toFixed(2) }}</div>
          </div>

          <div class="report-content-row" v-if="((report.costs.pre_run ?? null) !== null)">
            <div>Pre carriage</div>
            <div class="report-content-data-cell">{{ report.costs.pre_run.total.toFixed(2) }}</div>
            <div class="report-content-data-cell">{{ (report.costs.pre_run.percentage * 100).toFixed(2) }}</div>
          </div>

          <div class="report-content-row" v-if="((report.costs.main_run ?? null) !== null)">
            <div>Main run</div>
            <div class="report-content-data-cell">{{ report.costs.main_run.total.toFixed(2) }}</div>
            <div class="report-content-data-cell">{{ (report.costs.main_run.percentage * 100).toFixed(2) }}</div>
          </div>

          <div class="report-content-row" v-if="((report.costs.post_run ?? null) !== null)">
            <div>Post carriage</div>
            <div class="report-content-data-cell">{{ report.costs.post_run.total.toFixed(2) }}</div>
            <div class="report-content-data-cell">{{ (report.costs.post_run.percentage * 100).toFixed(2) }}</div>
          </div>

          <div class="report-content-row" v-if="((report.costs.d2d ?? null) !== null)">
            <div>Door 2 door costs</div>
            <div class="report-content-data-cell">{{ report.costs.d2d.total.toFixed(2) }}</div>
            <div class="report-content-data-cell">{{ (report.costs.d2d.percentage * 100).toFixed(2) }}</div>
          </div>

          <div class="report-content-row" v-if="((report.costs.transport ?? null) !== null)">
            <div>Transportation costs</div>
            <div class="report-content-data-cell">{{ report.costs.transport.total.toFixed(2) }}</div>
            <div class="report-content-data-cell">{{ (report.costs.transport.percentage * 100).toFixed(2) }}</div>
          </div>

          <div class="report-content-row" v-if="((report.costs.air_freight_cost ?? null) !== null)">
            <div>Air freight costs</div>
            <div class="report-content-data-cell">{{ report.costs.air_freight_cost.total.toFixed(2) }}</div>
            <div class="report-content-data-cell">{{
                (report.costs.air_freight_cost.percentage * 100).toFixed(2)
              }}
            </div>
          </div>


          <div class="report-content-row">
            <div>Custom costs</div>
            <div class="report-content-data-cell">{{ report.costs.custom.total.toFixed(2) }}</div>
            <div class="report-content-data-cell">{{ (report.costs.custom.percentage * 100).toFixed(2) }}</div>
          </div>

          <div class="report-content-row">
            <div>Repackaging</div>
            <div class="report-content-data-cell">{{ report.costs.repacking.total.toFixed(2) }}</div>
            <div class="report-content-data-cell">{{ (report.costs.repacking.percentage * 100).toFixed(2) }}</div>
          </div>

          <div class="report-content-row">
            <div>Handling</div>
            <div class="report-content-data-cell">{{ report.costs.handling.total.toFixed(2) }}</div>
            <div class="report-content-data-cell">{{ (report.costs.handling.percentage * 100).toFixed(2) }}</div>
          </div>

          <div class="report-content-row">
            <div>Disposal costs</div>
            <div class="report-content-data-cell">{{ report.costs.disposal.total.toFixed(2) }}</div>
            <div class="report-content-data-cell">{{ (report.costs.disposal.percentage * 100).toFixed(2) }}</div>
          </div>

          <div class="report-content-row">
            <div>Space costs</div>
            <div class="report-content-data-cell">{{ report.costs.storage.total.toFixed(2) }}</div>
            <div class="report-content-data-cell">{{ (report.costs.storage.percentage * 100).toFixed(2) }}</div>
          </div>

          <div class="report-content-row">
            <div>Capital costs</div>
            <div class="report-content-data-cell">{{ report.costs.capital.total.toFixed(2) }}</div>
            <div class="report-content-data-cell">{{ (report.costs.capital.percentage * 100).toFixed(2) }}</div>
          </div>


        </div>
      </collapsible-box>
    </div>


    <div class="box-gap" :key="premise.id" v-for="(premise, idx) in report.premises">

      <collapsible-box class="report-content-container" variant="border" :title="premise.destination.name"
                       :stretch-content="true" :initially-collapsed="true">
        <div>
          <report-route :sections="premise.sections" :destination="premise.destination"
                        :route-section-scale="routeSectionScale[idx]"></report-route>

          <div class="report-sub-header">General</div>

          <div class="report-content-container--2-col">

            <div class="report-content-row">
              <div>Annual Quantity</div>
              <div class="report-content-data-cell">{{ premise.annual_quantity }}</div>
            </div>

            <div class="report-content-row">
              <div>HS code</div>
              <div class="report-content-data-cell">{{ premise.hs_code }}</div>
            </div>

            <div class="report-content-row">
              <div>Tariff rate</div>
              <div class="report-content-data-cell">{{ (premise.tariff_rate * 100).toFixed(2) }}%</div>
            </div>

            <div class="report-content-row">
              <div>Oversea share</div>
              <div class="report-content-data-cell">{{ (premise.oversea_share * 100).toFixed(2) }}%</div>
            </div>

            <div class="report-content-row" v-if="(premise.air_freight_share ?? null) !== null">
              <div>Airfreight share</div>
              <div class="report-content-data-cell">{{ (premise.air_freight_share * 100).toFixed(2) }}%</div>
            </div>

            <div class="report-content-row">
              <div>Transit time [days]</div>
              <div class="report-content-data-cell">{{ premise.transport_time }}</div>
            </div>

            <div class="report-content-row">
              <div>Safety stock [w-days]</div>
              <div class="report-content-data-cell">{{ premise.safety_stock }}</div>
            </div>

          </div>

          <div class="report-sub-header">Handling unit</div>

          <div class="report-content-container--2-col">

            <div class="report-content-row">
              <div>Dimensions [{{ premise.dimension_unit }}]</div>
              <div class="report-content-data-cell">{{ toFixedDimension(premise.length, premise.dimension_unit) }} x
                {{ toFixedDimension(premise.width, premise.dimension_unit) }} x
                {{ toFixedDimension(premise.height, premise.dimension_unit) }}
              </div>
            </div>

            <div class="report-content-row">
              <div>Weight [{{ premise.weight_unit }}]</div>
              <div class="report-content-data-cell">{{ toFixedWeight(premise.weight, premise.weight_unit) }}</div>
            </div>

            <div class="report-content-row">
              <div>Unit count</div>
              <div class="report-content-data-cell">{{ premise.hu_unit_count }}</div>
            </div>

            <div class="report-content-row">
              <div>Mixed transport</div>
              <div class="report-content-data-cell">{{ premise.mixed ? 'Yes' : 'No' }}</div>
            </div>

          </div>

          <div class="report-sub-header">Container</div>

          <div class="report-content-container--2-col">

            <div class="report-content-row">
              <div>Stacked layers</div>
              <div class="report-content-data-cell">{{ hasMainRun(premise.sections) ? premise.layer : '-' }}</div>
            </div>

            <div class="report-content-row">
              <div>Container unit count</div>
              <div class="report-content-data-cell">
                {{ hasMainRun(premise.sections) ? (premise.unit_count * premise.hu_unit_count) : '-' }}
              </div>
            </div>



            <div class="report-content-row">
              <div>Container type</div>
              <div class="report-content-data-cell">
                {{ hasMainRun(premise.sections) ? getContainerTypeName(premise.container_type) : '-' }}
              </div>
            </div>

            <div class="report-content-row">
              <div>Limiting factor</div>
              <div class="report-content-data-cell">
                {{ hasMainRun(premise.sections) ? premise.weight_exceeded ? 'Weight' : 'Volume' : '-' }}
              </div>
            </div>

          </div>


        </div>
      </collapsible-box>
    </div>
  </div>
</template>

<script>

import ReportChart from "@/components/UI/ReportChart.vue";
import Box from "@/components/UI/Box.vue";
import CollapsibleBox from "@/components/UI/CollapsibleBox.vue";
import ReportRoute from "@/components/UI/ReportRoute.vue";

export default {
  name: "Report",
  components: {ReportRoute, CollapsibleBox, Box, ReportChart},
  computed: {},
  props: {
    report: {
      type: Object,
      required: true
    },
    chartScale: {
      type: Number,
      required: true
    },
    routeSectionScale: {
      type: Array,
      required: true
    }
  },
  methods: {
    hasMainRun(sections) {
      return sections.some(section => section.transport_type === 'SEA' || section.transport_type === 'RAIL');
    },
    shorten(text, length) {
      if (text !== null && text !== undefined && text.length > length) {
        return `${text.substring(0, length - 3)} …`;
      }

      return text;
    },
    getContainerTypeName(text) {
      switch (text) {
        case 'FEU':
          return '40 ft. GP'
        case 'TEU':
          return '20 ft. GP'
        case 'HC':
          return '40 ft. HC'
      }
      return ''
    },
    toFixedDimension(value, unit) {
      if (unit === 'm') {
        return value.toFixed(2);
      } else if (unit === 'cm') {
        return value.toFixed(2);
      } else if (unit === 'mm') {
        return value.toFixed();
      }
    },
    toFixedWeight(value, unit) {
      if (unit === 'kg') {
        return value.toFixed(2);
      } else if (unit === 'g') {
        return value.toFixed(4);
      } else if (unit === 't') {
        return value.toFixed();
      }
    }
  }
}
</script>

<style scoped>

.box-gap {
  padding-left: 0.8rem;
  padding-right: 0.8rem;
}

.report-container {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.report-content-data-cell {
  text-align: right;
}


.report-content-data-cell-highlight {
  background-color: #5AF0B4;
  color: #002F54;
  border-radius: 0.4rem;
  padding: 0.2rem 0.4rem;
  font-weight: 600;

}

.report-content-row-highlight {
  font-weight: 500;
  color: #001D33;
}

.report-content-data-header-cell {
  text-align: right;
  color: #001D33;
}

.report-content-container--2-col {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1rem;
  margin: 1.6rem 0;
  font-size: 1.2rem;
  width: 100%;
}

.report-content-container--3-col {
  display: grid;
  grid-template-columns: 2fr 1fr 1fr;
  gap: 1rem;
  margin-top: 1.6rem;
  font-size: 1.2rem;
}

.report-content-row {
  display: contents;
  color: #6B869C;
}

.report-header {
  font-size: 1.6rem;
  font-weight: 500;
  color: #001D33;
  text-wrap: nowrap;

}

.report-sub-header {
  font-size: 1.4rem;
  font-weight: 500;
  color: #001D33;
  margin-top: 1.6rem;
}

</style>