<template>
  <label class="container" @click="onClickLabel">
    <span :class="classes"></span>
    <span :class="labelClasses">{{label.text}}</span>
  </label>
</template>

<script>
export default {
  name: 'Radio',
  props: {
    value: {
      type: [String, Number],
      default() {
        return '';
      }
    },
    label: {
      type: Object,
      default() {
        return {text: '', value: 'radio1'};
      }
    }
  },
  data() {
    return {
      checked: false
    };
  },
  methods: {
    updateLabel() {
      this.updateStatus();
    },
    onClickLabel() {
      this.$emit('input', this.label.value);
    },

    updateStatus() {
      if (this.value === this.label.value) {
        this.checked = true;
      } else {
        this.checked = false;
      }
    }
  },
  computed: {
    classes() {
      return ['checkmark', {
        'cubeic-round-border': !this.checked,
        'cubeic-right': this.checked
      }];
    },
    labelClasses() {
      return ['radio-label', {
        active: this.checked
      }];
    }
  },
  watch: {
    value() {
      this.updateStatus();
    }
  },
  created() {
    // this.updateLabel();
    this.updateStatus();
  }
};
</script>

<style lang="scss" scoped>
  .container {
    position: relative;
    font-size: 28px;
    display: flex;
    align-content: center;
  }

  .checkmark {
    font-size: 40px;
  }

  .radio-label {
    display: inline-block;
    height: 55px;
    font-size: 28px;
    line-height: 55px;
    margin-left: 20px;
    color:  #999;

    &.active {
      color: black;
    }
  }

</style>