<template>
  <div class="demo-page">
    <h1>Client-side generated PDF Exports</h1>
    <div class="flex">
      <div>
        <template v-if="options.type.value === 'Basic'">
          <h2>Custom Content Example</h2>
          <TfPdfExport
            button-title="Export basic example"
            :button-size="options.buttonSize.value"
            :filename="`custom-example.pdf`"
          >
            <BasicExportExample />
          </TfPdfExport>
          <div class="rendered-example">
            <BasicExportExample />
          </div>
        </template>
        <template v-if="options.type.value === 'Quote Edits'">
          <h2>Quote Edits</h2>
          <TfQuoteEditsExport
            :button-size="options.buttonSize.value"
            :employer-name="employerName"
            :dates="dates"
            :filters="filters"
            :project-id="projectId"
            button-title="Export Quote Edits"
          />
          <div class="rendered-example">
            <ul>
              <AppQuoteEditItem
                v-for="date in dates"
                :key="date.id"
                :item="date"
                :broker="true"
              />
            </ul>
          </div>
        </template>
        <template v-if="options.type.value === 'Comments'">
          <h2>Comments</h2>
          <TfCommentsExport
            :button-size="options.buttonSize.value"
            :comments="sortedComments"
            :documents="documents"
            :employer-name="employerName"
            :filters="filters"
            :project-id="projectId"
            :user-info="commentUserInfo"
            button-title="Export Comments"
          />
          <div class="rendered-example">
            <!-- <ul> -->
            <comment
              v-for="comment in sortedComments"
              :key="comment.id"
              :documents="documents"
              :user-info="commentUserInfo"
              :project-id="123"
              :broker="userInfo.broker"
              :comment="comment"
              application-namespace="example"
            />
            <!-- </ul> -->
          </div>
        </template>
      </div>
      <div id="customizations">
        <ElForm label-position="top">
          <h3>Customizations</h3>
          <ElFormItem
            v-for="formGroup in options"
            :key="formGroup.label"
            :label="`${formGroup.label} ${formGroup.prop ? '(prop)' : ''}`"
            size="medium"
          >
            <ElRadioGroup
              v-model="formGroup.value"
              size="small"
            >
              <ElRadioButton
                v-for="label in formGroup.options"
                :key="label"
                :label="label"
              />
            </ElRadioGroup>
          </ElFormItem>
        </ElForm>
      </div>
    </div>
  </div>
</template>

<script>
  import {
    FactoryDocument,
    FactoryProjectComments,
    FactoryUserInfo,
    FactoryProjectHistory,
  } from '@/factories/factories';
  import BasicExportExample from './BasicExportExample';

  export default {
    name: 'PdfExportsExample',
    components: { BasicExportExample },
    data: () => ({
      comments: FactoryProjectComments.getProjectComments(),
      dates: [
        FactoryProjectHistory.getProjectHistoryItem(),
        FactoryProjectHistory.getProjectHistoryItem({
          root: {
            after_value: '99',
          },
        }),
        FactoryProjectHistory.getProjectHistoryItem({
          root: {
            before_value: '11',
            after_value: '78',
          },
        }),
      ],
      documents: [FactoryDocument.getDocument()],
      employerName: 'WatchTower Technologies',
      options: {
        type: {
          value: 'Basic',
          label: 'PDF Export type',
          options: ['Basic', 'Quote Edits', 'Comments'],
        },
        buttonSize: {
          value: 'text-icon',
          label: 'Button Size ("text-icon" is default)',
          props: true,
          options: ['text-icon', 'primary'],
        },
        filters: {
          value: false,
          label: 'Include filters',
          options: [false, true],
        },
      },
      projectId: 345,
      userInfo: FactoryUserInfo.getBrokerUserInfo(),
    }),

    computed: {
      /**
       * Returns an object to pass as the  the `userInfo` prop in the comments for the comments.
       *
       * @returns {object}
       */
      commentUserInfo() {
        return {
          firstName: this.userInfo.firstName,
          lastName: this.userInfo.lastName,
          organization: 'threeflow',
          type: 'broker',
        };
      },

      /**
       * Evaluates options.filters.value to return the `filters` prop in the PDF examples.
       *
       * @returns {object}
       */
      filters() {
        return this.options.filters.value
          ? {
            carriers: ['Guardian', 'UNUM'],
            products: ['Stop Loss'],
          }
          : {};
      },

      /**
       * Returans Sorts the comments by descending order for the comments example.
       *
       * @returns {Array}
       */
      sortedComments() {
        // eslint-disable-next-line vue/no-side-effects-in-computed-properties
        return this.$TF.Formatting.sortObjects(
          this.comments,
          'created_at',
          'desc',
        );
      },
    },
  };
</script>

<style lang="scss" scoped>
  .flex {
    display: flex;
    justify-content: space-between;

    > div {
      flex: 1;
    }
  }

  .rendered-example {
    margin-top: 20px;
  }

  .h2 {
    margin: 20px 0;
  }

  #customizations {
    flex: 0 400px;
    padding-left: 50px;
  }
</style>
