<template>
  <div id="custom_colors" class="component component-colors">
    <div class="top">
      <h2 class="title">Colors</h2>
      <p class="subtitle">Manage colors on site.</p>
    </div>
    <div class="content">
      <div class="primary-secondary color-content-section">
        <div class="color-pickers-container">
          <div class="color-picker-container" v-for="color in primarySecondaryColors">
            <chrome-picker class="color-picker" @update="$emit('update', { category: 'Colors' })" v-model="color.color" v-show="visiblePicker === color.name" v-on-clickaway="() => onClickAway(color.name)" disable-alpha />
            <a class="color-circle" :style="'background-color: ' + color.color.hex + ';'" @click.stop="setShownPicker(color.name)"></a>
            <div class="color-hex-input">
              <input type="text" v-model="color.color.hex" :title="color.title" size="8" />
            </div>
            <div class="color-name">
              {{ color.name }}
            </div>
          </div>
        </div>
        <div class="description-container">
          <h4 class="title">Primary & Secondary Colors</h4>
          <p>These colors are considered your "accent" colors.<br>These should be used for links, buttons, important highlighted information on the site only.</p>
        </div>
      </div>
      <div class="tertiary-quaternary-quinary color-content-section">
        <div class="color-pickers-container">
          <div class="color-picker-container" v-for="color in tertiaryQuaternaryQuinaryColors">
            <chrome-picker class="color-picker" v-model="color.color" v-show="visiblePicker === color.name" v-on-clickaway="() => onClickAway(color.name)" disable-alpha />
            <a class="color-circle" :style="'background-color: ' + color.color.hex + ';'" @click.stop="setShownPicker(color.name)"></a>
            <div class="color-hex-input">
              <input type="text" v-model="color.color.hex" :title="color.title" size="8" />
            </div>
            <div class="color-name">
              {{ color.name }}
            </div>
          </div>
        </div>
        <div class="description-container">
          <h4 class="title">Tertiary, Quaternary, & Quinary Colors</h4>
          <p>These colors are considered your "alternative" colors.<br>These should be used for backgrounds.</p>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
  import { mixin as clickaway } from 'vue-clickaway2';

  export default {
    mixins: [ clickaway ],
    props: [ "primarySecondaryColors", "tertiaryQuaternaryQuinaryColors" ],
    data() {
      return {
        visiblePicker: undefined
      };
    },
    methods: {
      onClickAway(color) {
        if (this.visiblePicker === color) {
          this.visiblePicker = undefined;
        }
      },
      setShownPicker(color) {
        if (this.visiblePicker === color) {
          this.visiblePicker = undefined;
        }
        else {
          this.visiblePicker = color;
        }
      }
    }
  }
</script>
