<template>
  <div class="ages">
    <div class="ages__title" v-html="title"></div>
    <div class="ages__item age" v-for="(age, index) in ages">
      <radio-square :radio-value="age.label" :name="name" v-model="selected">{{ age.label }}</radio-square>
    </div>
  </div>
</template>
<script>
import RadioSquare from './RadioSquare.vue';

export default {
  data: function() {
    return {
    }
  },

  components: {
    'radio-square': RadioSquare
  },

  props: {
    'ages': {
      default: () => { return [
          {'label': 'Baby', 'value': 'baby'},
          {'label': 'Ragazzi', 'value': 'kids'},
          {'label': 'Adulti', 'value': 'adults'}
        ]
      },
      type: Array
    },
    'title': {
      default: 'Fascia d\'età',
      type: String,
    },
    'name': {
      default: 'content[età]',
      type: String,
    },
    'value': {
      default: 'adults',
      type: String
    }
  },
  computed: {
    selected: {
      get: function() {
        let selectedAge = this.ages.filter((item) => {
          return item.value === this.value
        })
        return ( selectedAge.length > 0 ) ? selectedAge[0].label : this.value
      },
      set: function(value) {
        let selectedAge = this.ages.filter((item) => {
          return item.label === value
        })
        this.$emit('input', selectedAge[0].value)
      }
    }
  }
};
</script>
<style lang="scss">
  .ages {
    box-sizing: border-box;
    display: flex;
    flex-flow: row wrap;
    justify-content: center;
    margin: 0 -.5rem;
    width: 100%;
    
    @media screen and (min-width:769px) {
      justify-content: flex-start;
    }

    &__title {
      padding: .5rem 1rem;
      width: 100%;

      @media screen and (min-width:769px) {
        padding: .5rem;
      }
    }
  }
</style>


