import React, {FC} from 'react';

import {ProgressCircleStyle as S} from '../../../styles/progress-circle.style';
import {PieChart, Pie, Cell, ResponsiveContainer} from 'recharts';
import {useTheme} from '@mui/material/styles';
import {IProgressCircle} from '../../../progress-circle.type';

export const ProgressCircleMDComponent: FC<IProgressCircle> = (props) => {
    const {percentNumberVisibility, value, label, color = 'gray'} = props;
    const {palette} = useTheme();
    const COLORS = [palette[color][900], 'transparent'];

    const innerRadius = '80%';
    const outerRadius = '100%';
    const cornerRadius = 100;
    const cx = 114;
    const cy = 114;

    const data = [
        {name: 'A', value: value},
        {name: 'B', value: 100 - value},
    ];

    return (
        <S.Container {...props}>
            {percentNumberVisibility && (
                <S.Value className='value'>{value}%</S.Value>
            )}
            {label && <S.Title className='title'>{label}</S.Title>}
            <ResponsiveContainer width={'100%'} height={240}>
                <PieChart>
                    <Pie
                        isAnimationActive={false}
                        dataKey='value'
                        startAngle={180}
                        endAngle={0}
                        data={[{value: 100}]}
                        cx={cx}
                        cy={cy}
                        innerRadius={innerRadius}
                        outerRadius={outerRadius}
                        fill={palette.gray[200]}
                        stroke='none'
                        cornerRadius={cornerRadius}
                    />
                    <Pie
                        isAnimationActive={false}
                        data={data}
                        innerRadius={innerRadius}
                        outerRadius={outerRadius}
                        cornerRadius={cornerRadius}
                        endAngle={0}
                        stroke='none'
                        dataKey='value'
                        startAngle={180}
                        cx={cx}
                        cy={cy}
                    >
                        {data.map((_, index) => (
                            <Cell
                                key={`cell-${index}`}
                                fill={COLORS[index % COLORS.length]}
                            />
                        ))}
                    </Pie>
                </PieChart>
            </ResponsiveContainer>
        </S.Container>
    );
};