import React, {Component} from "react";
import {Image} from "react-native";

import {
    Badge,
    Button,
    Container,
    Content,
    getTheme,
    Icon,
    Left,
    List,
    ListItem,
    Right,
    StyleProvider,
    Text,
    variables,
    View,
} from "native-base";

import styles from "./style";

const datas = [
    {
        name: "Vertretungsplan",
        route: "vplan",
        icon: "megaphone",
        bg: "#C5F442",
    },
    {
        name: "Stundenplan",
        route: "splan",
        icon: "clock",
        bg: "#C5F442",
    },
    {
        name: "Klausurplan",
        route: "kplan",
        icon: "school",
        bg: "#477EEA",
    },
];

const drawerCover = require("../assets/img/drawer-cover.png");

const drawerImage = require("../assets/img/logo-kitchen-sink.png");

class SideBar extends Component {
    constructor(props) {
        super(props);
        this.state = {
            shadowOffsetWidth: 1,
            shadowRadius: 4,
        };
    }

    render() {
        return (
            <Container>
                <Content bounces={false} style={{flex: 1, backgroundColor: "#fff", top: -1}}>
                    <Image style={styles.drawerCover} source={drawerCover}>
                        <Image square style={styles.drawerImage} source={drawerImage}/>
                    </Image>
                    <List
                        dataArray={datas}
                        renderRow={data =>
                            <ListItem button noBorder onPress={() => this.props.navigation.navigate(data.route)}>
                                <Left>
                                    <Icon active name={data.icon} style={{color: "#777", fontSize: 26, width: 30}}/>
                                    <Text style={styles.text}>
                                        {data.name}
                                    </Text>
                                </Left>
                                {data.types &&
                                <Right style={{flex: 1}}>
                                    <Badge
                                        style={{
                                            borderRadius: 3,
                                            height: 25,
                                            width: 72,
                                            backgroundColor: data.bg,
                                        }}
                                    >
                                        <Text style={styles.badgeText}>{`${data.types} Types`}</Text>
                                    </Badge>
                                </Right>}
                            </ListItem>}
                    />
                </Content>
            </Container>
        );
    }
}

export default SideBar;