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

//import Svg, {Polyline, Polygon, Rect, G} from 'react-native-svg-web';
import Svg, { Polyline, Polygon, Rect, G, Text } from 'react-native-svg';
import { connect } from 'react-redux';


function computeTickMark(largest, mostTicks) {
    const minimum = largest / mostTicks
    const magnitude = 10 ** Math.floor(Math.log10(minimum))
    const residual = minimum / magnitude
    if (residual > 5)
        return 10 * magnitude
    else if (residual > 2)
        return 5 * magnitude
    else if (residual > 1)
        return 2 * magnitude
    else
        return magnitude
}

const Graph = props => {
    const graphHeight = 100;

    const data = props.data.slice(-300);
    const maxElement = data.reduce((running, x) => Math.max(x, running), 2 / props.kgFactor);

    const coordStr = data.map((element, i) => `${i}, ${100 - (element * 100 / maxElement)}`);

    const tick = computeTickMark(maxElement * props.kgFactor * 0.6, 4);
    let ticks = [];
    let nextTick = tick;
    while (nextTick < maxElement * props.kgFactor) {
        ticks.push(nextTick);
        nextTick += tick;
    }

    return (
        <View style={{ justifyContent: 'center', alignItems: 'center' }}>
            <Svg height={graphHeight} width="80%" viewbox="0 0 300 100">
                    <Polyline
                        points={coordStr.join(" ")}
                        stroke="black"
                        strokeWidth="3"
                        strokeOpacity="0.5"
                        strokeLinejoin="round"
                        fill="none"
                    />
                    {ticks.map(tick => (
                        <React.Fragment>
                            <Polyline
                                points={`40,  ${100 - (tick / props.kgFactor * 100 / maxElement)} 300, ${100 - (tick / props.kgFactor * 100 / maxElement)}`}
                                stroke="black"
                                strokeWidth="1"
                                strokeDasharray="5,5"
                                strokeOpacity="0.5"
                                strokeLinejoin="round"
                                fill="none"
                            />
                            <Text x="5" y={`${100 - (tick / props.kgFactor * 100 / maxElement - 4) }`} 
                            alignmentBaseline="center"
                            strokeOpacity="0.5" 
                            fillOpacity="0.5" 
                            fontSize="9pt">{tick} kg </Text>
                        </React.Fragment>
                    )
                    )}
            </Svg>
        </View>
    );
};


const mapStateToProps = (state) => {
    return {
        data: state.deviceState.measurements,
        kgFactor: state.settings.analysis.kgFactor
    };
};


export default connect(mapStateToProps)(Graph);