import * as React from 'react';
import { List, Collapse, ListItem, ListItemIcon, ListItemText, ListSubheader } from '@material-ui/core';
import { Favorite, Computer, ExpandLess, ExpandMore } from "@material-ui/icons";
import ServerListItem from "./ServerListItem";
import SearchBar from './SearchBar';

export default class ServerList extends React.Component {

    constructor(props) {
        super(props);
        this.state = {
            offset: 0,
            favoritesOpen: false,
            allOpen: true,
        };

        this.favorites = [];
        this.serverList = this.props.servers
            .sort((a, b) => {
                if(a.players > b.players) {
                    return -1;
                } else {
                    return 1;
                }
            })
            .map((server) => {
                return (
                    <ServerListItem
                        country={server.country}
                        hostname={server.hostname}
                        players={server.players}
                        maxplayers={server.maxplayers}
                        level={server.level}
                        host={server.endpoint}
                        onFavorited={ flag => {
                            let index = this.favorites.indexOf(server.hostname);

                            !flag && index >= 0
                            ? this.favorites.splice(index, 1)
                            : this.favorites.push(server.hostname);
                            this.forceUpdate();
                        }}
                    />
                )
            });
    }

    render() {
        let allServersFiltered = this.serverList.filter(... função de filtro ...);

        let otherServers = allServersFiltered
            .filter((it, index) => {
                return !this.favorites.includes(it.props.hostname) &&
                    index >= this.state.offset && index < this.state.offset + 10
            });

        return(
                <List
                    subheader={
                        ... search box ...
                    }
                >
                    <ListItem button onClick={() => { this.setState({favoritesOpen: !this.state.favoritesOpen}) }}>
                        <ListItemIcon>
                            <Favorite />
                        </ListItemIcon>
                        <ListItemText inset primary="Favorites" />
                        { this.state.favoritesOpen ? <ExpandLess /> : <ExpandMore /> }
                    </ListItem>
                    {
                        <Collapse in={this.state.favoritesOpen} timeout={"auto"} unmountOnEdit>
                            <List component={"div"}>
                                {
                                    this.favorites.length === 0
                                        ? <ListItemText inset primary={"You have no favorite servers :c"}/>
                                        : this.serverList.filter((it) => this.favorites.includes(it.props.hostname))
                                }
                            </List>
                        </Collapse>
                    }
                    <List>
                        <ListItem button onClick={() => {this.setState({ allOpen: !this.state.allOpen })}}>
                            <ListItemIcon>
                                <Computer />
                            </ListItemIcon>
                            <ListItemText inset primary="All Servers" />
                            { this.state.allOpen ? <ExpandLess /> : <ExpandMore /> }
                        </ListItem>
                        <Collapse in={this.state.allOpen} unmountOnEdit>
                            {
                                otherServers.length === 0
                                ? <ListItemText inset primary={"No more servers found :c"}/>
                                : otherServers
                            }
                        </Collapse>
                    </List>
                </List>
        );
    }
}