import { View, ViewProps } from 'react-native'
import { Progress } from 'tuya-panel-kit'
import React, { PropsWithChildren } from 'react'

export interface CircularProgressProps extends PropsWithChildren<ViewProps> {
  progress: number
  size: number
  strokeWidth: number
}

export function CircularProgress(props: CircularProgressProps) {
  return <Progress.Double
    style={[{ width: props.size, height: props.size }, props.style]}
    disabled={true}
    thumbRadius={Math.trunc(props.strokeWidth / 2) - 0.5}
    minThumbFill={'#f60'}
    minThumbStroke={'#f60'}
    thumbStroke={'#f60'}
    thumbFill={'#f60'}
    thumbStrokeWidth={0}
    scaleHeight={props.strokeWidth}
    minValue={0}
    maxValue={props.progress}
    foreColor={'#f60'}
    startDegree={270}
    andDegree={360}
    renderCenterView={
      <View
        style={{
          position: 'absolute',
          width: props.size - props.strokeWidth,
          height: props.size - props.strokeWidth,
          marginStart: props.strokeWidth,
          marginTop: props.strokeWidth,
          flexDirection: 'row',
          justifyContent: 'center',
          alignItems: 'center',
        }}>
        {props.children}
      </View>
    }/>
}