import React, { useRef, useState } from 'react';
import { View, Text, StyleSheet, Animated, TouchableOpacity, Image, ImageBackground, Easing } from 'react-native';

const WheelOfFortune = () => {
  const rotationValue = useRef(new Animated.Value(0)).current;
  const [clickCount, setClickCount] = useState(3);
  const [rotationEnabled, setRotationEnabled] = useState(false);
  const [resetAngle, setResetAngle] = useState(0);
  const [startAngle, setStartAngle] = useState(0);

  const rotateInterpolate = rotationValue.interpolate({
    inputRange: [0, 1],
    outputRange: [`${startAngle}deg`, `${startAngle + resetAngle}deg`],
  });

  const animatedStyle = {
    transform: [{ rotate: rotateInterpolate }],
  };

  const startRotation = () => {
    if (rotationEnabled) {
      alert('禁止')
      return
    }

    if (clickCount <= 0) {
      alert('抽獎次數(shù)已用完')
      return;
    }

    const animationConfig = {
      toValue: 4,
      duration: 10000,
      easing: Easing.out(Easing.exp),
      useNativeDriver: true,
    };

    setRotationEnabled(true);
    Animated.timing(rotationValue, animationConfig).start(({ finished }) => {
      if (finished) {
        setClickCount(prevClickCount => prevClickCount - 1);
      }
    });
  };

  const resetRotation = () => {
    setRotationEnabled(false);
    setStartAngle(360); // 設置起始角度
    setResetAngle(745); // 設置結束角度
    // setStartAngle(Math.random() * 360); // 設置隨機的起始角度
    rotationValue.setValue(0);
  };

  const resetClickCount = () => {
    setClickCount(3);
  };

  return (
    <View style={styles.container}>
      <ImageBackground
        source={require('../../assets/imgs/luckyWheel/luckyWheel_bg.jpg')}
        style={styles.backgroundImage}
      >
        <View style={{ marginVertical: 50 }}>
          <Text style={styles.title}>幸運抽獎</Text>
          <Text style={styles.cjcs}>剩余抽獎次數(shù)：{clickCount}</Text>
        </View>

        <TouchableOpacity onPress={() => resetRotation()}>
          <View>
            <Text style={styles.cjcs}>重置角度</Text>
          </View>
        </TouchableOpacity>
        <TouchableOpacity onPress={resetClickCount}>
          <View style={{ marginTop: 10 }}>
            <Text style={styles.cjcs}>重置抽獎次數(shù)</Text>
          </View>
        </TouchableOpacity>

        <View style={styles.box}>
          <Animated.Image
            source={require('../../assets/imgs/luckyWheel/img_bg.png')}
            style={[styles.centerImage, animatedStyle]}
          />

          <TouchableOpacity onPress={startRotation}>
            <Image
              source={require('../../assets/imgs/luckyWheel/img_pointer.png')}
              style={styles.overlayImage}
            />
          </TouchableOpacity>
        </View>
      </ImageBackground>
    </View>
  );
};

const styles = StyleSheet.create({
  container: {
    flex: 1,
  },
  backgroundImage: {
    flex: 1,
    width: '100%',
    height: '100%',
    resizeMode: 'cover',
    position: 'absolute',
  },
  centerImage: {
    width: 250,
    height: 250,
    resizeMode: 'contain',
    marginTop: 100,
  },
  overlayImage: {
    width: 100,
    height: 100,
    position: 'relative',
    top: -190,
    resizeMode: 'contain',
  },
  title: {
    fontSize: 35,
    fontWeight: 'bold',
    color: 'white',
    textAlign: 'center',
    zIndex: 999,
  },
  cjcs: {
    fontSize: 16,
    fontWeight: 'bold',
    color: 'white',
    textAlign: 'center',
    zIndex: 999,
  },
  box: {
    height: 250,
    width: 250,
    justifyContent: 'center',
    alignItems: 'center',
    alignSelf: 'center',
    marginTop: 50,
  },
});

export default WheelOfFortune;