import React from 'react';
import {RulerProgressBarStyle as S} from './styles/ruler-progress-bar.style';
import {IRulerProgressProps} from './ruler-progress-bar.types';
import {TooltipComponent} from '../..';
import InfoCircle from 'herein-icon/info-circle';
import {defaultIndicatorConfig} from './config';

export const RulerProgressBar: React.FC<IRulerProgressProps> = ({
    header,
    setting,
    amount,
    containerClassName,
    tooltipClassName,
    wrapperBox = true,
    isRtl = false,
}) => {
    let achievementAmount;

    if (Number(amount) > 100) achievementAmount = 100;
    else if (Number(amount) < 0) achievementAmount = 0;
    else achievementAmount = Number(amount);

    return (
        <>
            <S.Container wrapperBox={wrapperBox} className={containerClassName}>
                <S.Header>
                    <S.HeaderLeftSection>
                        <S.Title className={header.className}>
                            {header.title}
                        </S.Title>
                        {header.tooltip && (
                            <S.Tooltip className={header.containerClassName}>
                                <TooltipComponent
                                    placement='top'
                                    {...header.tooltip}
                                >
                                    <InfoCircle
                                        data-testid='infoCircleIcon'
                                        className={`text-lg text-GRAY-500 ${header?.iconClassName}`}
                                    />
                                </TooltipComponent>
                            </S.Tooltip>
                        )}
                    </S.HeaderLeftSection>
                    {header.rightSection && (
                        <S.HeaderRightSection>
                            <S.LeftSectionText
                                className={header.rightSection.className}
                            >
                                {header.rightSection.title}:{' '}
                                {header.rightSection.value}
                            </S.LeftSectionText>
                        </S.HeaderRightSection>
                    )}
                </S.Header>
                <S.RulerContainer isRtl={isRtl}>
                    <S.RulerProgress
                        color={setting?.color}
                        colorAmount={setting?.colorAmount}
                        style={{width: `${achievementAmount}%` || '50%'}}
                    >
                        <S.SimpleTooltip
                            className={tooltipClassName}
                            title={`${achievementAmount}%`}
                            placement='top'
                        >
                            {achievementAmount > 0 ? (
                                <S.ProgressCircleIndicator
                                    color={setting?.color}
                                    colorAmount={setting?.colorAmount}
                                    isRtl={isRtl}
                                />
                            ) : (
                                <></>
                            )}
                        </S.SimpleTooltip>
                    </S.RulerProgress>
                </S.RulerContainer>
                <S.RulerMetric isRtl={isRtl}>
                    {(setting?.indicatorConfig || defaultIndicatorConfig).map(
                        (val, index) => (
                            <S.MetricMainIndicator key={index}>
                                <S.MetricMainIndicatorLine hasText={!!val.text}>
                                    {typeof val.text === 'string' ? (
                                        <S.MetricMainIndicatorText>
                                            {val.text}
                                        </S.MetricMainIndicatorText>
                                    ) : null}
                                </S.MetricMainIndicatorLine>
                            </S.MetricMainIndicator>
                        ),
                    )}
                </S.RulerMetric>
            </S.Container>
        </>
    );
};