import React from 'react';
import percentPipe from 'app/shared/pipes/percent.pipe';
import cx from 'classnames';

export interface BunkerConsumptionCalculationsRowData {
  type: string;
  days?: number;
  daysPercentage?: number;
  reported?: number;
  virtual?: number;
  difference?: number;
}

interface DataRowProps {
  data: BunkerConsumptionCalculationsRowData;
  total?: boolean;
}

const DataRow = ({ data }: DataRowProps) => {
  const isTotal = data.type === 'total';

  const cellStyle = cx(
    'c-bunker-consumption-calculations-rows__cell',
    'c-bunker-consumption-calculations-rows__cell--data',
  );

  const cellTextStyle = cx(
    { 'c-bunker-consumption-calculations-rows__data--text': !isTotal },
    { 'c-bunker-consumption-calculations-rows__data--additional-data': isTotal },
  );


  const rowStyles = cx(
    'c-bunker-consumption-calculations-rows__row',
    'c-bunker-consumption-calculations-rows__row--main-data',
    'c-bunker-consumption-calculations-rows__row--padded',
    { 'c-bunker-consumption-calculations-rows__row--no-background-color': isTotal },
    { 'c-bunker-consumption-calculations-rows__row--row-total': isTotal },
  );

  const getDaysPercentage = (data: BunkerConsumptionCalculationsRowData) => data.daysPercentage
    ? <span className="c-bunker-consumption-calculations-rows__data--sub-text">
      {'(' + percentPipe.format(data.daysPercentage * 100, 1) + ')'}
    </span>
    : '';

  return (
    <div className={rowStyles}>
      <div className={cellStyle}>
        <p className={cellTextStyle}>
          <span>{data.days !== null && data.days !== undefined ? data.days : '-'}</span>
          <span>
            {!isTotal
              ? getDaysPercentage(data)
              : data.days !== null && data.days !== undefined
                ? <span className="u-margin-left--tiny">on-hire-days</span>
                : ''
            }
          </span>
        </p>
      </div>
      <div className={cellStyle}>
        <p className={cellTextStyle}>{data.reported !== null && data.reported !== undefined ? data.reported: `-`}</p>
      </div>
      <div className={cellStyle}>
        <p className={cellTextStyle}>{data.virtual !== null && data.virtual !== undefined ? data.virtual: `-`}</p>
      </div>
      <div className={cellStyle} >
        <p className={cellTextStyle}>{data.difference !== null && data.difference !== undefined ? data.difference: `-`}</p>
      </div>
    </div>
  );
};

interface SummaryRowProps {
  difference: number;
  vesselName: string;
}

const SummaryRow = ({ difference, vesselName }: SummaryRowProps) => {
  const dataClassName = cx(
    'c-bunker-consumption-calculations-rows__data',
    'c-bunker-consumption-calculations-rows__data--summary',
    { 'c-bunker-consumption-calculations-rows__data--positive': difference <= 0 },
  );
  const suffixClassName = cx(
    'c-bunker-consumption-calculations-rows__data',
    'c-bunker-consumption-calculations-rows__data--summary-suffix',
    { 'c-bunker-consumption-calculations-rows__data--positive': difference <= 0 },
  );

  return (
    <div className='c-bunker-consumption-calculations-rows__row c-bunker-consumption-calculations-rows__row--summary'>
      <p className='c-bunker-consumption-calculations-rows__label--summary'>
        {`Total difference between ${vesselName} and virtual pool vessel`}
      </p>
      {difference !== null && true && <div className="o-layout o-layout--align-end">
        <p className="u-margin-bottom--none">
          <span className={dataClassName}>
            {difference}
          </span>
          <span className={suffixClassName}>
            {` mt`}
          </span>
        </p>
      </div>}
    </div>
  );
};

const consumptionColumnLabels = [
  { text: `ON-HIRE DAYS`, type: `DAYS` },
  { text: `REPORTED BUNKER CONSUMPTION`, type: `MT` },
  { text: `VIRTUAL POOL VESSEL CONSUMPTION`, type: `MT` },
  { text: `DIFFERENCE`, type: `MT` },
];

const ColumnLabelRow = () => {
  return <div className='c-bunker-consumption-calculations-rows__row--padded u-display--flex'>
    {consumptionColumnLabels.map(data => (
      <div key={data.text} className='c-bunker-consumption-calculations-rows__cell c-bunker-consumption-calculations-rows__cell--data'>
        <p className="c-bunker-consumption-calculations-rows__label c-bunker-consumption-calculations-rows__label--column">{data.text ?? '-'}</p>
        <p className="c-bunker-consumption-calculations-rows__label c-bunker-consumption-calculations-rows__label--column-suffix">{data.type}</p>
      </div>
    ))}
  </div>;
};

interface LabelRowProps {
  text: string;
  total?: boolean;
}

const LabelRow = ({ text, total }: LabelRowProps) => {
  const cellStyle = cx(
    'c-bunker-consumption-calculations-rows__row c-bunker-consumption-calculations-rows__row--cell-sized',
    { 'c-bunker-consumption-calculations-rows__row--row-label': total },
  );
  const textStyle = cx(
    '',
    { ' c-bunker-consumption-calculations-rows__label--row': !total },
    { ' c-bunker-consumption-calculations-rows__row--total ': total },
  );

  return (
    <div key={text} className={cellStyle}>
      <div className="c-bunker-consumption-calculations-rows__cell c-bunker-consumption-calculations-rows__cell--row-labels">
        <p className={textStyle}>
          {text}
        </p>
      </div>
    </div>
  );
};

export const BunkerConsumptionCalculationsRows = {
  DataRow,
  SummaryRow,
  ColumnLabelRow,
  LabelRow,
};