import React, { ReactNode } from 'react';
import * as DataTable from 'app/shared/modules/tables/dataTable/dataTable';
import { CellValueType } from 'app/shared/modules/tables/dataTable/dataTable.types';
import { PoolPointsDataState } from 'app/modules/vesselDetails/root/store/vesselDetails.types';
import { PoolPointsColumnConfig } from '../../poolPoints.constants';


interface Props {
  config: PoolPointsColumnConfig[];
  data: PoolPointsDataState[];
  children?: ReactNode;
}

const getDefaultColumnWidth = (config: PoolPointsColumnConfig[]) => {
  const fixedWidthSum = config.map(item => item.width ?? 0).reduce((first, second) => first + second);
  const defaultWidth = (100 - fixedWidthSum) / (config.filter(item => !item.width).length);

  return defaultWidth;
};


const getCell = (item: PoolPointsColumnConfig, value: CellValueType, defaultColumnWidth: number, key: number) => {
  switch (item.cellType) {
    case 'boolean':
      return <DataTable.Cells.BoolCell
        key={`key-${key}`}
        value={value as boolean}
        width={item.width}
        align={item.align}
        defaultColumnWidth={defaultColumnWidth}

      />;
    case 'date':
    case 'fullDate':
      return <DataTable.Cells.DateCell
        key={`key-${key}`}
        value={value as string}
        width={item.width}
        align={item.align}
        defaultColumnWidth={defaultColumnWidth}
        showFullDate={item.cellType === 'fullDate'}
      />;
    case 'number':
      return <DataTable.Cells.NumberCell
        key={`key-${key}`}
        value={value as number}
        width={item.width}
        align={item.align}
        defaultColumnWidth={defaultColumnWidth}
      />;
    case 'text':
      return <DataTable.Cells.TextCell
        key={`key-${key}`}
        value={value as string}
        width={item.width}
        align={item.align}
        defaultColumnWidth={defaultColumnWidth}
      />;
    case 'spacer':
      return <DataTable.Cells.TextCell
        key={`key-${key}`}
        value= ''
        width={item.width}
        align={item.align}
        defaultColumnWidth={defaultColumnWidth}
      />;
    default:
      return 'Invalid cell type';
  }
};
const PoolPointsDataTable = ({ config, data, children }: Props) => {

  const defaultColumnWidth = getDefaultColumnWidth(config);

  return (
    <>
      { data?.length > 0 &&
          <DataTable.ScrollableContainer extraClass='u-font--clear-spacings'>
            <DataTable.HeaderRow>
              {config.map((item, index) => <DataTable.HeaderRowColumn
                key={index}
                width={item.width}
                text={item.columnName}
                description={item.description}
                align={item.align}
                isColumnSorted={false}
                isAscendingOrder
                defaultColumnWidth={defaultColumnWidth}
              />)}
            </DataTable.HeaderRow>
            {data.map((item, index) =>
              <DataTable.DataRow key={index} item={item} >
                {config.map((cfg, index) => getCell(cfg, cfg.getValue(item), defaultColumnWidth, index))}
              </DataTable.DataRow>
            )}
            {children}
          </DataTable.ScrollableContainer>
      }
    </>
  );
};

export { PoolPointsDataTable };