<template>
  <div
    :class="_class"
    @click.stop="onClick">
    <HiveCheckbox v-if="select.multiple" :checked="checked" />
    <slot>{{ label || value }}</slot>
  </div>
</template>

<script>
  import Emitter from 'utils-lib/dist/emitter';
  import GetItemChecked from '../scripts/mixins/get-item-checked';
  import HiveCheckbox from '../checkbox';

  const name = 'hive-select-option';

  export default {
    name,
    components: { HiveCheckbox },
    mixins: [
      Emitter,
      GetItemChecked,
    ],
    inject: [
      'select',
    ],
    props: {
      label: [String, Number],
      value: { type: [String, Number], required: true },
      disabled: Boolean,
    },
    computed: {
      _class() {
        return [
          name,
          {
            [`${name}--selected`]: this.checked,
            [`${name}--disabled`]: this.disabled,
          },
        ];
      },
      checked() {
        return this.getItemChecked(this.select);
      },
    },
    methods: {
      onClick() {
        this.dispatch('hive-select', 'option.click', this);
      },
    },
  };
</script>
