<template>
  <svg version="1.1" :width="size" :height="size" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16"
       :class="classes" @mouseover="setHover(true)" @mouseleave="setHover(false)">
    <circle class="border" cx="8" cy="8" r="8"/>
    <circle class="bg" cx="8" cy="8" r="7"/>
    <circle class="tick" v-if="value" cx="8" cy="8" :r="tickRadius"/>
  </svg>
</template>

<script>
export default {
  props: {
    value: {
      type: Boolean,
      default: false
    },
    disabled: {
      type: Boolean,
      default: false
    },
    size: {
      type: Number,
      default: 18
    },
    tickRadius: {
      type: Number,
      default: 4.5
    }
  },
  data () {
    return {
      hover: false
    }
  },
  computed: {
    classes () {
      return [
        'uif-radio-icon',
        {
          'uif-radio-icon-value': this.value || this.indeterminate,
          'uif-radio-icon-disabled': this.disabled,
          'uif-radio-icon-hover': !this.value && !this.indeterminate && !this.disabled && this.hover
        }
      ]
    }
  },
  methods: {
    setHover (value) {
      this.hover = value
    }
  },
  components: {
  }
}
</script>
