import React from 'react';
import { SvgWrapper, ResponsiveWrapper } from 'app/shared/modules/chart/core';
import percentagePipe from 'app/shared/pipes/percent.pipe';

const PROGRESS_BAR_COLORS = [
  '#B5E0F4',
  '#0073AB',
  '#4DB5AB',
  '#D6EAE9',
];

export const SUB_PROGRESS_COLOR = '#E69C56';

export const getProgressBarColor = (index: number) => {
  return PROGRESS_BAR_COLORS[index % PROGRESS_BAR_COLORS.length];
};

const defaultHeight = 16;
const defaultFontSize = 12;

const sum = (previousValue, currentValue) => previousValue + currentValue;

const scaleValues = (values: number[], scale: number) => {
  const maxValue = values.reduce(sum, 0);
  return values.map(value => (value * scale) / maxValue);
};

const getPercentages = (values: number[], subValues?: number[]) => {
  const maxValue = values.reduce(sum, 0);
  return values.map((value, index) => ({
    value: percentagePipe.format(value * 100 / maxValue),
    position: values.slice(0, index).reduce(sum, 0) + value / 2,
    subValue: subValues && subValues[index] ? percentagePipe.format(subValues[index]) : undefined,
  }));
};

export interface Props {
  values: number[];
  barKey: string;
  subProgress?: number[];
}

export const ProgressBar = ({ values, barKey, subProgress }: Props) => {
  return <div className="c-progress-bar__container">
    <ResponsiveWrapper>
      {(size) => {
        const pathName = window.location.pathname;
        const bar: number[] = scaleValues(values, Number(size?.width));
        const percentages: { 
          value: string, 
          position: number, 
          subValue: string | undefined }[] = getPercentages(bar, subProgress);

        // @ts-ignore*
        return <SvgWrapper height={size?.height} width={size?.width} margin={{ top: 0, left: 0 }}>
          <defs>
            <clipPath id={`progress-bar-round-corner-clip-${barKey}`}>
              <rect 
                width={size?.width} 
                rx={defaultHeight / 3} 
                ry={defaultHeight / 3} 
                height={defaultHeight * 3 / 4} />
            </clipPath>
            <clipPath id={`sub-progress-bar-round-corner-clip-${barKey}`}>
              <rect 
                width={Number(size?.width) - 2} 
                x={1} 
                y={1} 
                rx={defaultHeight / 3} 
                ry={defaultHeight / 3} 
                height={(defaultHeight * 3 / 4) - 2} />
            </clipPath>
          </defs>
          {bar.map((barChunk, index) => {
            const position = bar.slice(0, index).reduce(sum, 0);
            return <g key={barKey + index.toString()}>
              <rect
                clipPath={`url(${pathName}#progress-bar-round-corner-clip-${barKey})`}
                x={position}
                height={defaultHeight}
                width={barChunk}
                fill={getProgressBarColor(index)}
              />
              {subProgress && <rect
                className="u-animate-fade-in--fast"
                clipPath={`url(${pathName}#sub-progress-bar-round-corner-clip-${barKey})`}
                x={position + 1}
                y={1}
                height={defaultHeight}
                width={barChunk * subProgress[index] / 100}
                fill={SUB_PROGRESS_COLOR}
              />}
            </g>;
          })}
          {percentages.map((percentage, index) => <g key={barKey + index.toString()} className="c-progress-bar__percentage o-text__label">
            <text
              textAnchor="middle"
              x={percentage.position}
              y={defaultHeight + 2 * defaultFontSize}
            >
              {percentage.value}
            </text>
            {percentage.subValue && <text
              className="u-animate-fade-in--fast"
              textAnchor='middle'
              x={percentage.position}
              y={defaultHeight + 3 * defaultFontSize + 4}
              fill={SUB_PROGRESS_COLOR}
            >
              {percentage.subValue}
            </text>}
          </g>)}
        </SvgWrapper>;
      }}
    </ResponsiveWrapper>
  </div>;
};