import React from "react"
import { G, Line, Text } from "react-native-svg"
import { polarToCartesian } from "../helpers/geometry"

type Props = {
    radius: number
    center: number
    minutes: number
    hours: number
    fontSize: number
    strokeWidth: number
    scale: number
    numberColor: string
    markingColor: string
}

const ClockMarkings = (props: Props) => {
    const { radius, center, minutes, hours, fontSize, strokeWidth, scale, numberColor, markingColor } = props
    const minutesArray = new Array(minutes).fill(1)
    const hoursArray = new Array(hours).fill(1)

    const minuteSticks = minutesArray.map((minute, index) => {
        const start = polarToCartesian(center, center, radius, index * 6)
        const end = polarToCartesian(center, center, radius, index * 6)
        return (
            <Line
                stroke={markingColor}
                strokeWidth={2}
                strokeLinecap="round"
                key={index}
                x1={start.x}
                x2={end.x}
                y1={start.y}
                y2={end.y}
            />
        )
    })

    const hourSticks = hoursArray.map((hour, index) => {
        const start = polarToCartesian(center, center, radius - 4 * scale, index * 30)
        const end = polarToCartesian(center, center, radius, index * 30)
        const time = polarToCartesian(center, center, radius - 12 * scale, index * 30)

        return (
            <G key={index}>
                <Line
                    stroke={markingColor}
                    strokeWidth={strokeWidth}
                    strokeLinecap="round"
                    x1={start.x}
                    x2={end.x}
                    y1={start.y}
                    y2={end.y}
                />
                <Text
                    textAnchor="middle"
                    fontSize={fontSize}
                    fontWeight="bold"
                    fill={numberColor}
                    alignmentBaseline="central"
                    x={time.x}
                    y={time.y}>
                    {index === 0 ? 12 : index}
                </Text>
            </G>
        )
    })

    return (
        <G>
            {minuteSticks}
            {hourSticks}
        </G>
    )
}

export default ClockMarkings