import React, { Component } from 'react';
import {StyleSheet, View, Text, ScrollView} from 'react-native';
import {Container, Header} from 'native-base';
import { Table, TableWrapper, Row, Rows, Col } from 'react-native-table-component';

class Attendance extends Component {
    constructor(props) {
        super(props);
        this.state = {
            tableHead: ['Date','Treatment','BO','Description'],
            tableData:[

            ],
        }
    }

    async componentDidMount  () {
        const token = await AsyncStorage.getItem('token')
            Axios({
                method: 'get',
                url: 'http://192.168.56.1/vzuu/public/api/serviceattendances/1',
                dataType: 'json',
                headers: {
                    'Accept': 'application/json',
                    'Content-Type': 'application/json',
                    'Authorization': 'Bearer ' + token,
                },
            })
                .then(response => {
                    var serviceattendance = [];
                    for (var i = 0; i < response.data.results.serviceattendances.length; i++) {
                        serviceattendance.push([
                            response.data.results.serviceattendances[i].date,
                            response.data.results.serviceattendances[i].service_item_id,
                            response.data.results.serviceattendances[i].beauty_officer_id,
                            response.data.results.serviceattendances[i].description,
                            response.data
                        ]);
                    }
                    this.setState({
                        tableData: serviceattendance,
                    })
                });
            console.log(this.state.data);

            Axios({
                method: 'get',
                url: 'http://192.168.56.1/vzuu/public/api/serviceitemts/1',
                dataType: 'json',
                headers: {
                    'Accept': 'application/json',
                    'Content-Type': 'application/json',
                    // 'Authorization': 'Bearer ' + token,
                },
            })
            .then(response => {

                this.setState({ tableData: response.data.results.serviceitemts });
            });
        console.log(this.state.data);
    }

    render() {
        const state = this.state
        return(
            <Container>
                <View style={{flex: 1}}>
                <Header style={{ backgroundColor: '#E91E63' }} >
                        <Text style={styles.textHead}>Attendance</Text>
                    </Header>
                    <View style={styles.container} >
                        <ScrollView stye={styles.dataWrapper}>
                            <Table borderStyle={{borderWidth: 2, borderColor: '#000'}}>
                                <Row data={state.tableHead} flexArr={[3, 3, 2, 4 ]} style={styles.head} textStyle={styles.text} />
                                {state.tableData.map((rowData, index) => (
                                <TableWrapper key={index} style={styles.wrapper}>
                                    {rowData.map((cellData, cellIndex) => (
                                       <Cell key={cellIndex} data={cellIndex === 4 ? element(cellData, index) : cellData} textStyle={styles.text} />
                                    ))}
                                </TableWrapper>
                                 ))}
                            </Table>
                        </ScrollView>
                        </View>
                </View>
            </Container>
        )
    }
}

export default Attendance;
const styles = StyleSheet.create({
    container: { flex: 1, padding: 16, paddingTop: 30, backgroundColor: '#fff' },
    head: { height: 40, backgroundColor: '#fff' },
    wrapper: { flexDirection: 'row' },
    text: { margin: 6 },
    row: {height: 28},
    text: { textAlign: 'center' },
    dataWrapper: { marginTop: -1 },
    textHead: {marginTop: 17, fontSize: 18, color: '#fff'}
})