<script>
import isFunction from 'lodash/isFunction'
import get from 'lodash/get'
import Checkbox from './checkbox'
export default {
  name: 'CheckboxGroup',
  components: {
    Checkbox,
  },
  inheritAttrs: false,
  props: {
    options: {
      type: Array,
      default: () => [],
    },
    props: {
      type: Object,
      default: () => ({
        label: 'label',
        value: 'value',
      }),
    },
    button: {
      type: Boolean,
      default: false,
    },
    border: {
      type: Boolean,
      default: false,
    },
    checkboxClass: {
      type: [String, Array, Object],
      default: '',
    },
    optionKey: {
      type: [String, Function],
      default: '',
    },
  },
  render() {
    const { border, button, props, checkboxClass, optionKey } = this
    const { value } = this.$attrs
    const { label: labelKey = 'label', value: valueKey = 'value' } = props

    const getKey = (option, index, options) =>
      optionKey
        ? isFunction(optionKey)
          ? optionKey(option, index, options)
          : get(option, optionKey, option[valueKey])
        : option[valueKey]

    return (
      <el-checkbox-group props={this.$attrs} on={this.$listeners}>
        {this.options.map((option, index, options) => (
          <Checkbox
            props={{
              border,
              button,
              ...option,
              label: option[labelKey],
              value: option[valueKey],
              checked: value === option.value,
            }}
            class={checkboxClass}
            border={border}
            key={option.key || getKey(option, index, options)}
          />
        ))}
      </el-checkbox-group>
    )
  },
}
</script>
