import React, { useEffect, useRef } from 'react';
import { Animated, Easing, Image, StyleSheet, Text, View } from 'react-native';
import utils from '../../utils/utils';
import TextView from '../../components/TextView';

const size = $vw(35) > 280 ? 280 : $vw(35);

export default StatusImage = ({
  isLoading=false,
  isAuthentic=false,
  isInitial=false,
  isCharging=false,
  isStop=false,
  soc=-1
}) => {
  var rotate = useRef(new Animated.Value(0)).current;
  const spins = () => {
    Animated.loop(
      Animated.timing(rotate, {
        toValue: 1,
        duration: 5000,
        easing: Easing.linear,
        useNativeDriver: true
      })
    ).start();
  }
  useEffect(() => {
    if (isLoading) {
      spins();
    }
  }, [rotate]);
  const spin = rotate.interpolate({
    inputRange: [0, 1],
    outputRange: ['0deg', '360deg']
  })
  return (
    <View style={styles.chargingHeader}>
      <View style={styles.statusView}>
        { isAuthentic
        ? <Image
            style={styles.stepImage}
            resizeMode="contain"
            source={require('../../images/charge3/status-auth.png')}/>
        : (isInitial 
        ? <Image
            style={styles.stepImage}
            resizeMode="contain"
            source={require('../../images/charge3/status-init.png')}/>
        : (isCharging
        ? <Image
            style={styles.stepImage}
            resizeMode="contain"
            source={require('../../images/charge3/status-charge.png')}/>
        : <Image
            style={styles.stepImage}
            resizeMode="contain"
            source={require('../../images/charge3/status-default.png')}/>
        ))}
      </View>
      { isLoading &&
        <Animated.View style={[
          styles.loadingBorder, {
            transform: [{ 
              rotate: spin 
            }]
          }
        ]}>
          { isCharging
          ? <Image
              style={styles.loadingImage}
              resizeMode="contain"
              source={require('../../images/charge3/anim-charging.png')}/>
          : <Image
              style={styles.loadingImage}
              resizeMode="contain"
              source={require('../../images/charge3/anim-loading.png')}/>
          }
        </Animated.View>
      }
      { (isAuthentic || isStop) &&
        <View style={styles.authBorder}></View>
      }
      { isStop &&
        <View style={styles.centerView}>
          <Image
            style={styles.checkedImage}
            resizeMode="contain"
            source={require('../../images/charge3/stop-check.png')}/>
        </View>
      }
      { soc >= 0 &&
        <View style={styles.socView}>
          <TextView style={styles.socText}>{soc}%</TextView>
        </View>
      }
    </View>
  );
}

const styles = StyleSheet.create({
  chargingHeader: {
    margin: 16,
    alignItems: 'center'
  },
  statusView: {
    width: size,
    height: size,
    padding: 4,
    alignItems: 'center',
    justifyContent: 'center'
  },
  stepImage: {
    width: '100%',
    height: '100%'
  },
  authBorder: {
    top: 0,
    width: size,
    height: size,
    position: 'absolute',
    borderWidth: 6,
    borderRadius: size,
    borderColor: '#00FF19'
  },
  loadingBorder: {
    top: 0,
    position: 'absolute',
    alignItems: 'center',
    justifyContent: 'center'
  },
  loadingImage: {
    width: size,
    height: size
  },
  centerView: {
    top: 0,
    width: size,
    height: size,
    position: 'absolute',
    alignItems: 'center',
    justifyContent: 'center'
  },
  checkedImage: {
    width: size / 2.3,
    height: size / 2.3
  },
  socView: {
    width: size,
    height: size,
    position: 'absolute',
    alignItems: 'center',
    justifyContent: 'center'
  },
  socText: {
    width: 38,
    height: 38,
    marginTop: size / -2.5,
    marginLeft: size / -4,
    fontSize: 13,
    fontWeight: 'bold',
    borderWidth: 2,
    borderRadius: 38,
    alignItems: 'center',
    justifyContent: 'center',
    borderColor: colorAccent,
    backgroundColor: colorLight
  }
})