<template>
  <div id="custom_fonts" class="component component-fonts">
    <div class="top">
      <h2 class="title">Fonts</h2>
      <p class="subtitle">Manage fonts on site.</p>
    </div>
    <div class="content">
      <div class="font-size-container">
        <div class="label">
          Font Size
        </div>
        <div class="input">
          <div class="radios">
            <input id="font_size_small" type="radio" name="font_size" value="false" v-model="fontSize" />
            <label for="font_size_small">Small</label>
            <input id="font_size_regular" type="radio" name="font_size" value="true" v-model="fontSize" />
            <label for="font_size_regular">Regular</label>
          </div>
        </div>
      </div>
      <div class="header-font-container">
        <div class="label">
          Header Font
        </div>
        <div class="input">
          <dropdown :options="fonts" option-label="name" v-model="headerFont" />
        </div>
        <div class="preview">
          <div class="image-container" v-if="!!headerFontImageSrc">
            <img :src="'/images/fonts/' + headerFontImageSrc" />
          </div>
        </div>
      </div>
      <div class="body-font-container">
        <div class="label">
          Body Font
        </div>
        <div class="input">
          <dropdown :options="fonts" option-label="name" v-model="bodyFont" />
        </div>
        <div class="preview">
          <div class="image-container" v-if="!!bodyFontImageSrc">
            <img :src="'/images/fonts/' + bodyFontImageSrc" />
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
  export default {
    props: [ "fontSizeMultiplier", "headerFontFamily", "bodyFontFamily" ],
    data() {
      return {
        fonts: window._FONTS
      };
    },
    computed: {
      fontSize: {
        get() {
          if (!!this.fontSizeMultiplier) {
            return Number(this.fontSizeMultiplier.value) === 1;
          }
        },
        set(val) {
          const value = (!!val) ? 1 : 0.77;
          this.$emit("update", { category: "Fonts", prop: "fontSizeMultiplier", value: value });
        }
      },
      headerFont: {
        get() {
          const self = this;
          if (!!this.headerFontFamily) {
            return this.fonts.find( function(font) {
              return font.value === self.headerFontFamily.value;
            });
          }
        },
        set(val) {
          this.$emit("update", { category: "Fonts", prop: "headerFontFamily", value: val.value });
        }
      },
      bodyFont: {
        get() {
          const self = this;
          if (!!this.bodyFontFamily) {
            return this.fonts.find( function(font) {
              return font.value === self.bodyFontFamily.value;
            });
          }
        },
        set(val) {
          this.$emit("update", { category: "Fonts", prop: "bodyFontFamily", value: val.value });
        }
      },
      headerFontImageSrc: function() {
        if (!!this.headerFont) {
          return "h-" + this.headerFont.slug + ".png";
        }
      },
      bodyFontImageSrc: function() {
        if (!!this.bodyFont) {
          return "p-" + this.bodyFont.slug + ".png";
        }
      }
    },
    methods: {

    }
  }
</script>
