<template>
  <tr
    class="bms-table__row"
    :class="{
      'bms-table__row--selected': isItemSelected(currentItem),
      'bms-table__row--disabled': isChildElement,
      'bms-table__row--dense': dense,
    }"
  >
    <td v-if="selectable" class="bms-table__row__cell__checkbox">
      <BmsTooltip
        :direction="TooltipDirection.Right"
        tooltip-text="Vous ne pouvez pas désélectionner un élément unitairement si vous avez choisi de sélectionner la totalité des éléments"
        :activated="selectMode === SelectMode.ALL"
      >
        <BmsInputRadio
          v-if="selectMode === SelectMode.SINGLE"
          :name="uuid()"
          :disabled="selectableDisabled"
          :value="currentItem"
          :model-value="isItemSelected(currentItem) ? currentItem : null"
          @update:model-value="emits('select', currentItem)"
        />
        <UiBmsInputCheckbox
          v-else
          :name="uuid()"
          :disabled="selectMode === SelectMode.ALL || selectableDisabled"
          :model-value="isItemSelected(currentItem)"
          @update:model-value="emits('select', currentItem)"
        />
      </BmsTooltip>
    </td>
    <slot name="default" :row="item">
      <td
        v-for="(cell, index) in headers"
        :class="[getAlignClass(cell), 'bms-table__row__cell']"
        :key="cell.key"
      >
        <div v-if="isChildElement" class="bms-table__row__cell--child-element">
          <CornerDownRight
            v-if="index === 0"
            class="bms-table__row__cell--child-element__icon"
          />
          <slot
            :name="cell.key"
            :row="item.childElement"
            :isChildElement="isChildElement"
          >
            <UiBmsTableCell :item="item.childElement" :cell="cell" />
          </slot>
        </div>
        <div v-else-if="cell?.action" class="bms-table__row__cell--action">
          <slot
            :name="cell.key"
            :row="item"
            :isChildElement="isChildElement"
          ></slot>
        </div>
        <slot
          v-else
          :name="cell.key"
          :row="item"
          :isChildElement="isChildElement"
        >
          <UiBmsTableCell :item="item" :cell="cell" />
        </slot>
      </td>
    </slot>
  </tr>
</template>

<script setup lang="ts">
import { SelectMode, TableHeader, TooltipDirection } from '@/models';
import { v4 as uuid } from 'uuid';
import _isEqual from 'lodash/isEqual';
import _get from 'lodash/get';
import UiBmsInputCheckbox from '../form/UiBmsInputCheckbox.vue';
import BmsTooltip from '../feedback/BmsTooltip.vue';
import { CornerDownRight } from 'lucide-vue-next';
import UiBmsTableCell from './UiBmsTableCell.vue';
import BmsInputRadio from '../form/BmsInputRadio.vue';
import { computed } from 'vue';

interface Props {
  item: any;
  selectedItems: any[];
  selectable: boolean;
  headers: TableHeader[];
  selectMode: SelectMode;
  selectableDisabled?: boolean;
  dense?: boolean;
  isChildElement?: boolean;
}
const props = withDefaults(defineProps<Props>(), {
  dense: false,
  selectableDisabled: false,
});

const emits = defineEmits<{ select: [item: any] }>();

const currentItem = computed(() =>
  props.isChildElement ? props.item.childElement : props.item,
);

const isItemSelected = (item: unknown): boolean => {
  return (
    props.selectMode === SelectMode.ALL ||
    !!props.selectedItems.find((it) => _isEqual(item, it))
  );
};

const getAlignClass = (header: TableHeader) => {
  const align = !header.align ? 'start' : header.align;
  return `u-text-align-${align}`;
};
</script>

<style lang="scss" scoped>
.bms-table__row {
  --table-cell-padding: 1em;
  background-color: var(--bms-white);
  td {
    padding: var(--table-cell-padding);
    background-color: var(--bms-white);
  }

  &--dense {
    --table-cell-padding: 0.5em 1em;
  }
  &--selected {
    :deep(td) {
      background-color: light-dark(
        var(--bms-main-10),
        color-mix(in srgb, var(--bms-main-100) 32%, var(--bms-white))
      );
    }
  }

  &--disabled {
    td {
      color: var(--bms-grey-50);
    }
  }

  &__cell {
    &__checkbox {
      width: 4em;
    }
    &--action {
      display: flex;
      justify-content: end;
    }

    &--empty {
      height: 360px;
    }

    &--child-element {
      display: inline-flex;
      align-items: flex-end;
      &__icon {
        display: flex;
        margin-right: 1em;
      }
    }
  }
}
</style>
