<template>
  <div class="demo-page includes-toc">
    <toc :sections="sections" />
    <section>
      <h1>ThreeFlow StyleGuide</h1>
      <template v-for="({ colors, name }) in categories">
        <h2 :key="name">
          {{ name }}
        </h2>
        <table :key="name + '-table'">
          <thead>
            <tr>
              <th>Description</th>
              <th width="220px">
                Swatch
              </th>
              <th width="350px">
                Variable
              </th>
            </tr>
          </thead>
          <tbody>
            <template
              v-for="({
                description,
                swatches,
                type,
              }) in colors"
            >
              <tr
                v-for="({
                  hex,
                  variable,
                  styleAttr
                }, index) in swatches"
                :id="type"
                :key="variable"
              >
                <td
                  v-if="!index"
                  :rowspan="swatches.length"
                >
                  <h3>{{ type }}</h3>
                  <p>{{ description }}</p>
                </td>
                <td :data-mouse="styleAttr">
                  <div
                    v-if="styleAttr === 'backgroundColor'"
                    class="swatch"
                    :style="{ backgroundColor: `var(${variable})` }"
                  />
                  <div
                    v-else-if="styleAttr === 'borderColor'"
                    class="swatch"
                    :style="{ border: `4px solid var(${variable})` }"
                  />
                  <h3
                    v-else
                    :style="{
                      color: `var(${variable})`,
                      textAlign: 'center',
                    }"
                    v-text="'Text'"
                  />
                </td>
                <td>
                  <p>
                    <strong>css variable:</strong><code> var({{ variable }})</code>
                  </p>
                  <p v-if="hex">
                    <strong>hex:</strong><code> {{ hex }}</code>
                  </p>
                </td>
              </tr>
            </template>
          </tbody>
        </table>
      </template>
    </section>
  </div>
</template>

<script>
  export default {
    name: 'Colors',
    components: { toc: () => import('@/views/examples/Toc') },
    data: () => ({
      categories: [
        {
          name: 'Themes',
          colors: [
            {
              description: 'In some cases (buttons, icons, etc), "--tf-primary" will be overridden by the "--primary" color.',
              type: 'Primary',
              swatches: [
                {
                  styleAttr: 'backgroundColor',
                  variable: '--tf-primary',
                  hex: '#009',
                },
                {
                  styleAttr: 'backgroundColor',
                  variable: '--primary',
                },
              ],
            },
            {
              description: 'jlkjals dfas as asdf ',
              type: 'Success',
              swatches: [
                {
                  styleAttr: 'backgroundColor',
                  variable: '--tf-success',
                  hex: '#00b980',
                },
                {
                  styleAttr: 'backgroundColor',
                  variable: '--tf-success-light',
                  hex: '#e3f8f2',
                },
                {
                  styleAttr: 'borderColor',
                  variable: '--tf-success-border-color',
                  hex: '#00b980',
                },
                {
                  styleAttr: 'color',
                  variable: '--tf-success-font-color',
                  hex: '#00b980',
                },
              ],
            },
            {
              description: ' asdf asdf asdf asdf',
              type: 'Warning',
              swatches: [
                {
                  styleAttr: 'backgroundColor',
                  variable: '--tf-warning',
                  hex: '#f7912a',
                },
                {
                  styleAttr: 'backgroundColor',
                  variable: '--tf-warning-light',
                  hex: '#fff4ea',
                },
                {
                  styleAttr: 'borderColor',
                  variable: '--tf-warning-border-color',
                  hex: '#f7912a',
                },
                {
                  styleAttr: 'color',
                  variable: '--tf-warning-font-color',
                  hex: '#f7912a',
                },
              ],
            },
            {
              description: ' asdf asdf asdf asdf',
              type: 'Danger',
              swatches: [
                {
                  styleAttr: 'backgroundColor',
                  variable: '--tf-danger',
                  hex: '#f92f37',
                },

                {
                  styleAttr: 'backgroundColor',
                  variable: '--tf-danger-light',
                  hex: '#ffece9',
                },
                {
                  styleAttr: 'borderColor',
                  variable: '--tf-danger-border-color',
                  hex: '#f92f37',
                },
                {
                  styleAttr: 'color',
                  variable: '--tf-danger-font-color',
                  hex: '#f92f37',
                },
              ],
            },
            {
              description: ' asdf asdf asdf asdf',
              type: 'Info',
              swatches: [
                {
                  styleAttr: 'backgroundColor',
                  variable: '--tf-info',
                  hex: '#009',
                },

                {
                  styleAttr: 'backgroundColor',
                  variable: '--tf-info-light',
                  hex: '#eff3fd',
                },
                {
                  styleAttr: 'borderColor',
                  variable: '--tf-info-border-color',
                  hex: '#009',
                },
                {
                  styleAttr: 'color',
                  variable: '--tf-info-font-color',
                  hex: '#009',
                },
              ],
            },
            {
              description: ' asdf asdf asdf asdf',
              type: 'Disabled',
              swatches: [
                {
                  styleAttr: 'backgroundColor',
                  variable: '--tf-disabled',
                  hex: '#c1c1c1',
                },

                {
                  styleAttr: 'backgroundColor',
                  variable: '--tf-disabled-light',
                  hex: '#efefef',
                },
                {
                  styleAttr: 'color',
                  variable: '--tf-disabled-font-color',
                  hex: '#c1c1c1',
                },
              ],
            },
          ],
        },
        {
          name: 'Colors',
          colors: [
            {
              type: 'Blues',
              swatches: [
                {
                  styleAttr: 'backgroundColor',
                  hex: '#009',
                  variable: '--tf-blue',
                },
                {
                  styleAttr: 'backgroundColor',
                  hex: '#eff3fd',
                  variable: '--tf-blue-light',
                },
                {
                  styleAttr: 'backgroundColor',
                  hex: '#a3a5f9',
                  variable: '--tf-blue-light-medium',
                },
                {
                  styleAttr: 'backgroundColor',
                  hex: '#7a7ff5',
                  variable: '--tf-blue-medium',
                },
                {
                  styleAttr: 'backgroundColor',
                  hex: '#006',
                  variable: '--tf-blue-dark',
                },
              ],
            },
            {
              type: 'Greens',
              swatches: [
                {
                  styleAttr: 'backgroundColor',
                  hex: '#00b980',
                  variable: '--tf-green',
                },
                {
                  styleAttr: 'backgroundColor',
                  hex: '#e3f8f2',
                  variable: '--tf-green-light',
                },
                {
                  styleAttr: 'backgroundColor',
                  hex: '#85daba',
                  variable: '--tf-green-light-medium',
                },
                {
                  styleAttr: 'backgroundColor',
                  hex: '#53b684',
                  variable: '--tf-green-medium',
                },
                {
                  styleAttr: 'backgroundColor',
                  hex: '#1a7848',
                  variable: '--tf-green-dark',
                },
              ],
            },
            {
              type: 'Oranges',
              swatches: [
                {
                  styleAttr: 'backgroundColor',
                  hex: '#f7912a',
                  variable: '--tf-orange',
                },
                {
                  styleAttr: 'backgroundColor',
                  hex: '#fff4ea',
                  variable: '--tf-orange-light',
                },
                {
                  styleAttr: 'backgroundColor',
                  hex: '#9B4E00',
                  variable: '--tf-orange-dark',
                },
              ],
            },
            {
              type: 'Reds',
              swatches: [
                {
                  styleAttr: 'backgroundColor',
                  hex: '#f92f37',
                  variable: '--tf-red',
                },
                {
                  styleAttr: 'backgroundColor',
                  hex: '#ffece9',
                  variable: '--tf-red-light',
                },
                {
                  styleAttr: 'backgroundColor',
                  hex: '#A2060B',
                  variable: '--tf-red-dark',
                },
              ],
            },
            {
              type: 'Yellow',
              swatches: [
                {
                  styleAttr: 'backgroundColor',
                  hex: '#ffea00',
                  variable: '--tf-yellow',
                },
                {
                  styleAttr: 'backgroundColor',
                  hex: '#fffde1',
                  variable: '--tf-yellow-light',
                },
                {
                  styleAttr: 'backgroundColor',
                  hex: '#cdbf1d',
                  variable: '--tf-yellow-dark',
                },
              ],
            },
            {
              type: 'Grays',
              swatches: [
                {
                  styleAttr: 'backgroundColor',
                  hex: '#999',
                  variable: '--tf-gray',
                },
                {
                  styleAttr: 'backgroundColor',
                  hex: '#fafafa',
                  variable: '--tf-gray-light',
                },
                {
                  styleAttr: 'backgroundColor',
                  hex: '#efefef',
                  variable: '--tf-gray-light-medium',
                },
                {
                  styleAttr: 'backgroundColor',
                  hex: '#c1c1c1',
                  variable: '--tf-gray-medium',
                },
                {
                  styleAttr: 'backgroundColor',
                  hex: '#42474c',
                  variable: '--tf-gray-dark',
                },
              ],
            },
          ],
        },
      ],
    }),
    computed: {
      /**
       * Create a table of contents for all the colors.
       *
       * @returns {Array}
       */
      sections() {
        return this.categories.reduce((acc, { colors }) => {
          colors.forEach(({ type }) => {
            acc.push({
              id: type,
              text: type,
            });
          });

          return acc;
        }, []);
      },
    },
  };
</script>

<style lang="scss" scoped>
  section {
    margin-top: 55px;
    padding: 20px 20px 0;
  }

  .swatch {
    width: 200px;
    height: 100px;
    border-radius: 10px;
    margin: 0 auto;
  }

  td,
  th {
    padding: 20px;
    border: var(--tf-border);
    vertical-align: top;
  }

  table {
    width: 100%;
    max-width: 1000px;
  }
</style>
