import React from 'react';
import {View, Text, StyleSheet, Animated} from 'react-native';

import {useSelector} from 'react-redux';
import {RootState, store} from '@redux/store';

const CircleNumber = ({number}: {number: number}) => {
  /*const currentTheme = useSelector(
    (state: RootState) => state.nonSaveVariables.theme.colors,
  );*/ //disabled for performance

  const colors = store.getState().nonSaveVariables.theme.colors;

  const fadeAnim = React.useRef(new Animated.Value(0)).current;
  const fadeAnim2 = React.useRef(new Animated.Value(1.2)).current;

  React.useEffect(() => {
    Animated.timing(fadeAnim, {
      toValue: 1,
      duration: 300,
      useNativeDriver: true,
    }).start();
  }, [fadeAnim]);

  React.useEffect(() => {
    Animated.timing(fadeAnim2, {
      toValue: 1,
      duration: 500,
      useNativeDriver: true,
    }).start();
  }, [fadeAnim2]);

  return (
    <Animated.View
      style={{
        ...styles.container,
        opacity: fadeAnim,
      }}>
      <Animated.View
        style={{
          ...styles.outerCircle,
          backgroundColor: colors.backgroundDark800 + '44',

          transform: [{scale: fadeAnim2}],
        }}>
        <View
          style={{
            ...styles.innerCircle,
            backgroundColor: colors.backgroundDark400,
          }}>
          <Text style={{...styles.text, color: colors.textLight0}}>
            {number}
          </Text>
        </View>
      </Animated.View>
    </Animated.View>
  );
};

const styles = StyleSheet.create({
  container: {
    justifyContent: 'center',
    alignItems: 'center',
    width: 65 * 1.5,
    height: 65 * 1.5,
  },
  outerCircle: {
    width: 65,
    height: 65,
    borderRadius: 65 / 2,
    //borderWidth: 2,

    justifyContent: 'center',
    alignItems: 'center',
  },
  innerCircle: {
    width: 45,
    height: 45,
    borderRadius: 25,
    justifyContent: 'center',
    alignItems: 'center',
  },
  text: {
    fontSize: 15,
  },
});

export default CircleNumber;
