// ClockProgress.tsx
import React from 'react';
import Svg, { Circle, Path } from 'react-native-svg';

interface ClockProgressProps {
    degree: number; // Valor entre 0 y 360
    width: number; // Ancho del SVG
    height: number; // Alto del SVG
    color: string;
}

function polarToCartesian(cx: number, cy: number, r: number, angleDeg: number) {
    const angleRad = (angleDeg - 90) * Math.PI / 180;
    return {
        x: cx + r * Math.cos(angleRad),
        y: cy + r * Math.sin(angleRad)
    };
}

function describeSector(cx: number, cy: number, r: number, startAngle: number, endAngle: number) {
    const start = polarToCartesian(cx, cy, r, endAngle);
    const end = polarToCartesian(cx, cy, r, startAngle);
    const largeArc = endAngle - startAngle <= 180 ? 0 : 1;

    return [
        `M ${cx},${cy}`,
        `L ${start.x},${start.y}`,
        `A ${r},${r} 0 ${largeArc} 0 ${end.x},${end.y}`,
        'Z'
    ].join(' ');
}

const ClockProgress: React.FC<ClockProgressProps> = ({ degree, width, height, color }) => {
    const path = describeSector(100, 100, 70, 0, degree == 360 ? 359.9 : degree);

    return (
        <Svg width={width} height={height} viewBox="0 0 200 200">
            <Circle cx="100" cy="100" r="70" fill="none" />
            <Circle cx="100" cy="100" r="90" fill="none" stroke={color} strokeWidth="10" />
            <Path d={path} fill={color} />
        </Svg>
    );
};

export default ClockProgress;

// Create a exported function that returns the SVG as a string
export function getClockProgressSVG(degree: number, width: number, height: number, color: string): string {

    const path = describeSector(100, 100, 70, 0, degree == 360 ? 359.9 : degree);

    const svg = (
        `<svg width="${width}" height="${height}" viewBox="0 0 200 200" xmlns="http://www.w3.org/2000/svg">
            <circle cx="100" cy="100" r="70" fill="none"/>
            <circle cx="100" cy="100" r="90" fill="none" stroke="${color}" stroke-width="10"/>
            <path d="${path}" fill="${color}"/>
        </svg>`
    );
    return svg;
}