<script lang="tsx">
import { computed, defineComponent, type PropType } from 'vue'
import type { ComputedColumnInterface } from '../DefaultTableInterfaces'
import type { DraggableItem } from './types'

export default defineComponent({
  props: {
    column: {
      type: Object as PropType<ComputedColumnInterface>,
      required: true,
    },
    columnIndex: {
      type: Number,
      required: true,
    },
    horizontalEyesightMargins: {
      type: Array as PropType<number[]>,
      default: () => [],
    },
    row: {
      type: Object as PropType<DraggableItem>,
      required: true,
    },
  },

  setup(props) {
    const styles = computed(() => `
      width: ${props.column.width}px;
      min-width: ${props.column.width}px;
      max-width: ${props.column.width}px;
      overflow: ${props.column.overflow};
      --horizontalEyesightMargin: ${props.horizontalEyesightMargins[props.columnIndex] || 0}px;
    `)

    return () => (
      <div
        class={`ark-ui-table-body-cell ${props.column.horizontalEyesight ? 'ark-ui-table-eyesight' : ''}`}
        style={styles.value}
      >
        <div class="ark-ui-table-body-cell-inner">
          { props.column.field(props.row.item, props.column, props.row.isExpandedRow) }
        </div>
      </div>
    )
  },
})
</script>
