<template>
  <div class="demo-page">
    <div class="flex">
      <div id="example-container">
        <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>
      <div id="customization-container">
        <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,
  } from '@/factories/factories';

  const userInfo = FactoryUserInfo.getBrokerUserInfo();

  export default {
    name: 'Comments',
    data: () => ({
      comments: FactoryProjectComments.getProjectComments(),
      options: {
        showRecipient: {
          value: true,
          label: 'Show comment recipients',
          options: [true, false],
        },
      },
      userInfo,
    }),
    computed: {
      /**
       * A user object to pass to our comments
       *
       * @returns {object}
       */
      commentUserInfo() {
        return {
          firstName: userInfo.firstName,
          lastName: userInfo.lastName,
          organization: 'threeflow',
          type: 'broker',
        };
      },
      /**
       * Sort our comments
       *
       * @returns {Array}
       */
      sortedComments() {
        // eslint-disable-next-line vue/no-side-effects-in-computed-properties
        return this.$TF.Formatting.sortObjects(
          this.comments,
          'created_at',
        );
      },
      /**
       * Grab a list of documents form the Documents Factory
       *
       * @returns {Array}
       */
      documents() {
        let documents = [];

        if (this.options.showRecipient.value) {
          documents = [FactoryDocument.getDocument()];
        }

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

<style scoped lang="scss">
  $width: 400px;

  #customization-container {
    position: fixed;
    top: 100px;
    right: 0;
    width: $width;
  }

  #example-container {
    padding-right: $width;
  }
</style>
