import React from "react";
import {
  StyleSheet,
  View,
  StatusBar,
  Text,
  TouchableOpacity
} from "react-native";
import themeColors from '../components/themeColors';
import EntypoIcon from "react-native-vector-icons/Entypo";

import { connect } from 'react-redux';
import { useKeepAwake } from 'expo-keep-awake';
import { stopSession } from '../state/DeviceReduxCoupling';
import CycleView from '../components/CycleView';
import IconCard from '../components/IconCard';
import Graph from '../components/Graph';
import {toTimeStr} from '../utility/TimeUtils';


function SmallHeaderView(props) {
  return (
    <View style={smallHeaderStyles.container}>
      <View style={smallHeaderStyles.row}>
        <TouchableOpacity onPress={() => props.navigation.goBack()}>
          <EntypoIcon name="chevron-left" style={smallHeaderStyles.backIcon}></EntypoIcon>
        </TouchableOpacity>
        <Text style={smallHeaderStyles.text}>{props.text}</Text>
        <TouchableOpacity onPress={props.onStopPressed}>
          <EntypoIcon name="controller-stop" style={smallHeaderStyles.stopIcon}></EntypoIcon>
        </TouchableOpacity>
      </View>
    </View >
  )
}

const smallHeaderStyles = StyleSheet.create({
  container: {
    flex: 1,
    minHeight: 80,
    maxHeight: 80,
    height: 80,
    width: "100%",
    backgroundColor: themeColors["WET ASPHALT"],
  },
  row: {
    paddingTop: 30,
    flexDirection: "row",
    justifyContent: "space-between",
  },
  backIcon: {
    color: "white",
    fontSize: 40,
  },
  stopIcon: {
    color: themeColors["ALIZARIN"],
    fontSize: 40,
    paddingRight: 10,
    paddingLeft: 10,
  },
  text: {
    color: "white",
    fontSize: 30,
  },
});

// ---------------------------------------------------------------------------------------------

function TrainingView(props) {
  useKeepAwake();

  const analysis = props.session.analysis;
  const laps = (analysis.peaks.size / props.peaksPerLap).toFixed(1);
  const totalMomentum = Math.trunc(analysis.totalMomentum * props.kgFactor / 10 / 60);

  const onStopPressed = () => {
    props.dispatch(stopSession());
    props.navigation.navigate('Home');
  };

  return (
    <View style={{ flex: 1 }}>
      <StatusBar hidden={true} />
      <View style={{ flex: 1 }}>
        <SmallHeaderView text="TRAINING" navigation={props.navigation} onStopPressed={onStopPressed} />
        <View style={trainingViewStyles.container}>
          <CycleView>
            <IconCard label="BAHNEN" value={laps} iconName="retweet" iconType="AntDesign" />
            <IconCard label="ZÜGE" value={analysis.peaks.size} iconName="dashboard" iconType="AntDesign" />
          </CycleView>

          <CycleView>
            <IconCard label="DAUER" value={toTimeStr(analysis.totalTime)} iconName="clock" iconType="FontAwesome5" />
            <IconCard label="AKTIVE DAUER" value={toTimeStr(analysis.activeTime)} iconName="stopwatch" iconType="FontAwesome5" />
          </CycleView>
          <IconCard label="KRAFT" value={totalMomentum} iconName="ruler" iconType="Entypo" />

          <Graph></Graph>
        </View>
      </View>
    </View>
  )
}

const trainingViewStyles = StyleSheet.create({
  container: {
    flex: 1, 
    backgroundColor: themeColors["BELIZE HOLE"],
    padding: 20,
    justifyContent: "space-around",
  }
});

const mapStateToProps = (state) => {
  return {
    session: state.deviceState,
    peaksPerLap: state.settings.analysis.peaksPerLap,
    theme: state.settings.theme,
    kgFactor: state.settings.analysis.kgFactor,
  };
};
export default connect(mapStateToProps)(TrainingView);