<template>
  <div id="custom_footer" class="component component-footer">
    <div class="top">
      <h2 class="title">Footer</h2>
      <p class="subtitle">Manage footer options on site.</p>
    </div>
    <div class="content">
      <div class="footer-setting-container">
        <div class="label">
          Footer Logo
        </div>
        <div class="input">
          <image-selector v-model="logo" />
        </div>
      </div>
      <div class="footer-setting-container">
        <div class="label">
          Footer Text
        </div>
        <div class="input">
          <input type="text" v-model="text" />
        </div>
      </div>
      <div class="footer-setting-container">
        <div class="label">
          Footer Logo Link
        </div>
        <div class="input">
          <input type="text" v-model="logoLink" />
        </div>
      </div>
      <div class="footer-setting-container">
        <div class="label">
          Footer Height
        </div>
        <div class="input">
          <input type="number" v-model="height" />
        </div>
      </div>
      <div class="footer-setting-container">
        <div class="label">
          Footer Color
        </div>
        <div class="input">
          <color-dropdown v-model="color" />
        </div>
      </div>
      <div class="footer-setting-container">
        <div class="label">
          Sub-Footer Color
        </div>
        <div class="input">
          <color-dropdown v-model="subColor" />
        </div>
      </div>
      <div class="footer-setting-container">
        <div class="label">
          Copyright Text
        </div>
        <div class="input">
          <input type="text" v-model="copyright" />
        </div>
      </div>
      <div class="footer-setting-container">
        <div class="label">
          Footer Link 1
        </div>
        <div class="input">
          <div class="two-inputs">
            <input type="text" placeholder="Text" v-model="link1Text" />
            <input type="text" placeholder="URL" v-model="link1Url" />
          </div>
        </div>
      </div>
      <div class="footer-setting-container">
        <div class="label">
          Footer Link 2
        </div>
        <div class="input">
          <div class="two-inputs">
            <input type="text" placeholder="Text" v-model="link2Text" />
            <input type="text" placeholder="URL" v-model="link2Url" />
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
  export default {
    props: [ "footerLogo", "footerText", "footerLogoLink", "footerHeight", "footerColor", "subFooterColor", "copyrightText", "footerLink1", "footerLink2" ],
    data() {
      return {
      }
    },
    computed: {
      logo: {
        get() {
          return (!!this.footerLogo) ? this.footerLogo.value : undefined;
        },
        set(val) {
          this.$emit("update", { category: "Footer", prop: "footerLogo", value: val });
        }
      },
      text: {
        get() {
          return (!!this.footerText) ? this.footerText.value : undefined;
        },
        set(val) {
          this.$emit("update", { category: "Footer", prop: "footerText", value: val });
        }
      },
      logoLink: {
        get() {
          return (!!this.footerLogoLink) ? this.footerLogoLink.value : undefined;
        },
        set(val) {
          this.$emit("update", { category: "Footer", prop: "footerLogoLink", value: val });
        }
      },
      height: {
        get() {
          return (!!this.footerHeight) ? this.footerHeight.value : undefined;
        },
        set(val) {
          this.$emit("update", { category: "Footer", prop: "footerHeight", value: val });
        }
      },
      color: {
        get() {
          return (!!this.footerColor) ? this.footerColor.value : undefined;
        },
        set(val) {
          this.$emit("update", { category: "Footer", prop: "footerColor", value: val });
        }
      },
      subColor: {
        get() {
          return (!!this.subFooterColor) ? this.subFooterColor.value : undefined;
        },
        set(val) {
          this.$emit("update", { category: "Footer", prop: "subFooterColor", value: val });
        }
      },
      copyright: {
        get() {
          return (!!this.copyrightText) ? this.copyrightText.value : undefined;
        },
        set(val) {
          this.$emit("update", { category: "Footer", prop: "copyrightText", value: val });
        }
      },
      link1Text: {
        get() {
          if (!!this.footerLink1) {
            const link1Object = (typeof this.footerLink1.value === "string") ? JSON.parse(this.footerLink1.value) : this.footerLink1.value;
            return link1Object.text;
          }
          else {
            return null;
          }
        },
        set(val) {
          const link1Object = { text: val, url: this.link1Url };
          this.$emit("update", { category: "Footer", prop: "footerLink1", value: link1Object });
        }
      },
      link1Url: {
        get() {
          if (!!this.footerLink1) {
            const link1Object = (typeof this.footerLink1.value === "string") ? JSON.parse(this.footerLink1.value) : this.footerLink1.value;
            return link1Object.url;
          }
          else {
            return null;
          }
        },
        set(val) {
          const link1Object = { text: this.link1Text, url: val };
          this.$emit("update", { category: "Footer", prop: "footerLink1", value: link1Object });
        }
      },
      link2Text: {
        get() {
          if (!!this.footerLink1) {
            const link2Object = (typeof this.footerLink2.value === "string") ? JSON.parse(this.footerLink2.value) : this.footerLink2.value;
            return link2Object.text;
          }
          else {
            return null;
          }
        },
        set(val) {
          const link2Object = { text: val, url: this.link2Url };
          this.$emit("update", { category: "Footer", prop: "footerLink2", value: link2Object });
        }
      },
      link2Url: {
        get() {
          if (!!this.footerLink2) {
            const link2Object = (typeof this.footerLink2.value === "string") ? JSON.parse(this.footerLink2.value) : this.footerLink2.value;
            return link2Object.url;
          }
          else {
            return null;
          }
        },
        set(val) {
          const link2Object = { text: this.link2Text, url: val };
          this.$emit("update", { category: "Footer", prop: "footerLink2", value: link2Object });
        }
      }
    }
  }
</script>