import {Progress, Utils} from "tuya-panel-kit";
import {StyleProp, View, ViewProps, ViewStyle} from "react-native";
import React, {PropsWithChildren} from "react";
import {useInterval, useReactive} from "ahooks";

const {convertX: cx} = Utils.RatioUtils;

interface LoadingProp extends PropsWithChildren<ViewProps> {
  color?: string
  progressStyle?: StyleProp<ViewStyle>
}

const LoadingView = (props: LoadingProp = {color: '#ff6600', progressStyle: {width: cx(100), height: cx(100)}}) => {
  const state = useReactive({
    andDegree: 0
  })
  useInterval(() => {
    state.andDegree = (state.andDegree + 20) % 360
  }, 200, {immediate: true})

  const fillColor = props.color || '#ff6600'
  return <View style={[{justifyContent: 'center', alignItems: 'center'}, props.style]}>
    <Progress.Double
      backColor={props.color}
      minThumbFill={fillColor}
      minThumbStroke={props.color}
      thumbFill={fillColor}
      thumbStroke={props.color}
      startColor={props.color}
      endColor={props.color}
      maxValue={360}
      startDegree={0}
      andDegree={state.andDegree}
      style={props.progressStyle}
    />
  </View>
}

export default LoadingView
