// node modules
import React, { FC, Fragment } from 'react';

// local components
import { Typography } from "../../typography";

// local files
import { theming } from "../../../theme";
import { getCorrectInput, getCorrectColor, getIndexColorToTitle } from "./utils";
import { palette } from "../../../theme/palette";
import { uniqIdGenerator } from "../../../utils/local_utils";
import leftArrow from '../../../assets/left_arrow.svg';
import { useStyles } from "./styles";

export interface ProgressStepperProps {
    steps: number,
    colors: string[] | string;
    percents: number;
    title: string,
    backgroundColor?: string,
    backButton?: boolean,
    handleBack?: () => void,
    stepperHeight?: number
}


export const ProgressStepper: FC<ProgressStepperProps> = ({
    steps,
    colors,
    percents = 0,
    title,
    backgroundColor,
    backButton,
    handleBack,
    stepperHeight,
}) => {
    const {
        wrapper,
        cercle,
        bar,
        coverBlock,
        thinBlock,
        root,
        backBtn,
        paddingWrapper
    } = useStyles({ theme: theming.useTheme() })
    const generatedArray = new Array(steps + 1).fill(true);
    let correctPercents = percents <= 0 || isNaN(percents) ? 1 : percents;
    correctPercents = correctPercents > 100 ? 100 : correctPercents;

    return (
        <div className={paddingWrapper}>
            <div className={root}>
                <div className={wrapper}>
                    {generatedArray.map((_, i) => {
                        return (
                            <Fragment key={uniqIdGenerator()}>
                                {!!i && (<span
                                    style={{
                                        left: 0,
                                        width: `calc(${i}/${steps} * 100%)`,
                                        background: colors[i - 1],
                                        zIndex: steps + 1 - i,
                                        height: stepperHeight
                                    }}
                                    className={bar}
                                />)}
                                <span
                                    style={{
                                        left: `calc(${i}/${steps} * 100%)`,
                                        zIndex: generatedArray.length + 2,
                                        background: getCorrectColor(i, steps, percents, colors, backgroundColor),
                                        color: '#202B47'
                                    }}
                                    className={cercle}
                                >
                                    {getCorrectInput(i, steps, correctPercents)}
                                </span>
                            </Fragment>
                        )
                    })}
                    <div
                        style={{
                            zIndex: generatedArray.length + 1, width: `calc(100% - ${correctPercents}%)`,
                            background: backgroundColor || palette.white,
                            height: stepperHeight
                        }}
                        className={coverBlock}
                    >
                        <div
                            style={{
                                background: backgroundColor || palette.gray_400,
                                height: stepperHeight
                            }}
                            className={thinBlock}
                        />
                    </div>
                </div>
                <Typography
                    style={{ color: colors[getIndexColorToTitle(correctPercents, steps, colors)]}}
                    variant="h4"
                >
                    {title}
                </Typography>
                {backButton && (
                    <img
                        className={backBtn}
                        onClick={handleBack}
                        src={leftArrow}
                        alt=""
                    />
                )}
            </div>
        </div>
    )
};
