<template>
  <div class="component-background">
    <div class="component-properties">
      <div class="property-container size-property-container">
        <div class="title">Size</div>
        <div class="property">
          <div class="input-field">
            <dropdown :options="sizeOptions" v-model="properties.size" />
          </div>
        </div>
      </div>
      <div class="property-container image-property-container">
        <div class="title">Image</div>
        <div class="property">
          <div class="input-field">
            <image-selector v-model="properties.image" />
          </div>
        </div>
      </div>
      <div class="property-container fixed_background-property-container">
        <div class="title">Fixed Background</div>
        <div class="property">
          <div class="input-field">
            <div class="radios">
              <input :id="'fb_on_' + index" type="radio" :name="'fixed_background_' + index" value="true" v-model="properties.fixed" />
              <label :for="'fb_on_' + index">On</label>
              <input :id="'fb_off_' + index" type="radio" :name="'fixed_background_' + index" value="false" v-model="properties.fixed" />
              <label :for="'fb_off_' + index">Off</label>
            </div>
          </div>
        </div>
      </div>
      <div class="property-container angled_top-property-container">
        <div class="title">Angled Top</div>
        <div class="property">
          <div class="radios">
            <input :id="'at_on_' + index" type="radio" :name="'angled_top_' + index" value="true" v-model="properties.angledTop" />
            <label :for="'at_on_' + index">On</label>
            <input :id="'at_off_' + index" type="radio" :name="'angled_top_' + index" value="false" v-model="properties.angledTop" />
            <label :for="'at_off_' + index">Off</label>
          </div>
        </div>
      </div>
      <div class="property-container angled_top-property-container">
        <div class="title">Angled Bottom</div>
        <div class="property">
          <div class="radios">
            <input :id="'ab_on_' + index" type="radio" :name="'angled_bottom_' + index" value="true" v-model="properties.angledBottom" />
            <label :for="'ab_on_' + index">On</label>
            <input :id="'ab_off_' + index" type="radio" :name="'angled_bottom_' + index" value="false" v-model="properties.angledBottom" />
            <label :for="'ab_off_' + index">Off</label>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
  export default {
    props: [ "properties", "index" ],
    data() {
      return {
        sizeOptions: [ "fit", "tall", "full" ]
      }
    },
    computed: {
      selectedSize: {
        get() {
          if (!!properties.size) {
          
          }
        },
        set() {
        
        }
      }
    },
    methods: {
      openLibraryPicker() {
        console.log("Opening library picker.....");
      },
      removeBackgroundImage() {
        console.log("Removing images.....");
      }
    }
  }
</script>