import React, { Component } from 'react';
import { View, Text, StyleSheet,ScrollView, RefreshControl } from 'react-native';
import { BarChart, Grid } from 'react-native-svg-charts'
import HistoryGraph from '../component/HistoryGraph'
import SegmentedControlTab from "react-native-segmented-control-tab";
const data1 = [
    { label: 'MON', value: 1.8 },
    { label: 'TUE', value: 4.2 },
    { label: 'WEN', value: 1.6 },
    { label: 'THU', value: 0 },
    { label: 'FRI', value: 2.0 },
    { label: 'SAT', value: 3.3 },
    { label: 'SUN', value: 1.3 }
]
const data2 = [
    { label: '1', value: 4.6 },
    { label: '8', value: 3.7 },
    { label: '15', value: 3.0 },
    { label: '22', value: 5.2 },
    { label: '29', value: 3.1 }
]
const data3 = [
    { label: 'Jan', value: 500 },
    { label: 'Feb', value: 312 },
    { label: 'Mar', value: 424 },
    { label: 'Apr', value: 745 },
    { label: 'May', value: 89 },
    { label: 'Jun', value: 434 },
    { label: 'Jul', value: 650 },
    { label: 'Aug', value: 980 },
    { label: 'Sep', value: 123 },
    { label: 'Oct', value: 186 },
    { label: 'Nov', value: 689 },
    { label: 'Dec', value: 643 }
]

const data4 = [         
    { label: 'C', value: 500 },
    { label: 'H', value: 312 },
    { label: 'A', value: 424 },
    { label: 'N', value: 745 },
    { label: 'G', value: 89 },
    { label: 'E', value: 434 }
]

const kg1 = "총 3.5kg"
const kg2 = "총 9,6kg"
const kg3 = "총 21.3kg"

export default class HomeTab extends Component {
    constructor(){
        super();
        this.state = {
            selectedIndex: 0,
            data: data1,
            title: "총 3.5kg",
            spane: "",
            refreshing: false
        }
    }

    _onRefresh = () => {
        this.setState({refresing: true});
        this.setState({data: data4})
        this.setState({refreshing: false});
    }

    handleIndexChange = index => {
        this.setState({selectedIndex: index});
        switch(index){
            case 0:
                this.setState({data: data1, title: kg1});
                break;
            case 1:
                this.setState({data: data2, title: kg2});
                break;
            case 2:
                this.setState({data: data3, title: kg3});
                break;
        }
      };
    
    render() {
        // const fill = 'rgb(134, 65, 244)'
        // const data = [50, 10, 40, 95, -4, -24, null, 85, undefined, 0, 35, 53, -53, 24, 50, -20, -80]

        // return (
        //     <BarChart style={{ height: 200 }} data={data} svg={{ fill }} contentInset={{ top: 30, bottom: 30 }}>
        //         <Grid />
        //     </BarChart>
        // );

        return(
            <ScrollView
                refreshControl={
                    <RefreshControl
                    refreshing={this.state.refreshing}
                    onRefresh={this._onRefresh}
                    tintColor="#ff0000"
                    title="Loading..."
                    titleColor="#00ff00"
                    colors={["#ff0000",'#00ff00','#0000ff']}
                    progressBackgroundColor="#ffff00"
                    />
                }
            >
                <View style={style.header}>
                    <Text style={style.tabName}>History </Text>
                </View>
                <Text>{this.state.title}</Text>
                <SegmentedControlTab
                    values={["Week", "Month", "Year"]}
                    selectedIndex={this.state.selectedIndex}
                    onTabPress={this.handleIndexChange}
                />
                <HistoryGraph data={this.state.data} round={100} unit="kg"/>
            </ScrollView>
        )
    }
}

const style = StyleSheet.create({
    container: {
        flex: 1,
        alignItems: 'center',
        justifyContent: 'center',
    },
    header: {
        flex :1,
        justifyContent : 'center',
    },
    tabName:{
        marginStart : 10,
        textAlignVertical : 'center',
        fontSize : 20,
        color : "#0066cc",
        fontWeight: 'bold',
    }
})