import { extend, mergeData } from '../../vue';
import { NAME_SKELETON_TABLE } from '../../constants/components';
import { PROP_TYPE_STRING, PROP_TYPE_NUMBER, PROP_TYPE_BOOLEAN, PROP_TYPE_OBJECT } from '../../constants/props';
import { createArray } from '../../utils/array';
import { makePropsConfigurable, makeProp } from '../../utils/props';
import { BSkeleton } from './skeleton';
import { BTableSimple } from '../table';

// --- Helper methods ---

const isPositiveNumber = value => value > 0;

// --- Props ---

const props = makePropsConfigurable({
  animation: makeProp(PROP_TYPE_STRING),
  columns: makeProp(PROP_TYPE_NUMBER, 5, isPositiveNumber),
  hideHeader: makeProp(PROP_TYPE_BOOLEAN, false),
  rows: makeProp(PROP_TYPE_NUMBER, 3, isPositiveNumber),
  showFooter: makeProp(PROP_TYPE_BOOLEAN, false),
  tableProps: makeProp(PROP_TYPE_OBJECT, {})
}, NAME_SKELETON_TABLE);

// --- Main component ---

// @vue/component
const BSkeletonTable = /*#__PURE__*/extend({
  name: NAME_SKELETON_TABLE,
  functional: true,
  props,
  render(h, _ref) {
    let {
      data,
      props
    } = _ref;
    const {
      animation,
      columns
    } = props;
    const $th = h('th', [h(BSkeleton, {
      props: {
        animation
      }
    })]);
    const $thTr = h('tr', createArray(columns, $th));
    const $td = h('td', [h(BSkeleton, {
      props: {
        width: '75%',
        animation
      }
    })]);
    const $tdTr = h('tr', createArray(columns, $td));
    const $tbody = h('tbody', createArray(props.rows, $tdTr));
    const $thead = !props.hideHeader ? h('thead', [$thTr]) : h();
    const $tfoot = props.showFooter ? h('tfoot', [$thTr]) : h();
    return h(BTableSimple, mergeData(data, {
      props: {
        ...props.tableProps
      }
    }), [$thead, $tbody, $tfoot]);
  }
});

export { BSkeletonTable, props };
