import React from 'react';
import numberPipe from 'app/shared/pipes/number.pipe';
import percentPipe from 'app/shared/pipes/percent.pipe';
import { TABLE_CELL } from 'app/shared/modules/tables/factories/tableCell/tableCell.constans';
import { AlertFlag } from 'app/shared/components/alertFlag/alertFlag';
import { TableCellEditContainer } from 'app/shared/containers/tableCells/tableCellEdit.container';
import { TableCellInfo } from 'app/shared/modules/tables/tableCells/tableCellInfo';
import { TableCellOperation } from 'app/shared/modules/tables/tableCells/tableCellOperation';
import { TableCellTotal } from 'app/shared/modules/tables/tableCells/tableCellTotal';
import { TableCellBold } from 'app/shared/modules/tables/tableCells/tableCellBold';
import { TableCellPerformance } from 'app/shared/modules/tables/tableCells/tablePerformanceCell';

const elementCaseTypes = [ TABLE_CELL.EDIT, TABLE_CELL.INFO, TABLE_CELL.OPERATION, TABLE_CELL.FLAG, TABLE_CELL.TOTAL, TABLE_CELL.BOLD,
  TABLE_CELL.BOLD, TABLE_CELL.BADGE, TABLE_CELL.BADGE_INDICATORS, TABLE_CELL.BADGE_INDICATORS_THIN, TABLE_CELL.BADGE_INDICATORS_BACKGROUND, TABLE_CELL.PERFORMANCE ] as const;
const stringCaseTypes = [ TABLE_CELL.STRING, TABLE_CELL.NUMBER, TABLE_CELL.PERCENTAGE ] as const;

interface ElementCase {
  type: typeof elementCaseTypes[number];
}
interface StringCase {
  type: typeof stringCaseTypes[number];
}
interface DefaultCase<T> {
  type?: Exclude<typeof elementCaseTypes[number] & typeof stringCaseTypes[number], string>;
  value: T;
}

export class TableCellFactory {
  static build<T extends ElementCase>(data: T): React.ReactElement;
  static build<T extends StringCase>(data: T): string;
  static build<T>(data: DefaultCase<T>): T;
  static build(data) {
    switch (data.type || data) {
      case TABLE_CELL.STRING:
        return data.value;
      case TABLE_CELL.NUMBER:
        return numberPipe.format(data.value);
      case TABLE_CELL.EDIT:
        return <TableCellEditContainer onClick={() => {}} paramId={data.value}/>;
      case TABLE_CELL.INFO:
        return <TableCellInfo value={data.value} info={data.info} />;
      case TABLE_CELL.OPERATION:
        return <TableCellOperation value={data.value} operator={data.operator}/>;
      case TABLE_CELL.FLAG:
        return <AlertFlag count={data.count}/>;
      case TABLE_CELL.TOTAL:
        return <TableCellTotal value={data.value} total={data.total}/>;
      case TABLE_CELL.BOLD:
        return <TableCellBold value={data.value}/>;
      case TABLE_CELL.PERCENTAGE:
        return percentPipe.format(data.value);
      case TABLE_CELL.BADGE:
        return <div className={'c-badge c-badge--border c-badge--full c-badge--no-padding'}>{data.value}</div>;
      case TABLE_CELL.BADGE_INDICATORS:
        return <div className={'c-badge c-badge--full c-badge--border'}>
          <span className="c-badge__indicator">{data.indicator}</span>
          <span className="c-badge__value">{data.value}</span>
        </div>;
      case TABLE_CELL.BADGE_INDICATORS_THIN:
        return <div className={'c-badge c-badge--full c-badge--border'}>
          <span className="c-badge__indicator u-font-weight--normal">{data.indicator}</span>
          <span className="c-badge__value u-font-weight--normal">{data.value}</span>
        </div>;
      case TABLE_CELL.BADGE_INDICATORS_BACKGROUND:
        return <div className={'c-badge c-badge--full c-badge--background'}>
          <span className="c-badge__indicator">{data.indicator}</span>
          <span className="c-badge__value">{data.value}</span>
        </div>;
      case TABLE_CELL.PERFORMANCE:
        return <TableCellPerformance value={data.value} performance={data.performance} lastConsumptions={data.lastConsumptions}/>;
      default:
        return data.value;
    }
  }
}