<template>
  <div class="sizes">
    <div class="sizes__title" v-html="title"></div>
    <div v-if="sizeList.length > 0" class="sizes__item size" v-for="(size, index) in sizeList">
      <radio-square :required="true" :radio-value="size.EU" :name="name">
        <span class="size__unit unit unit--eu">{{ keyName(size)[0] }} <span class="unit__value">{{ size.EU }}</span></span>
        <span class="size__unit unit unit--uk">{{ keyName(size)[1] }} <span class="unit__value">{{ size.UK }}</span></span>
        <span class="size__unit unit unit--us">{{ keyName(size)[2] }} <span class="unit__value">{{ size.US }}</span></span>
      </radio-square>
    </div>
  </div>
</template>
<script>
import RadioSquare from './RadioSquare.vue';

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

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

  props: {
    'age': {
      default: 'adults',
      type: String
    },
    'model': {
      default: 'Converse Chuck Taylor All Star High top',
      type: String
    },
    'sizes': {
      default: () => { return {
          'baby': {
            'Converse Culla': [
              {'EU': 17},
              {'EU': 18},
              {'EU': 19}
            ]
          },
          'kids': {
            'Converse Chuck Taylor All Star High top': [
              {'EU': 20},
              {'EU': 21},
              {'EU': 22},
              {'EU': 23},
              {'EU': 24},
              {'EU': 25},
              {'EU': 26},
              {'EU': 27},
              {'EU': 28},
              {'EU': 29},
              {'EU': 30},
              {'EU': 31},
              {'EU': 32},
              {'EU': 33},
              {'EU': 34},
              {'EU': 35}
            ],
            'Converse Chuck Taylor All Star Low top': [
              {'EU': 20},
              {'EU': 21},
              {'EU': 22},
              {'EU': 23},
              {'EU': 24},
              {'EU': 25},
              {'EU': 26},
              {'EU': 27},
              {'EU': 28},
              {'EU': 29},
              {'EU': 30},
              {'EU': 31},
              {'EU': 32},
              {'EU': 33},
              {'EU': 34},
              {'EU': 35}
            ]
          },
          'adults': {
            'Converse Chuck Taylor All Star High top': [
              {'EU': 36},
              {'EU': 36.5},
              {'EU': 37},
              {'EU': 37.5},
              {'EU': 38},
              {'EU': 39},
              {'EU': 39.5},
              {'EU': 40},
              {'EU': 41},
              {'EU': 41.5},
              {'EU': 42},
              {'EU': 42.5},
              {'EU': 43},
              {'EU': 44},
              {'EU': 44.5},
              {'EU': 45},
              {'EU': 46},
              {'EU': 46.5},
              {'EU': 47}
            ],
            'Converse Chuck Taylor All Star Low top': [
              {'EU': 36},
              {'EU': 36.5},
              {'EU': 37},
              {'EU': 37.5},
              {'EU': 38},
              {'EU': 39},
              {'EU': 39.5},
              {'EU': 40},
              {'EU': 41},
              {'EU': 41.5},
              {'EU': 42},
              {'EU': 42.5},
              {'EU': 43},
              {'EU': 44},
              {'EU': 44.5},
              {'EU': 45},
              {'EU': 46},
              {'EU': 46.5},
              {'EU': 47}
            ],
            'Vans Authentic': [
              {'EU': 34.5},
              {'EU': 35},
              {'EU': 36},
              {'EU': 36.5},
              {'EU': 37},
              {'EU': 38},
              {'EU': 38.5},
              {'EU': 39},
              {'EU': 40},
              {'EU': 40.5},
              {'EU': 41},
              {'EU': 42},
              {'EU': 42.5},
              {'EU': 43},
              {'EU': 44},
              {'EU': 44.5},
              {'EU': 45},
              {'EU': 46}
            ],
            'Vans Slip-on': [
              {'EU': 34.5},
              {'EU': 35},
              {'EU': 36},
              {'EU': 36.5},
              {'EU': 37},
              {'EU': 38},
              {'EU': 38.5},
              {'EU': 39},
              {'EU': 40},
              {'EU': 40.5},
              {'EU': 41},
              {'EU': 42},
              {'EU': 42.5},
              {'EU': 43},
              {'EU': 44},
              {'EU': 44.5},
              {'EU': 45},
              {'EU': 46}
            ],
            'Vans Old skool': [
              {'EU': 34.5},
              {'EU': 35},
              {'EU': 36},
              {'EU': 36.5},
              {'EU': 37},
              {'EU': 38},
              {'EU': 38.5},
              {'EU': 39},
              {'EU': 40},
              {'EU': 40.5},
              {'EU': 41},
              {'EU': 42},
              {'EU': 42.5},
              {'EU': 43},
              {'EU': 44},
              {'EU': 44.5},
              {'EU': 45},
              {'EU': 46}
            ],
            'Vans SK8 Hi': [
              {'EU': 34.5},
              {'EU': 35},
              {'EU': 36},
              {'EU': 36.5},
              {'EU': 37},
              {'EU': 38},
              {'EU': 38.5},
              {'EU': 39},
              {'EU': 40},
              {'EU': 40.5},
              {'EU': 41},
              {'EU': 42},
              {'EU': 42.5},
              {'EU': 43},
              {'EU': 44},
              {'EU': 44.5},
              {'EU': 45},
              {'EU': 46}
            ],
            'Saucony Jazz': [
              {'EU': 36},
              {'EU': 37},
              {'EU': 37.5},
              {'EU': 38},
              {'EU': 38.5},
              {'EU': 39},
              {'EU': 40},
              {'EU': 40.5},
              {'EU': 41},
              {'EU': 42.5},
              {'EU': 43},
              {'EU': 44},
              {'EU': 45},
              {'EU': 46},
              {'EU': 46.5},
              {'EU': 47},
              {'EU': 48},
            ],
            'Dr. Martens': [
              {'EU': 36},
              {'EU': 37},
              {'EU': 38},
              {'EU': 39},
              {'EU': 40},
              {'EU': 41},
              {'EU': 42},
              {'EU': 43},
              {'EU': 44},
              {'EU': 45},
              {'EU': 46}
            ],
            'Birkenstock': [
              {'EU': 36},
              {'EU': 37},
              {'EU': 38},
              {'EU': 39},
              {'EU': 40},
              {'EU': 41},
              {'EU': 42},
              {'EU': 43},
              {'EU': 44},
              {'EU': 45},
              {'EU': 46}
            ]
          }
        }
      },
      type: Object
    },
    'title': {
      default: 'Numero',
      type: String,
    },
    'name': {
      default: 'content[numero]',
      type: String,
    },
  },

  computed: {
    sizeList() {
      return (this.age) ? this.sizes[this.age][this.model] : []
    }
  },

  methods: {
    keyName(obj) {
      return Object.keys(obj)
    }
  },
};
</script>
<style lang="scss">
  .sizes {
    box-sizing: border-box;
    display: flex;
    flex-flow: row wrap;
    justify-content: center;
    margin: 0 -.25rem;
    width: 100%;
    
    @media screen and (min-width:769px) {
      justify-content: flex-start;
      margin: 0 -.5rem;
    }

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

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

  }

  .size {
    .unit {
      display: block;
      text-align: center;
      width: 100%;

      &__value {
        font-weight: bold;
      }
    }
  }
</style>


