import React, { useRef, useState } from 'react';
import { StyleSheet, Animated } from 'react-native';
import { Button, Content, Text, View } from 'native-base';
import { LinearGradient } from 'expo-linear-gradient';
import IconCard from './IconCard';
import Graph from './Graph';
import { connect } from 'react-redux';
import backgroundColors from './Themes';
import { useKeepAwake } from 'expo-keep-awake';
import { stopSession } from '../state/DeviceReduxCoupling';
import CycleView from './CycleView';


function LiveTrainingView(props) {
    const analysis = props.session.analysis;
    const onStopClick = () => {
        props.dispatch(stopSession());
        props.navigation.navigate('Home');
    };
    const laps = (analysis.peaks.size / props.peaksPerLap).toFixed(1);
    const totalMomentum = Math.trunc(analysis.totalMomentum * props.kgFactor / 10 / 60);

    const toTimeStr = seconds => {
        let minuteStr = String(Math.floor(seconds / 60));
        if(minuteStr.length < 2)
            minuteStr = "0" + minuteStr;
        let secondStr =  String(Math.floor(seconds % 60));
        if(secondStr.length < 2)
            secondStr = "0" + secondStr;
        return minuteStr + ":" + secondStr;
    }
    console.log("Active", analysis.activeTime);
    useKeepAwake();

    return (
        <LinearGradient
            colors={backgroundColors[props.theme]}
            start={[0, 0]}
            end={[0.5, 1]}
            style={{ flex: 1 }}
        >
            <Content padder contentContainerStyle={{ justifyContent: 'space-around', flex: 1, paddingTop: 60 }}>

                <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>
                <Button block secondary onPress={onStopClick}><Text>Stop</Text></Button>
            </Content>
        </LinearGradient>
    );
}

const styles = StyleSheet.create({
    card: {
        flexDirection: 'row',
        backgroundColor: 'rgba(0, 0, 0, 0.2)',
        margin: 5,
        padding: 5,
        borderRadius: 3,
        justifyContent: 'space-between',
    }
});

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)(LiveTrainingView);