import { FProgressGradientProgress, FProgressColorGradient } from './progress-options';

function stripPercentToNumber(percent: string): number {
    return +percent.replace('%', '');
}

export const sortGradient = (gradients: FProgressGradientProgress) => {
    let tempArr: Array<{ key: number; value: string }> = [];
    Object.keys(gradients).forEach(key => {
      const value = gradients[key];
      const formatKey = stripPercentToNumber(key);
      if (!isNaN(formatKey)) {
        tempArr.push({
          key: formatKey,
          value
        });
      }
    });
  
    tempArr = tempArr.sort((a, b) => a.key - b.key);
    return tempArr;
};

export const handleCircleGradient = (strokeColor: FProgressGradientProgress): Array<{ offset: string; color: string }> => {
    return sortGradient(strokeColor).map(({ key, value }) => ({ offset: `${key}%`, color: value }));
};

export const handleLinearGradient = (strokeColor: FProgressColorGradient) => {
    const { from = '#59a1ff', to = '#59a1ff', direction = 'to right', ...rest } = strokeColor;
    if (Object.keys(rest).length !== 0) {
      const sortedGradients = sortGradient(rest as FProgressGradientProgress)
        .map(({ key, value }) => `${value} ${key}%`)
        .join(', ');
      return `linear-gradient(${direction}, ${sortedGradients})`;
    }
    return `linear-gradient(${direction}, ${from}, ${to})`;
};