<template>
  
  <div :id="rowId" :class="rowClasses" :style="backgroundImageStyle">
    <div class="decide_by_side">
      
      <div :class="{'has-image' : properties['Image 1'].value}" :style="componentBackgroundStyle(1)" class="side-1">
        <div class="content" v-if="showContents(1)">
          <div class="icon-container" v-if="properties['Icon 1'].value">
            <i :class="properties['Icon 1'].value" aria-hidden="true"></i>
          </div>
          <h1 class="title" v-html="properties['Title 1'].value" v-if="properties['Title 1'].value"></h1>
          <h3 class="subtitle" v-html="properties['Subtitle 1'].value" v-if="properties['Subtitle 1'].value"></h3>
          <p class="paragraph paragraph-1" v-html="properties['Paragraph Text 1'].value" v-if="properties['Paragraph Text 1'].value"></p>
          <a class="button"
             :href="properties['URL 1'].value" v-if="properties['Button Text 1'].value && properties['URL 1'].value">
            {{properties['Button Text 1'].value}}
          </a>
        </div>
      </div>
      
      <div :class="{'has-image' : properties['Image 2'].value}" :style="componentBackgroundStyle(2)" class="side-2">
        <div class="content" v-if="showContents(2)">
          <div class="icon-container" v-if="properties['Icon 2'].value">
            <i :class="properties['Icon 2'].value" aria-hidden="true"></i>
          </div>
          <h1 class="title" v-html="properties['Title 2'].value" v-if="properties['Title 2'].value"></h1>
          <h3 class="subtitle" v-html="properties['Subtitle 2'].value" v-if="properties['Subtitle 2'].value"></h3>
          <p class="paragraph paragraph-2" v-html="properties['Paragraph Text 2'].value" v-if="properties['Paragraph Text 2'].value"></p>
          <a class="button"
             :href="properties['URL 1'].value" v-if="properties['Button Text 2'].value && properties['URL 1'].value">
            {{properties['Button Text 2'].value}}
          </a>
        </div>
      </div>
    
    </div>
  </div>

</template>

<script>
  export default {
    name: "BuildableDecideBySide",
    props: ['componentData', 'rowClasses', 'rowIndex', 'rowId', 'backgroundImageStyle'],
    data() {
      return JSON.parse(this.componentData);
    },
    computed: {
      width1: function () {
        if (!this.properties['Width 1 (%)'].value) {
          return 50;
        }
        return (this.properties['Width 1 (%)'].value < 10) ? 10 : (this.properties['Width 1 (%)'].value > 90) ? 90 : this.properties['Width 1 (%)'].value;
      },
      width2: function () {
        return 100 - this.width1;
      }
    },
    methods: {
      showContents: function (sideNumber) {
        return (
          this.properties['Title ' + sideNumber].value || this.properties['Subtitle ' + sideNumber].value ||
          this.properties['Paragraph Text ' + sideNumber].value || this.properties['Icon ' + sideNumber].value ||
          this.properties['Button Text ' + sideNumber].value
        );
      },
      componentBackgroundStyle: function (sideNumber) {
        let width = sideNumber === 1 ? this.width1 : this.width2;
        let hasBackgroundImage = (this.properties['Image ' + sideNumber] && this.properties['Image ' + sideNumber].value);
        let backgroundImage = hasBackgroundImage ? "background-image: url('" + this.properties['Image ' + sideNumber].value.url + "');" : "";
        return (`${backgroundImage} width: ${width}%;`);
      }
    }
  }
</script>

<style scoped>

</style>