import clsx from 'clsx';
import React from 'react';
import type { Data } from '../../../../types/data';
import type { Column } from '../../List.model';
import classes from './ListRowCell.scss';
import { renderData } from './renderData';

interface ListRowCellProps<T extends Data> {
  column: Column<T>;
  data: T;
  horizontalTextAlign?: 'left' | 'right' | 'center';
  verticalTextAlign?: 'start' | 'center' | 'end';
  textWrap?: boolean;
  dateFormatter: Intl.DateTimeFormat;
  numberFormatter: Intl.NumberFormat;
}

export const ListRowCell = <T extends Data>({
  column,
  data,
  horizontalTextAlign = 'left',
  verticalTextAlign = 'center',
  textWrap = false,
  dateFormatter,
  numberFormatter,
}: ListRowCellProps<T>): JSX.Element => {
  const { columnData, tooltip, isDataTestIdSet } = renderData<T>(
    column,
    data,
    dateFormatter,
    numberFormatter,
  );

  return (
    <div
      key={column.key ?? (column.propertyName as string)}
      className={classes.cellWrapper}
    >
      <div
        className={clsx(classes.cell, { [classes.nowrap]: !textWrap })}
        title={tooltip}
        style={{
          justifySelf: column.horizontalColumnAlign, // Horizontal alignment based on column config
          alignSelf: verticalTextAlign, // Vertical alignment based on props
          textAlign: horizontalTextAlign, // Additional text alignment inside the cell
        }}
        data-test-id={
          isDataTestIdSet
            ? null
            : `list-entry-property:${column.propertyName as string}`
        }
      >
        {columnData}
      </div>
    </div>
  );
};
