<template>
  <div id="custom_header" class="component component-header">
    <div class="top">
      <h2 class="title">Header</h2>
      <p class="subtitle">Manage header options on site.</p>
    </div>
    <div class="content">
      <div class="header-setting-container">
        <div class="label">
          Header Logo
        </div>
        <div class="input">
          <image-selector v-model="logo" />
        </div>
      </div>
      <div class="header-setting-container">
        <div class="label">
          Mobile Header Logo
        </div>
        <div class="input">
          <image-selector v-model="mobileLogo" />
        </div>
      </div>
      <div class="header-setting-container">
        <div class="label">
          Header Text
        </div>
        <div class="input">
          <input type="text" v-model="text" />
        </div>
      </div>
      <div class="header-setting-container">
        <div class="label">
          Header Options
        </div>
        <div class="input">
          <div class="radios">
            <input id="header_options_fixed" type="radio" name="font_size" value="fixed_height" v-model="options" />
            <label for="header_options_fixed">Fixed</label>
            <input id="header_options_floating" type="radio" name="font_size" value="floating" v-model="options" />
            <label for="header_options_floating">Floating</label>
          </div>
        </div>
      </div>
      <div class="header-setting-container">
        <div class="label">
          Header Height
        </div>
        <div class="input">
          <input type="number" v-model="height" />
        </div>
      </div>
      <h3>Header Navigation</h3>
      <div class="header-setting-container">
        <div class="label">
          Header Color
        </div>
        <div class="input">
          <color-dropdown v-model="color" />
        </div>
      </div>
      <div class="header-setting-container">
        <div class="label">
          Header Link Color
        </div>
        <div class="input">
          <color-dropdown v-model="linkColor" />
        </div>
      </div>
      <div class="header-setting-container">
        <div class="label">
          Header Button Color
        </div>
        <div class="input">
          <color-dropdown
            v-model="buttonColor"
            :append-colors="appendColors"
          />
        </div>
      </div>
      <h3>Header Sub-Navigation</h3>
      <div class="header-setting-container">
        <div class="label">
          Header Sub-Nav Color
        </div>
        <div class="input">
          <color-dropdown v-model="subNavColor" />
        </div>
      </div>
      <div class="header-setting-container">
        <div class="label">
          Header Sub-Nav Accent Color
        </div>
        <div class="input">
          <color-dropdown v-model="subNavAccentColor" />
        </div>
      </div>
      <div class="header-setting-container">
        <div class="label">
          Header Sub-Nav Link Color
        </div>
        <div class="input">
          <color-dropdown v-model="subNavLinkColor" />
        </div>
      </div>
    </div>
  </div>
</template>

<script>
  export default {
    props: [ "headerLogo", "headerText", "headerOptions", "headerHeight", "headerColor", "headerLinkColor", "headerButtonColor", "headerSubNavColor", "headerSubNavAccentColor", "headerSubNavLinkColor" ],
    data() {
      return {
        appendColors: [
            {
                label: "None",
                value: "null"
            }
        ]
      }
    },
    computed: {
      logo: {
        get() {
          return (!!this.headerLogo) ? this.headerLogo.value : undefined;
        },
        set(val) {
          this.$emit("update", { category: "Header", prop: "headerLogo", value: val });
        }
      },
      mobileLogo: {
        get() {
          return (!!this.mobileHeaderLogo) ? this.mobileHeaderLogo.value : undefined;
        },
        set(val) {
          this.$emit("update", { category: "Header", prop: "mobileHeaderLogo", value: val });
        }
      },
      text: {
        get() {
          return (!!this.headerText) ? this.headerText.value : undefined;
        },
        set(val) {
          this.$emit("update", { category: "Header", prop: "headerText", value: val });
        }
      },
      options: {
        get() {
          return (!!this.headerOptions) ? this.headerOptions.value : undefined;
        },
        set(val) {
          this.$emit("update", { category: "Header", prop: "headerOptions", value: val });
        }
      },
      height: {
        get() {
          return (!!this.headerHeight) ? this.headerHeight.value : undefined;
        },
        set(val) {
          this.$emit("update", { category: "Header", prop: "headerHeight", value: val });
        }
      },
      color: {
        get() {
          return (!!this.headerColor) ? this.headerColor.value : undefined;
        },
        set(val) {
          this.$emit("update", { category: "Header", prop: "headerColor", value: val });
        }
      },
      linkColor: {
        get() {
          return (!!this.headerLinkColor) ? this.headerLinkColor.value : undefined;
        },
        set(val) {
          this.$emit("update", { category: "Header", prop: "headerLinkColor", value: val });
        }
      },
      buttonColor: {
        get() {
          return (!!this.headerButtonColor) ? this.headerButtonColor.value : undefined;
        },
        set(val) {
          this.$emit("update", { category: "Header", prop: "headerButtonColor", value: val });
        }
      },
      subNavColor: {
        get() {
          return (!!this.headerSubNavColor) ? this.headerSubNavColor.value : undefined;
        },
        set(val) {
          this.$emit("update", { category: "Header", prop: "headerSubNavColor", value: val });
        }
      },
      subNavAccentColor: {
        get() {
          return (!!this.headerSubNavAccentColor) ? this.headerSubNavAccentColor.value : undefined;
        },
        set(val) {
          this.$emit("update", { category: "Header", prop: "headerSubNavAccentColor", value: val });
        }
      },
      subNavLinkColor: {
        get() {
          return (!!this.headerSubNavLinkColor) ? this.headerSubNavLinkColor.value : undefined;
        },
        set(val) {
          this.$emit("update", { category: "Header", prop: "headerSubNavLinkColor", value: val });
        }
      }
    }
  }
</script>
