import { exists } from 'fp-ts/Option';
import { pipe } from 'fp-ts/pipeable';
import { BCheckbox } from '../form/checkbox/BCheckbox';
import { isString } from '../../utils/helpers';
import { useInjectedVisibleColumns } from './composables/shared';
import { useInjectedCheckableTable } from './composables/useCheckableTable';
import { useInjectedDraggableTable } from './composables/useDraggableTable';
import { useInjectedSelectableTable } from './composables/useSelectableTable';
import { eqBTableRowData } from './shared';
import { h, defineComponent, computed } from 'vue';
export default defineComponent({
  name: 'b-table-row',
  props: {
    index: {
      type: Number,
      required: true
    },
    row: {
      type: Object,
      required: true
    },
    onRowClick: {
      type: Function
    }
  },

  setup(props, {
    slots
  }) {
    const {
      checkedRowIds,
      variant,
      toggleRow,
      isCheckable
    } = useInjectedCheckableTable();
    const {
      selectedRowIds,
      toggleRowSelection,
      isSelectable
    } = useInjectedSelectableTable();
    const draggable = useInjectedDraggableTable();
    const visibleColumns = useInjectedVisibleColumns();
    const isChecked = computed(() => checkedRowIds.value.has(props.row.id));
    const isSelected = computed(() => selectedRowIds.value.has(props.row.id));
    const classes = computed(() => {
      const isActive = draggable.isActive.value;
      const isDroppable = props.row.isDroppable ?? !!props.row.isDraggable;
      return [{
        'is-selected': isSelected.value,
        'is-checked': isChecked.value,
        'is-draggable': draggable.isDraggable.value && !!props.row.isDraggable,
        'is-droppable': isActive && isDroppable,
        'is-undroppable': isActive && !isDroppable,
        'is-drop-target': isActive && pipe(draggable.target.value, exists(t => eqBTableRowData.equals(t, props.row)))
      }, props.row.classes];
    });
    const dragListeners = computed(() => draggable.useRowDragListeners(props.row, props.index));

    function toggleCheck() {
      toggleRow(props.row);
    }

    function onClick(e) {
      if (props.onRowClick) {
        props.onRowClick(props.row, e);
      }

      if (props.row.isSelectable ?? isSelectable.value) {
        e.stopPropagation();
        toggleRowSelection(props.row);
      }
    }

    return () => {
      const columns = visibleColumns.value.map(column => {
        const children = [];
        const value = column.value ? isString(column.value) ? props.row[column.value] : column.value(props.row) : undefined;
        const columnSlot = slots[column.slotName || column.label];

        if (columnSlot) {
          children.push(columnSlot({
            row: props.row,
            column,
            value
          }));
        } else if (value !== null) {
          children.push(String(value));
        }

        const textClass = column.position === undefined ? 'has-text-left' : column.position === 'is-left' ? 'has-text-left' : column.position === 'is-centered' ? 'has-text-centered' : 'has-text-right';
        return h('td', {
          class: [textClass, {
            'is-sticky-left': column.isSticky
          }],
          'data-label': column.label
        }, children);
      });

      if (isCheckable.value) {
        columns.unshift(h('td', {
          class: 'checkbox-cell'
        }, [h(BCheckbox, {
          modelValue: isChecked.value,
          variant: variant.value,
          isDisabled: props.row.isCheckable === false,
          'onUpdate:modelValue': toggleCheck
        })]));
      }

      return h('tr', {
        class: classes.value,
        onClick,
        draggable: draggable.isDraggable.value && !!props.row.isDraggable,
        ...dragListeners.value
      }, columns);
    };
  }

});
//# sourceMappingURL=BTableRow.js.map