import React, { ReactNode } from 'react';
import HoverInfo from 'app/shared/components/hoverInfo/hoverInfo';
import cx from 'classnames';
import numberPipe from 'app/shared/pipes/number.pipe';
import moneyPipe from 'app/shared/pipes/money.pipe';
import { OffHireContainer } from 'app/shared/containers/offHire/offHire.container';

export interface Figures {
  value?: number | string | null;
  totalValue?: number;
  type: 'money' | 'number' | 'text' | 'offhire' | 'comparison';
  iconStyles?: string;
  description: string;
  additionalDescription?: string
  unit?: string;
}
export interface Props {
  header?: string;
  hint?: ReactNode;
  hintIcon?: string;
  boxes: Figures[];
}
const getValue = ({ value, totalValue, type }: Figures) => {
  if (value === null || value === undefined) {
    return '-';
  }
  switch (type) {
    case 'money':
      return moneyPipe.prefixedFormat(Number(value));
    case 'number':
      return numberPipe.format(Number(value), 2);
    case 'text':
      return value;
    case 'comparison':
      return (
        <>
          <span>{value}</span>
          <span className="c-info-box__unit u-margin-left--tiny u-margin-right--tiny">of</span>
          <span>{totalValue}</span>
        </>
      );
    default:
      return value;
  }
};
const InfoBox = ({ header, hint, hintIcon='icon-info-straight', boxes }: Props) => {

  return (
    <div className="c-info-box o-layout o-layout--vertical o-layout--justified o-layout--aligned">
      {header && <div className="c-info-box__header o-layout o-layout--aligned">
        <span className="u-font-size--smaller">{header}</span>
        {hintIcon && hint &&
          <span className="o-gutter-left--small u-display--inline-block">
            <HoverInfo icon={hintIcon} position="top">
              {hint}
            </HoverInfo>
          </span>}
      </div>}

      {boxes && boxes.map(((box, index) => {
        const isFirst = index === 0;
        const classes = cx('o-layout o-layout--aligned', 'u-no-wrap', { 'u-margin-top--medium': !isFirst });

        return (
          <>
            <div className={classes} key={index}>
              <span className="c-info-box__value">
                {getValue(box)}
                {box.unit && <span className="c-info-box__unit u-margin-left--tiny ">{box.unit}</span>}
              </span>
              {(box.type ==='offhire') && <OffHireContainer iconStyles={box.iconStyles} /> }
            </div>
            <span className="c-info-box__description u-font-size--caption">{box.description}</span>
            {box.additionalDescription && <span className='c-info-box__description u-font-size--caption'>{box.additionalDescription}</span>}
          </>
        );
      }))}

    </div>
  );
};

export { InfoBox };