<template>
  <div class="demo-page">
    <h2>formatNumber()</h2>
    <div class="flex">
      <div>
        <h3>Currency</h3>
        <p>
          <strong>
            amount: 1234.56,<br>
            prepend: $,<br>
            decimals: 0
          </strong><br>
          {{ Formatting.formatNumber(1234.56, '$', '', 0) }}
        </p>
        <p>
          <strong>
            amount: 1234567890,<br>
            prepend: $,<br>
            decimals: 0
          </strong><br>
          {{ Formatting.formatNumber(1234567890, '$', '', 0) }}
        </p>
        <p>
          <strong>
            amount: 1234.56,<br>
            prepend: $,<br>
            decimals: 0
          </strong><br>
          {{ Formatting.formatNumber(1234.56, '$', '', 2) }}
        </p>
        <p>
          <strong>
            amount: 0.03,<br>
            prepend: $,<br>
            decimals: 0
          </strong><br>
          {{ Formatting.formatNumber(0.03, '$', '', 3) }}
        </p>
        <p>
          <strong>
            amount: 1234.56,<br>
            prepend: £,<br>
            decimals: 0
          </strong><br>
          {{ Formatting.formatNumber(1234.56, '£', '', 0) }}
        </p>
      </div>
      <div>
        <h3>Percentages</h3>
        <p>
          <strong>
            amount: 25.34 <br>
            append: %,<br>
            decimals: 1
          </strong><br>
          {{ Formatting.formatNumber(25.34, '', '%', 1) }}
        </p>
        <p>
          <strong>
            amount: -8.64 <br>
            append: %,<br>
            decimals: 2
          </strong><br>
          {{ Formatting.formatNumber(-8.64, '', '%', 2) }}
        </p>
        <p>
          <strong>
            amount: -17392.34 <br>
            append: %,<br>
            decimals: 2
          </strong><br>
          {{ Formatting.formatNumber(-17392.34, '', '%', 2) }}
        </p>
        <p>
          <strong>
            amount: 20 <br>
            append: %,<br>
            decimals: 2
          </strong><br>
          {{ Formatting.formatNumber(20, '', '%', 2) }}
        </p>
        <p>
          <strong>
            amount: 20 <br>
            append: %,<br>
            decimals: 2<br>
            showZeroes: false
          </strong><br>
          {{ Formatting.formatNumber(20, '', '%', 2, false) }}
        </p>
        <p>
          <strong>
            amount: 20.1 <br>
            append: %,<br>
            decimals: 2
          </strong><br>
          {{ Formatting.formatNumber(20.1, '', '%', 2) }}
        </p>
        <p>
          <strong>
            amount: 20.1 <br>
            append: %,<br>
            decimals: 2<br>
            showZeroes: false
          </strong><br>
          {{ Formatting.formatNumber(20.1, '', '%', 2, false) }}
        </p>
      </div>
    </div>

    <h2>sortObjects()</h2>
    <div class="flex">
      <div>
        <h3>Original Numbers</h3>
        <ul>
          <li
            v-for="num in numbers"
            :key="num.position"
            v-text="num.position"
          />
        </ul>
      </div>
      <div>
        <h3>Sorted Numbers</h3>
        <ul>
          <li
            v-for="num in sortedNumbers"
            :key="num.position"
            v-text="num.position"
          />
        </ul>
      </div>
    </div>
    <div class="flex">
      <div>
        <h3>Original Names</h3>
        <ul>
          <li
            v-for="obj in names"
            :key="obj.name"
            v-text="obj.name"
          />
        </ul>
      </div>
      <div>
        <h3>Sorted Names</h3>
        <ul>
          <li
            v-for="obj in sortedNames"
            :key="obj.name"
            v-text="obj.name"
          />
        </ul>
      </div>
    </div>

    <div class="flex">
      <div>
        <h3>Original Labels</h3>
        <ul>
          <li
            v-for="obj in labels"
            :key="obj.label"
            v-text="obj.label"
          />
        </ul>
      </div>
      <div>
        <h3>Sorted Labels</h3>
        <ul>
          <li
            v-for="obj in sortedLabels"
            :key="obj.label"
            v-text="obj.label"
          />
        </ul>
      </div>
    </div>

    <h1>Dates</h1>
    <h2>formatDateAndTime()</h2>
    <div class="flex">
      <div>
        <h3>Input</h3>
        <p
          v-for="string in dataSets.formatDateAndTime"
          :key="string"
        >
          <template v-if="typeof string === 'string'">
            {{ string || '""' }}
          </template>
          <pre
            v-else
            v-text="'null'"
          />
        </p>
      </div>
      <div>
        <h3>Output</h3>
        <p
          v-for="string in dataSets.formatDateAndTime"
          :key="string"
        >
          {{ DatesUtils.formatDateAndTime(string) }}
        </p>
      </div>
    </div>
    <h2>formatSimpleDate()</h2>
    <div class="flex">
      <div>
        <h3>Input</h3>
        <p
          v-for="string in dataSets.simpleDate"
          :key="string"
        >
          <template v-if="typeof string === 'string'">
            {{ string || '""' }}
          </template>
          <pre
            v-else
            v-text="'null'"
          />
        </p>
      </div>
      <div>
        <h3>Output</h3>
        <p
          v-for="string in dataSets.simpleDate"
          :key="string"
        >
          {{ DatesUtils.formatSimpleDate(string) }}
        </p>
      </div>
    </div>

    <h2>arrayToObject()</h2>
    <div class="flex">
      <div>
        <h3>Original Array</h3>
        <p>w/ default key ('id')</p>
        <pre>{{ array }}</pre>
      </div>
      <div>
        <h3>New Object</h3>
        <p>this.$TF.Formatting.arrayToObject(this.array)</p>
        <pre>{{ Formatting.arrayToObject(array) }}</pre>
      </div>
    </div>
    <div class="flex">
      <div>
        <h3>Original Array</h3>
        <p>w/ custom key ('name')</p>
        <pre>{{ names }}</pre>
      </div>
      <div>
        <h3>New Object</h3>
        <p>this.$TF.Formatting.arrayToObject(this.names, 'name')</p>
        <pre>{{ Formatting.arrayToObject(names, 'name') }}</pre>
      </div>
    </div>
  </div>
</template>

<script>
  export default {
    data: (vm) => ({
      array: [
        { name: 'Hilda Hippo', id: 1 },
        { name: 'Dingo', id: 2 },
        { name: 'Mr Frumble', id: 3 },
        { name: 'Rudolf Von Flugel', id: 4 },
      ],
      labels: [
        { label: 'Placeat' },
        { label: 'aspernatur' },
        { label: 'optio' },
        { label: 'quod' },
        { label: 'provident' },
        { label: 'impedit' },
        { label: 'debitis' },
        { label: 'eveniet' },
        { label: 'labore' },
        { label: 'perspiciatis' },
        { label: 'qui' },
        { label: 'aliquam' },
      ],
      numbers: [
        { position: 5 },
        { position: 4 },
        { position: 45 },
        { position: 7894 },
        { position: 7 },
        { position: 2145 },
      ],
      names: [
        { name: 'Lorem' },
        { name: 'ipsum' },
        { name: 'dolor' },
        { name: 'sit' },
        { name: 'amet' },
        { name: 'consectetur' },
        { name: 'adipisicing' },
        { name: 'elit' },
        { name: 'Odio' },
        { name: 'nihil' },
        { name: 'rem' },
        { name: 'blanditiis' },
        { name: 'repellendus' },
        { name: 'consequatur' },
      ],
      dataSets: {
        formatDateAndTime: [
          '2020-04-08T17:58:42.663291',
          '2020-04-08T17:58:42.663291Z',
          '2020-04-15T19:42:14.401606',
          '2020-04-15T19:42:14.401606Z',
          '2020-04-09T18:42:44.298656',
          '2020-04-09T18:42:44.298656Z',
          null,
          '',
        ],
        simpleDate: [
          '2020-04-08',
          '2020-04-08T17:58:42.663291Z',
          '2020-04-09',
          '2020-04-09T18:42:44.298656Z',
          null,
          '',
        ],
      },
      Formatting: vm.$TF.Formatting,
      DatesUtils: vm.$TF.DatesUtils,
    }),
    computed: {
      /**
       * returns a sorted list of labels
       *
       * @returns {Array}
       */
      sortedLabels() {
        // eslint-disable-next-line vue/no-side-effects-in-computed-properties
        return this.Formatting.sortObjects(this.labels, 'label');
      },
      /**
       * returns a sorted list of names
       *
       * @returns {Array}
       */
      sortedNames() {
        // eslint-disable-next-line vue/no-side-effects-in-computed-properties
        return this.Formatting.sortObjects(this.names);
      },
      /**
       * returns a sorted list of labels
       *
       * @returns {Array}
       */
      sortedNumbers() {
        // eslint-disable-next-line vue/no-side-effects-in-computed-properties
        return this.Formatting.sortObjects(this.numbers, 'position');
      },
    },
  };
</script>

<style lang="scss" scoped>
  .flex {
    display: flex;
  }

  div {
    min-width: 300px;
    margin-right: 40px;
  }
</style>
