import { StyleSheet, View } from 'react-native'
import { GREEN, TEXT } from '@/src/shared/constants/colors'

export interface NativeGaugeProps {
  value: number
  maxValue?: number
  label?: string
  color?: string
  size?: number
  testID?: string
}

export function NativeGauge(props: NativeGaugeProps) {
  const { value, maxValue = 1, label, color, size = 52 } = props
  const percentage = Math.round((value / maxValue) * 100)
  const gaugeColor = color ?? GREEN[500]

  return (
    <View style={[styles.container, { width: size, height: size }]}>
      <View style={[styles.ring, { borderColor: gaugeColor }]}>
        <View style={[styles.valueText, { width: size * 0.7, height: size * 0.7, borderRadius: (size * 0.7) / 2, borderWidth: 3, borderColor: gaugeColor, alignItems: 'center', justifyContent: 'center' }]}>
          <View />
        </View>
      </View>
      {label ? <View style={styles.labelContainer} /> : null}
    </View>
  )
}

const styles = StyleSheet.create({
  container: {
    alignItems: 'center',
    justifyContent: 'center',
  },
  ring: {
    width: '100%',
    height: '100%',
    borderRadius: 9999,
    borderWidth: 4,
    alignItems: 'center',
    justifyContent: 'center',
  },
  valueText: {},
  labelContainer: {
    marginTop: 4,
  },
})
