// node modules
import React from 'react';

// local files
import checkIcon from "../../../assets/check_icon_white.svg";
import { palette } from "../../../theme/palette";

export const getCorrectInput = (i: number, steps: number, percents: number) => {
    if(!i) return '';

    if(i / steps * 100 <= percents) return <img style={{ width: 9 }} src={checkIcon} alt=""/>;

    return i;
}

export const getCorrectColor = (i: number, steps: number, percents: number, colors: string[] | string, backgroundColor?: string) => {
    if(i / steps * 100 <= percents) {
        return !colors[i - 1] ? colors[i] : colors[i-1]
    }

    return backgroundColor || palette.gray_400
}

export const getIndexColorToTitle = (correctPercents: number, steps: number, colors: string[] | string) => {
    let index =  Math.floor(steps*correctPercents/100);

    if(index === colors.length) {
        index = index - 1;
    }

    return index;
}
