<template>
  <td
    class="mm-table-selection-col"
    :class="colClassName"
    :style="colStyle">
    <div class="mm-table-cell">
      <ui-checkbox
        :checked="state.selectedRows"
        v-bind="checkboxProps"
        @input="inputHandler">
      </ui-checkbox>
    </div>
  </td>
</template>
<script>
import get from "lodash/get"
import Checkbox from "../checkbox"

export default {
  components: {
    "ui-checkbox": Checkbox,
  },
  props: {
    row: [Object, Array],
    rowIndex: Number,
    sticky: Boolean,
  },
  inject: {
    rootTable: {
      from: "mm-table",
      default: null,
    },
  },
  computed: {
    state() {
      return this.rootTable.store.state
    },
    customCheckboxProps() {
      const row = this.row
      const rowSelection = this.rootTable.rowSelection

      return rowSelection && rowSelection.getCheckboxProps
        ? rowSelection.getCheckboxProps(row, this.rowIndex)
        : {}
    },
    checkboxProps() {
      const row = this.row
      const rowKey = this.rootTable.rowKey
      return {
        value: rowKey ? get(row, rowKey) : row,
        ...this.customCheckboxProps,
      }
    },
    colStyle() {
      return this.sticky ? {
        position: "sticky",
        left: "0",
        zIndex: "2",
      } : null
    },
    colClassName() {
      return this.sticky ? "mm-tsticky" : ""
    },
  },
  methods: {
    inputHandler(val) {
      this.state.selectedRows = val
    },
  },
}
</script>
