import React from 'react';
import percentPipe from 'app/shared/pipes/percent.pipe';
import { Arrow, FORECAST_TREND } from 'app/shared/modules/chart/arrow/arrow';
import cx from 'classnames';

export interface Props {
  currentForecast: string;
  previousForecast: string;
  ratio: string;
  date: string;
  trend: string;
}

const getTrendType = (trend) => {
  if (trend > 0) {
    return FORECAST_TREND.INCREASING;
  }
  if (trend < 0) {
    return FORECAST_TREND.DECREASING;
  }
  return FORECAST_TREND.STABLE;
};

const getTrend = (trend) => {
  const containerClassName = cx('c-forecast-chart-tooltip__badge', 'o-layout', 'o-layout--aligned', 'o-layout--justified',
    {
      'c-forecast-chart-tooltip__badge--increase': trend > 0,
      'c-forecast-chart-tooltip__badge--decrease': trend < 0,
      'c-forecast-chart-tooltip__badge--stable': trend === 0,
    }
  );

  const textClassName = cx(
    'c-forecast-chart-tooltip__text-badge',
    {
      'c-forecast-chart-tooltip__text-badge--increase': trend > 0,
      'c-forecast-chart-tooltip__text-badge--decrease': trend < 0,
      'c-forecast-chart-tooltip__text-badge--stable': trend === 0,
    }
  );

  return <div className={containerClassName}>
    <svg width={trend !== 0 ? '11px' : '6px'} height={trend !== 0 ? '6px' : '11px'}>
      {Arrow.returnTrendArrow(getTrendType(trend))?.arrow}
    </svg>
    <p className={textClassName}>
      {percentPipe.format(Math.abs(trend * 100))}
    </p>
  </div>;
};

export const ForecastChartTooltip = ({ currentForecast, previousForecast, date, ratio, trend }: Props) => <div>
  <div className="u-margin-bottom--medium">
    <p className="c-forecast-chart-tooltip__text--title">
      {date}
    </p>
  </div>
  <div className="u-margin-bottom">
    <div className="o-layout o-layout--aligned o-layout--justified u-margin-bottom--small">
      <p className="c-forecast-chart-tooltip__text--data">
        {currentForecast}
      </p>
      {getTrend(trend)}
    </div>
    <div className="u-margin-bottom--small">
      <p className="c-forecast-chart-tooltip__text--info">
        Current forecast
      </p>
    </div>
    <p className="c-forecast-chart-tooltip__text--highlight">
      {ratio + '% fixed'}
    </p>
  </div>
  <div className="u-margin-bottom--small">
    <p className="c-forecast-chart-tooltip__text--data">
      {previousForecast}
    </p>
  </div>
  <p className="c-forecast-chart-tooltip__text--info">
    Previous forecast
  </p>
</div>;