<template>
  <div v-if="colorList && colorList.length > 0" class="colors">
    <div class="colors__title" v-html="title"></div>
    <div class="colors__item color" v-for="(color, index) in colorList">
      <radio-square :required="true" :style="`background-color: ${color.value}`" :radio-value="color.label" :name="name">
        <span class="color__label">{{ color.label }}</span>
      </radio-square>
    </div>
  </div>
</template>
<script>
import RadioSquare from './RadioSquare.vue';

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

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

  props: {
    'model': {
      default: '',
      type: String
    },
    'colors': {
      default: () => { return {
          'Converse Chuck Taylor All Star High top': [
            {'label': 'Bianco', 'value': '#fefefe'},
            {'label': 'Rosso', 'value': '#e11740'},
            {'label': 'Nero', 'value': '#222222'},
            {'label': 'Blu', 'value': '#69a2be'}
          ],
          'Converse Chuck Taylor All Star Low top': [
            {'label': 'Bianco', 'value': '#fefefe'},
            {'label': 'Rosso', 'value': '#e11740'},
            {'label': 'Nero', 'value': '#222222'},
            {'label': 'Blu', 'value': '#69a2be'}
          ]
        }
      },
      type: Object
    },
    'title': {
      default: 'Colore della base <small><i>(la grafica sarà realizzata in sovrapposizione al colore scelto)</i></small>',
      type: String,
    },
    'name': {
      default: 'content[colore]',
      type: String,
    },
  },

  computed: {
    colorList() {
      return (this.model) ? this.colors[this.model] : []
    },
  }
};
</script>
<style lang="scss">
  .colors {
    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;
      }
    }
  }

  .color {
    .radiosquare {
      label {
        align-items: flex-end;
        padding: 0;
      }

      input[type="radio"]:checked + label {
        background-color: transparent;
        box-shadow: inset 0 0 0 .25rem #000000;
        color: inherit;
        font-weight: bold;
      }
    }

    &__label {
      background-color: #000000;
      color: #FFFFFF;
      padding: .5rem .25rem;
      text-align: center;
      width: 100%;
    }
  }
</style>


