/**
 * 新充电流程：停止充电模块
 * @邠心vbe on 2023/06/20
 */
import React, { useEffect, useState } from 'react';
import { View, Text, Image, StyleSheet } from 'react-native';
import TextView from '../../components/TextView';
import StatusImage from './StatusImage';
import { PageList } from '../Router';

export default StepStop = ({
  chargingPk="",
  stationInfo={}
}) => {
  const [isStoping, setStoping] = useState(false);
  const [loadingEmps, setEmps] = useState("");

  useEffect(() => {
    if (chargingPk) {
      setStoping(true);
    } else {
      changeEmps();
    }
  }, [chargingPk]);

  useEffect(() => {
    if (!isStoping) {
      setTimeout(() => {
        changeEmps();
      }, 500);
    }
  }, [loadingEmps]);

  const changeEmps = () => {
    let emp = loadingEmps;
    if (loadingEmps.length == 3) {
      emp = "";
    } else {
      emp += ".";
    }
    setEmps(emp);
  }

  return (
    <View style={styles.container}>
      <View style={styles.content}>
        <StatusImage
          isStop={isStoping}
          isLoading={!isStoping}
        />
        <View style={ui.flexcc}>
          <TextView style={styles.stepTitle}>{$t(isStoping ? 'charging.stepStoppedCharge' : 'charging.stepStoppingCharge')}</TextView>
          { !isStoping &&
            <TextView style={[styles.stepTitle, {width: 30, marginRight: -10}]}>{loadingEmps}</TextView>
          }
        </View>
        <TextView style={styles.stepDesc}>{$t(isStoping ? 'charging.stepStoppedChargeDesc' : 'charging.stepStoppingChargeDesc')}</TextView>
      </View>
      { isStoping &&
        <View style={styles.bottomView}>
          <Button
            style={styles.buttonView}
            text={$t('charging.btnViewReceipt')}
            elevation={1.5}
            borderRadius={6}
            onClick={() => {
              startPage(PageList.summary, { 
                chargingPk: chargingPk,
                id: stationInfo.id,
                name: stationInfo.name,
                address: stationInfo.address
              });
            }}/>
          <Button
            style={styles.buttonHomeView}
            text={$t('charging.btnHome')}
            elevation={1.5}
            borderRadius={6}
            onClick={() => startPage(PageList.home)}/>
        </View>
      }
    </View>
  )
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    padding: 16
  },
  content: {
    flex: 1,
    alignItems: 'center'
  },
  stepImage: {
    width: $vw(70),
    height: $vw(16),
    margin: 16
  },
  stepTitle: {
    fontSize: 24,
    fontWeight: 'bold',
    color: colorAccent
  },
  stepDesc: {
    color: textPrimary,
    fontSize: 16,
    textAlign: 'center',
    ...$padding(0, 32, 48)
  },
  label: {
    color: '#000',
    fontSize: 14,
    fontWeight: 'bold',
    paddingTop: 16,
    paddingBottom: 8
  },
  bottomView: {
    paddingBottom: 8
  },
  buttonView: {
    marginTop: 8
  },
  buttonHomeView: {
    marginTop: 12,
    marginBottom: 8,
    backgroundColor: colorPrimary
  }
})