import React from 'react';
import { DataTableBaseCell, DataTableBoolCell, DataTableCell } from './dataTable.types';
import numberPipe from 'app/shared/pipes/number.pipe';
import datePipe from 'app/shared/pipes/date.pipe';
import cx from 'classnames';
import { columnWidth } from './dataTable.helper';

export const BaseCell = ({ width, align, children, defaultColumnWidth, extraClass }: DataTableBaseCell) => (
  <div className="c-data-table-base-cell u-display--flex u-flex-column" style={columnWidth(width ?? defaultColumnWidth)}>
    <div className={cx(
      'o-gutter-right--small o-gutter-left--small',
      extraClass,
      { 'u-align-self-end u-align--right': align === 'right' })}>
      {children}
    </div>
  </div>
);

export const NumberCell = ({ value, align, width, defaultColumnWidth, extraClass, invertValueMarking }: DataTableCell<number | undefined | null>) => (
  <BaseCell width={width} align={align} defaultColumnWidth={defaultColumnWidth} extraClass={extraClass}>
    <span className={cx({ 'u-color--money-negative':
      (Boolean(invertValueMarking) && Number(value?.toFixed(2)) > 0)
      || (!invertValueMarking && Number(value?.toFixed(2)) < 0),
    })}>
      {value !== null && !isNaN(value as number) ? numberPipe.format(Number(value?.toFixed(2)), 2) : '-'}
    </span>
  </BaseCell>
);

export const DateCell = ({ value, align, width, showFullDate, defaultColumnWidth, extraClass }: DataTableCell<string> & { showFullDate: boolean }) => (
  <BaseCell width={width} align={align} defaultColumnWidth={defaultColumnWidth} extraClass={extraClass}>
    {showFullDate ? datePipe.formatLong(value) : datePipe.formatShortMonthWithYear(value)}
  </BaseCell>
);

export const BoolCell = ({ value, align, width, defaultColumnWidth, trueValue = 'Yes', falseValue = 'No', extraClass }: DataTableBoolCell) => (
  <BaseCell width={width} align={align} defaultColumnWidth={defaultColumnWidth} extraClass={extraClass}>
    {value ? trueValue : falseValue}
  </BaseCell>
);

export const TextCell = ({ value, align, width, defaultColumnWidth, extraClass }: DataTableCell<string>) => (
  <BaseCell width={width} align={align} defaultColumnWidth={defaultColumnWidth} extraClass={extraClass} >
    {value}
  </BaseCell>
);