import React from 'react';
import { Query } from 'react-apollo';
import { DateTime } from 'luxon';

import {
  Typography,
  AppBar,
  Tabs,
  Tab,
} from '@material-ui/core';
import {
  GetApp as OngoingIcon,
  AlarmAdd as FutureIcon,
  History as HistoryIcon,
} from '@material-ui/icons';

import { withStyles } from '@material-ui/core/styles';
import styles from './styles';

import BannerTopBar from '../BannerTopBar';

import { listEventsCalls } from '../../GraphQL/Calls/index';

import {
  Future,
  History,
  Ongoing,
  Past,
} from './Tabs';

function TabContainer(props) {
  return (
    <Typography component='div' style={{ padding: 8 * 3 }}>
      {props.children}
    </Typography>
  );
}

class Search extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      value: 0,
    };
  }

  handleChange = (event, value) => {
    this.setState({ value });
  }

  render() {
    const { classes } = this.props;
    const { value } = this.state;
    return (
      <React.Fragment>
        <BannerTopBar
          size='medium'
          title='Events'
          text='All the events are going to be listed here'
          backgroundUrl='https://superalgos.org/img/photos/events.jpg'
        />
        <Query
          query={listEventsCalls.EVENTS_EVENTS}
        >
          {({ loading, error, data }) => {
            if (loading) return 'Loading...';
            if (error) return `Error! ${error.message}`;
            const now = Math.floor(DateTime.local().valueOf() / 1000);

            const OngoingEvents = data.events_Events.filter(event => event.endDatetime > now
              && event.startDatetime < now);
            const FutureEvents = data.events_Events.filter(event => event.startDatetime > now);
            const PastEvents = data.events_Events.filter(event => event.endDatetime < now);

            return (
              <React.Fragment>
                <div className={classes.root}>
                  <AppBar position='static' color='default'>
                    <Tabs
                      value={value}
                      onChange={this.handleChange}
                      scrollable
                      scrollButtons='off'
                      indicatorColor='primary'
                      textColor='primary'
                    >
                      <Tab
                        className={classes.tabTitle}
                        label='Ongoing'
                        icon={<OngoingIcon />}
                      />
                      <Tab
                        className={classes.tabTitle}
                        label='Future'
                        icon={<FutureIcon />}
                      />
                      <Tab
                        className={classes.tabTitle}
                        label='Your history'
                        icon={<HistoryIcon />}
                      />
                      <Tab
                        className={classes.tabTitle}
                        label='Past'
                        icon={<HistoryIcon />}
                      />
                    </Tabs>
                  </AppBar>
                  {value === 0 && <TabContainer>
                    <Ongoing OngoingEvents={OngoingEvents} />
                  </TabContainer>}
                  {value === 1 && <TabContainer><Future FutureEvents={FutureEvents} /></TabContainer>}
                  {value === 2 && <TabContainer><History /></TabContainer>}
                  {value === 3 && <TabContainer><Past PastEvents={PastEvents} /></TabContainer>}
                </div>
              </React.Fragment>
            );
          }}
        </Query>
      </React.Fragment>
    );
  }
}

export default withStyles(styles)(Search);