import React, { useEffect, useState } from 'react';

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

import { Svg, LinearGradient,  Stop, Path, Text, Defs, Circle, ClipPath, Rect } from 'react-native-svg';

interface BatteryProps {

  batteryNum: number

}

const Battery = (props: BatteryProps) => {

  const [batteryNum, setBatteryNum] = useState(0);//电池显示数字

  const [batteryNumX, setBatteryNumX] = useState(0);//文字x坐标

  const [batteryNumColor, setBatteryNumColor] = useState('white');//文字x坐标

  const [colorHigh, setColorHigh] = useState('rgba(238, 144, 102, 1)');

  const [colorLow, setColorLow] = useState('rgba(247, 205, 175, 1)');

  useEffect(() => {

  }, []);

  useEffect(() => {

    setBatteryNum(props.batteryNum)

    //设置整体渐变色

    if(props.batteryNum<=20 && props.batteryNum>0){

      setColorHigh('rgba(238, 144, 102, 1)')

      setColorLow('rgba(247, 205, 175, 1)')

    }else if(props.batteryNum> 20 && props.batteryNum<=100){

      setColorHigh('rgba(87, 217, 173, 1)')

      setColorLow('rgba(161, 229, 207, 1)')

    }else{

    }

    //设置文字显示x起点坐标

    if(props.batteryNum>=10 && props.batteryNum<100){

      setBatteryNumX(12)

    }else if(props.batteryNum===100){

      setBatteryNumX(8)

    }else{

      setBatteryNumX(15)

    }

    //设置文字渐变颜色

    if(props.batteryNum>=44 && props.batteryNum<=46){

      setBatteryNumColor('url(#grads4445)')

    }else if(props.batteryNum>46 && props.batteryNum<=49){

      setBatteryNumColor('url(#grads4649)')

    }else if(props.batteryNum>49 && props.batteryNum<52){

      setBatteryNumColor('url(#grads5052)')

    }else if(props.batteryNum>=52 && props.batteryNum<=54){

      setBatteryNumColor('url(#grads5354)')

    }else if(props.batteryNum>54 && props.batteryNum<55){

      setBatteryNumColor('url(#gradss5455)')

    }else if(props.batteryNum>=55){

      setBatteryNumColor('white')

    }else{

      setBatteryNumColor('rgba(23, 23, 74, 1)')

    }

  }, [props.batteryNum]);

  const svgHeight = 74;

  const svgWidth = 42;

  return (

          d="M11.6,4v0.4H12V4H11.6zM31.5,4H31v0.4h0.4L31.5,4L31.5,4zM12.1,2.5c0,-1 0.8,-1.7 1.7,-1.7V0c-1.4,0 -2.6,1.2 -2.6,2.6H12.1zM12.1,4V2.5h-0.9V4H12.1zM9,4.5h2.6V3.5H9V4.5zM0.9,12.7c0,-4.5 3.6,-8.2 8.1,-8.2V3.5c-5,0 -9,4 -9,9h0.9V12.7zM0.9,64.9V12.7H0v52.3H0.9zM9,73.1c-4.5,0 -8.1,-3.7 -8.1,-8.2H0c0,5 4,9 9,9V73.1zM33,73.1H9v0.9h24V73.1zM41.1,64.9c0,4.5 -3.6,8.2 -8.1,8.2v0.9c5,0 9,-4 9,-9h-0.9V64.9zM41.1,12.7v52.3H42V12.7H41.1zM33,4.5c4.5,0 8.1,3.7 8.1,8.2H42c0,-5 -4,-9 -9,-9V4.5zM31.5,4.5H33V3.5h-1.5V4.5zM31,2.5V4h0.9V2.5H31zM29.3,0.9c0.9,0 1.7,0.8 1.7,1.7h0.9c0,-1.4 -1.2,-2.6 -2.6,-2.6C29.3,0 29.3,0.9 29.3,0.9zM13.8,0.9h15.5V0H13.8V0.9z"

          fill="none"

          stroke="rgba(255, 255, 255, 0.30)"

        />

          d="M16,3c-0.9,0 -1.7,0.8 -1.7,1.7V7H9.9C6.1,7 3,10 3,13.9v50c0,3.8 3.1,6.9 6.9,6.9h22.3c3.8,0 6.9,-3.1 6.9,-6.9v-50c0,-3.8 -3.1,-6.9 -6.9,-6.9h-4.4V4.7c0,-1 -0.8,-1.7 -1.7,-1.7C26.1,3 16,3 16,3z"

          fill="white"

          stroke="#D9D9D9"

        />  

        {/* 反着来的 最大值71   最小值0*/}

            d="M16,3c-0.9,0 -1.7,0.8 -1.7,1.7V7H9.9C6.1,7 3,10 3,13.9v50c0,3.8 3.1,6.9 6.9,6.9h22.3c3.8,0 6.9,-3.1 6.9,-6.9v-50c0,-3.8 -3.1,-6.9 -6.9,-6.9h-4.4V4.7c0,-1 -0.8,-1.7 -1.7,-1.7C26.1,3 16,3 16,3z"

            fill="white"

            stroke="#D9D9D9"

          />  

        {/*

          // d="M16,3c-0.9,0 -1.7,0.8 -1.7,1.7V7H9.9C6.1,7 3,10 3,13.9v49.9c0,3.8 3.1,6.9 6.9,6.9h22.3c3.8,0 6.9,-3.1 6.9,-6.9V13.9c0,-3.8 -3.1,-6.9 -6.9,-6.9h-4.4V4.7c0,-1 -0.8,-1.7 -1.7,-1.7H16z"

          // d="M32.3,70.7H9.7c-3.7,0 -6.8,-3 -6.8,-6.8V37.6H39v26.3C39,67.7 36,70.7 32.3,70.7z"

          d="M32.3,70.7H9.7c-3.7,0 -6.8,-3 -6.8,-6.8V37.6H39v26.3C39,67.7 36,70.7 32.3,70.7z"

          fill="url(#grad)"

        />   */}

        {

          batteryNum === 0 ? null :

          {batteryNum}%

        }

  )

};

export default Battery;

const styles = StyleSheet.create({

  battery: {

    alignSelf: 'flex-end',

    marginBottom: 16,

    marginRight: 16,

    // backgroundColor:'blue'

  },

})