<template>
  <span>
    <TfPdfExport
      :button-size="buttonSize"
      :button-title="buttonTitle"
      :is-disabled="!dates.length"
      :filename="`quote-edits_${projectId}.pdf`"
    >
      <ExportHeader
        :employer-name="employerName"
        :filters="filters"
        title="Quote Edits History"
      />
      <QuoteEditsExportRow
        v-for="(left, index) in edits.left"
        :key="index"
        :left-edit="left"
        :right-edit="edits.right[index]"
      />
    </TfPdfExport>
  </span>
</template>

<script>
  import QuoteEditsExportRow from './Row';
  import ExportHeader from '../Header';

  /**
   * Quote Edits Export
   *
   * @vuedoc
   * @exports components/TfPdfExport/QuoteEdits/index
   * @category Components
   */
  export default {
    name: 'TfQuoteEditsExport',
    components: {
      QuoteEditsExportRow,
      ExportHeader,
    },
    props: {
      buttonSize: {
        type: String,
        default: 'text-icon',
      },
      buttonTitle: {
        type: String,
        default: 'export',
      },
      dates: {
        type: Array,
        default: () => [],
      },
      employerName: {
        type: String,
        default: null,
      },
      filters: {
        type: Object,
        default: () => ({}),
      },
      projectId: {
        type: Number,
        default: null,
      },
    },

    computed: {
      /**
       * Returns a version of the quote edits structure split across columns
       *
       * @returns {Array}
       */
      edits() {
        const columnEdits = {
          left: [],
          right: [],
        };

        this.dates
          .reduce((edits, date) => edits.concat(date), [])
          .forEach((edit, index) => {
            columnEdits[index % 2 ? 'right' : 'left'].push({
              ...edit,
              position: index,
            });
          });

        return columnEdits;
      },
    },
  };
</script>
