"use client"
import { H6 } from '@/components/ui/typography';
import { useTranslations } from 'next-intl';
import React, { useEffect, useRef, useState, } from 'react';
import Speedometer, { Progress, Marks, Indicator, Arc } from 'react-speedometer';

interface Props {
    value: number;
}


const SpeedOdomoter: React.FC<Props> = ({ value }) => {
    const [animatedValue, setAnimatedValue] = useState(value);
    const requestRef = useRef<number>();
    const prevValueRef = useRef(value);
    const t = useTranslations()
    useEffect(() => {
        const duration = 500;
        const easeOutQuad = (t: number) => t * (2 - t);

        const start = performance.now();
        const from = prevValueRef.current;
        const to = value;

        const animate = (time: number) => {
            const elapsed = time - start;
            const progress = Math.min(elapsed / duration, 1);
            const eased = easeOutQuad(progress);
            const currentValue = from + (to - from) * eased;
            setAnimatedValue(currentValue);

            if (progress < 1) {
                requestRef.current = requestAnimationFrame(animate);
            } else {
                prevValueRef.current = to;
            }
        };

        cancelAnimationFrame(requestRef.current!); // cancel any previous animation
        requestRef.current = requestAnimationFrame(animate);

        return () => cancelAnimationFrame(requestRef.current!);
    }, [value]);

    return (
        <div className='mt-4 max-lg:hidden'>

            <Speedometer
                value={animatedValue}
                max={180}
                angle={220}
                fontFamily='squada-one'
                height={180}
            >
                <Arc color='#09090B1A' />
                <Progress color='#0F82EA' />
                <Marks lineColor="red" fontSize={13} step={10}>
                    {(mark, index) => {
                        const isMajorMark = mark.value % 20 === 0;
                        const dashLength = isMajorMark ? 0 : 5;

                        return (
                            <>
                                <line
                                key={index}
                                    x1={mark.coordinates.x1}
                                    y1={mark.coordinates.y1}
                                    x2={mark.coordinates.x2}
                                    y2={mark.coordinates.y2 + dashLength}
                                    stroke={isMajorMark ? '#0F82EA' : '#A0A0A0'}
                                    strokeWidth={isMajorMark ? 2 : 1}
                                />
                                {isMajorMark && (
                                    <text
                                        x={mark.textProps.x}
                                        y={mark.textProps.y}
                                        textAnchor="middle"
                                        transform={mark.textProps.transform}
                                        style={{
                                            fill: mark.value < animatedValue ? '#0F82EA' : '#18181B',
                                            fontSize: '13px',
                                            fontWeight: 'bold',
                                        }}
                                    >
                                        {index * 10}
                                    </text>
                                )}
                            </>
                        );
                    }}
                </Marks>
                <Indicator>
                    {(val, textProps) => (
                        <>
                            <circle
                                cx={140}
                                cy={133}
                                r={40}
                                fill="none"
                                stroke="#09090B33"
                                strokeWidth={4}
                            />
                            <text
                                {...textProps}
                                fontSize={18}
                                fill="#18181B"
                                x={127}
                                y={102.5}
                                textAnchor="middle"
                                fontWeight={600}
                            >
                                {Math.round(Number(val))}
                            </text>
                            <text
                                {...textProps}
                                fontSize={14}
                                fill="#888"
                                x={127}
                                y={120.5}
                                textAnchor="middle"
                                fontWeight={500}
                            >
                                Km/h
                            </text>
                        </>
                    )}
                </Indicator>
            </Speedometer>
            <H6 className='mt-2 lg:mt-14'>{t("Vitesse en temps réel")}</H6>
        </div>
    );
};

export default SpeedOdomoter;