import {styled} from '@mui/material/styles';
import {IProgressIndicatorProps} from '../ruler-progress-bar.types';
import TooltipMUI, {tooltipClasses} from '@mui/material/Tooltip';
import React from 'react';
import {ITooltip} from '../../..';

const Container = styled('div')<{wrapperBox: boolean}>`
    width: 100%;
    padding: ${({wrapperBox}) => (wrapperBox ? '24px' : '0px')};
    border-radius: ${({theme}) => theme.spacing(0.75)};
    border: ${({theme, wrapperBox}) =>
        wrapperBox ? `1px solid ${theme.palette.gray[300]}` : 'none'};
`;

const Header = styled('div')`
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
`;

const HeaderLeftSection = styled('div')`
    display: flex;
    flex-direction: row;
    align-items: center;
`;

const HeaderRightSection = styled('div')`
    display: flex;
    flex-direction: row;
    align-items: center;
`;

const LeftSectionText = styled('span')`
    font-size: 14px;
    font-weight: 500;
    color: ${({theme}) => theme.palette.gray[700]};
`;

const Title = styled('span')`
    font-size: 18px;
    font-weight: 500;
    ${({theme}) => theme.palette.gray[900]};
`;

const Tooltip = styled('div')`
    margin-inline-start: 5px;
    margin-top: 8px;
    color: ${({theme}) => theme.palette.gray[300]};
`;

const RulerContainer = styled('div')<{isRtl?: boolean}>`
    margin-top: 9px;
    height: 16px;
    width: 100%;
    border-radius: 10px;
    background-color: ${({theme}) => theme.palette.gray[200]};
    direction: ${({isRtl}) => (isRtl ? 'rtl' : 'ltr')};
`;

const RulerMetric = styled('div')<{isRtl?: boolean}>`
    width: 100%;
    display: flex;
    flex-direction: row;
    margin-top: 4px;
    height: 26px;
    justify-content: space-between;
    gap: 1px;
    position: relative;
    ${({isRtl}) => (isRtl ? 'direction: rtl;' : 'direction: ltr;')}
`;

const MetricMainIndicator = styled('div')`
    display: flex;
    flex-direction: column;
    align-items: center;
    z-index: 1;

    &:first-of-type {
        align-items: flex-start;
        position: relative;
        span {
            position: absolute;
            top: 12px;
            left: -4px;
        }
    }
    &:nth-last-child(2) {
        align-items: flex-end;
        position: relative;

        span {
            position: absolute;
            top: 12px;
            right: -10px;
        }
    }
`;

const MetricMainIndicatorLine = styled('div')<{hasText: boolean}>`
    width: 1px;
    height: ${({hasText}) => (hasText ? '10px' : '5px')};
    background-color: ${({theme}) => theme.palette.gray[300]};
    position: relative;
`;

const MetricMainIndicatorText = styled('span')`
    position: absolute;
    font-size: 10px;
    top: 12px;
    right: -10px;
    font-weight: 500;
    line-height: 16px;
    text-align: center;
    color: ${({theme}) => theme.palette.gray[400]};
`;

const RulerProgress = styled('div')<IProgressIndicatorProps>`
    background-color: ${({theme, color, colorAmount}) =>
        theme.palette[color || 'gray'][colorAmount || 500]};
    width: 70%;
    height: 100%;
    position: relative;
    border-radius: 10px;
`;

const ProgressCircleIndicator = styled('div')<
    IProgressIndicatorProps & {isRtl?: boolean}
>`
    width: 12px;
    height: 12px;
    background-color: ${({theme}) => theme.palette.white};
    border-radius: 100%;
    position: absolute;
    border: 2px solid
        ${({theme, color, colorAmount}) =>
            theme.palette[color || 'gray'][colorAmount || 500]};

    ${({isRtl}) => (isRtl ? 'left: 2px;' : 'right: 2px;')}

    top: 2px;
    bottom: 2px;
`;

const SimpleTooltip = styled(({className, ...props}: ITooltip) => (
    <TooltipMUI {...props} arrow classes={{popper: className}} />
))(({theme}) => ({
    [`& .${tooltipClasses.arrow}`]: {
        color: theme.palette.white,
        overflow: 'visible',
        ['::before']: {
            borderRadius: 2,
            width: 13,
            height: 13,
        },
    },
    [`& .${tooltipClasses.tooltip}`]: {
        borderRadius: 8,
        backgroundColor: '#fff',
        boxShadow: `${theme.shadows[9]}`,
        padding: '16px 12px 16px 12px',
        display: 'flex',
        justifyContent: 'center',
        alignItems: 'center',
        color: `${theme.palette.gray[700]}`,
        fontSize: '1.5rem',
        fontWeight: '700',
    },
}));

export const RulerProgressBarStyle = {
    Container,
    Header,
    HeaderRightSection,
    HeaderLeftSection,
    LeftSectionText,
    Title,
    Tooltip,
    RulerContainer,
    RulerProgress,
    ProgressCircleIndicator,
    RulerMetric,
    MetricMainIndicator,
    MetricMainIndicatorLine,
    MetricMainIndicatorText,
    SimpleTooltip,
};