<script>
import { getValue, isEmptyValue, isCustomTypeRender, customTypeRender } from "./utils"

const DEFAULT_SPAN_ATTRS = {
  colspan: undefined,
  rowspan: undefined,
}
export default {
  props: {
    row: [Object, Array],
    column: Object,
    rowIndex: Number,
    colIndex: Number,
    onClick: Function,
    spanMethod: Function,
  },
  inject: {
    rootTable: {
      from: "mm-table",
      default: null,
    },
  },
  computed: {
    columnData() {
      return {
        column: this.column,
        row: this.row,
        rowIndex: this.rowIndex,
        colIndex: this.colIndex,
        key: this.column.key,
        value: getValue({ row: this.row, column: this.column }),
      }
    },
    spanAttrs() {
      const row = this.row
      const rowIndex = this.rowIndex
      const column = this.column
      const colIndex = this.colIndex

      return this.spanMethod
        ? this.spanMethod({ row, column, rowIndex, colIndex })
        : DEFAULT_SPAN_ATTRS
    },

    cellClassName() {
      const column = this.column
      return [
        "mm-table-cell",
        {
          [column.className]: column.className,
          "mm-table-cell--ellipsis": column.ellipsis,
        },
      ]
    },
    cellStyle() {
      const column = this.column
      return {
        textAlign: column.align || "left",
        ...column.style,
      }
    },
    title() {
      const column = this.column
      return !column.render && column.ellipsis ? this.columnData.value : ""
    },
    colStyle() {
      const { offset, fixed } = this.column
      return !isEmptyValue(offset)
        ? {
          position: "sticky",
          right: fixed === "right" && `${offset}px`,
          left: fixed === "left" && `${offset}px`,
          zIndex: "2",
        }
        : null
    },
    scrolled() {
      const { fixed } = this.column
      const {
        scrollX,
        tableWidth,
        containerWidth,
        canScrollX,
        canScrollY,
        scrollBarWidth,
      } = this.rootTable.store.layout

      return (
        (fixed === "left" && scrollX > 0) ||
        (fixed === "right" &&
          canScrollX &&
          scrollX + containerWidth - (canScrollY ? scrollBarWidth : 0) < tableWidth)
      )
    },
    colClassName() {
      const { offset, isLast, fixed } = this.column
      return !isEmptyValue(offset)
        ? {
          "mm-tsticky": true,
          "mm-tsticky--left-end": this.scrolled && isLast && fixed === "left",
          "mm-tsticky--right-end": this.scrolled && isLast && fixed === "right",
        }
        : null
    },
  },
  methods: {
    clickHandler(e) {
      const row = this.row
      const rowIndex = this.rowIndex
      const colIndex = this.colIndex

      this.onClick(e, { row, rowIndex, colIndex })
    },
  },
  render(h) {
    const { column, columnData } = this
    return (
      <td
        colSpan={this.spanAttrs.colspan}
        rowSpan={this.spanAttrs.rowSpan}
        onClick={this.clickHandler}
        style={this.colStyle}
        class={this.colClassName}
      >
        <div
          class={this.cellClassName}
          style={this.cellStyle}
          title={this.title}
        >
          {
            isCustomTypeRender(column) ? customTypeRender(h, columnData) : column.render
              ? column.render(h, columnData)
              : this.rootTable.$scopedSlots[column.slot]
                ? this.rootTable.$scopedSlots[column.slot](columnData)
                : isEmptyValue(columnData.value)
                  ? column.placeholder || ""
                  : columnData.value}
        </div>
      </td>
    )
  },
}
</script>
