import React, {useState} from 'react';
import {StyleSheet, Text, View, Button, TextInput, Dimensions, StatusBar} from 'react-native';
import { LineChart} from 'react-native-chart-kit';
import { LinearGradient } from 'expo-linear-gradient';
import PropValueCard from './components/PropValueCard'


export default function App() {
    const [outputText, setOutputText] = useState('This is the first text');

    const [flag, setFlag] = useState(false);

    const initialState = [];
    for(let i=0; i < 100; ++i) {
        initialState.push( Math.random() * 100);
    }

    const [graphData, setGraphData] = useState(initialState);

    const makeNewGraphData = () => {
      setGraphData( oldGraphData => {
          console.log("Before", oldGraphData)
          oldGraphData.pop();
          oldGraphData.unshift(Math.random() * 100);
          console.log("After", oldGraphData);
          return oldGraphData.slice();
      })
    };
    const makeNewGraphData2 = () => {
        graphData.pop();
        graphData.unshift(Math.random() * 100);
        setGraphData(graphData);
    };

    let tutorial = (
        <View style={{padding: 50}}>
          <View style={{flexDirection: 'row', justifyContent: 'space-between', alignItems: 'center'}}>
            <TextInput
                style={{width: '70%', borderColor: 'black', borderWidth: 1, padding: 5}}
                placeholder="Course goal"
            />
            <Button title="ADD"/>
          </View>

          <Text style={{fontSize: 50}}>Text1
          </Text>
        </View>
    );

    let mine = (
        <View style={styles.container}>
          <View style={styles.view1}><Text>View1</Text></View>
          <View style={styles.view2}><Text>View2</Text></View>
          <View style={styles.view3}><Text>View3 </Text><TextInput/></View>

          <View>
            <Text>{flag ? "Text1" : "Text2"}</Text>
            <Button title="Subba app is dat" onPress={() => setFlag(!flag)}/>
          </View>
        </View>
    );

    let graph = (
        <View>
            <StatusBar hidden={true} />

            <View style={{flexDirection: 'row', justifyContent: 'space-between'}}>
                <PropValueCard label="Züge" value="1234"/>
                <PropValueCard label="Bahnen" value="30"/>
            </View>

            <View style={{justifyContent: 'center', alignItems: 'center', flexDirection:'row'}}>
                <LineChart
                    data={{
                        datasets: [{
                            data: graphData
                        }]
                    }}
                    width={Dimensions.get('window').width - 30} // from react-native
                    height={180}
                    chartConfig={{
                        backgroundColor: '#e26a00',
                        backgroundGradientFrom: '#fb8c00',
                        backgroundGradientTo: '#ffa726',
                        decimalPlaces: 0, // optional, defaults to 2dp
                        color: (opacity = 1) => `rgba(255, 255, 255, 0.8)`,
                        style: {
                            borderRadius: 16
                        }
                    }}
                    style={{
                        borderRadius: 16,
                    }}
                    bezier
                    withDots={false}
                    withInnerLines={false}
                    withOuterLines={false}
                    withVerticalLabel={false}
                    withHorizontalLabels={true}
                    fromZero={true}
                />
            </View>
            <View>
                <Button title="UUUND nochmal" onPress={makeNewGraphData}/>
            </View>

        </View>
    );


    return graph;
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    padding: 50,
    backgroundColor: '#7573ee',
    //alignItems: 'center',
    //justifyContent: 'center',
    justifyContent: 'space-between'
  },
  view1: {
    backgroundColor: 'green',
    height: 300
  },
  view2: {
    backgroundColor: 'blue',
    height: 100,
  },
  view3: {
    backgroundColor: 'white',
    height: 25
  }
});