import React from 'react';
import PropTypes from 'prop-types';
import { makeStyles } from '@material-ui/core/styles';
import AppBar from '@material-ui/core/AppBar';
import Toolbar from '@material-ui/core/Toolbar';
import Typography from '@material-ui/core/Typography';
import SwipeableDrawer from '@material-ui/core/SwipeableDrawer';
import List from '@material-ui/core/List';
import Divider from '@material-ui/core/Divider';
import Link from './Link';
import ListItem from '@material-ui/core/ListItem';
import ListItemIcon from '@material-ui/core/ListItemIcon';
import ListItemText from '@material-ui/core/ListItemText';
import Icon from '@material-ui/core/Icon';

import { useIntl, FormattedMessage } from 'react-intl'

const useStyles = makeStyles({
  list: {
    width: 250,
  },
  fullList: {
    width: 'auto',
  },
});

function LeftMenu(props) {
  const intl = useIntl()
  const classes = useStyles();

  const sideList = () => (
    <div
      className={classes.list}
      role="presentation"
    >
      <AppBar position="static">
        <Toolbar>
          <Typography variant="h6" className={classes.title}>
            Menu
          </Typography>
        </Toolbar>
      </AppBar>    

      <List>
        <ListItem button component={Link} naked href="/" onClick={props.onClose}>
          <ListItemIcon>{<Icon>{"home"}</Icon>}</ListItemIcon>
          <ListItemText primary={<FormattedMessage defaultMessage="Inicio" description="leftMenu: title of inicio" />} />
        </ListItem>
        <ListItem button component={Link} naked href="/about" onClick={props.onClose}>
          <ListItemIcon>{<Icon>{"info"}</Icon>}</ListItemIcon>
          <ListItemText primary={<FormattedMessage defaultMessage="Quienes somos" description="leftMenu: title of about" />} />
        </ListItem>
        <ListItem button component={Link} naked href="/schedule" onClick={props.onClose}>
          <ListItemIcon>{<Icon>{"event"}</Icon>}</ListItemIcon>
          <ListItemText primary={<FormattedMessage defaultMessage="Programa" description="leftMenu: title of schedule" />} />
        </ListItem>
        {/**<ListItem button component={Link} naked href="/events" onClick={props.onClose}>
          <ListItemIcon>{<Icon>{"event"}</Icon>}</ListItemIcon>
          <ListItemText primary={<FormattedMessage defaultMessage="Eventos" description="leftMenu: title of events" />} />
        </ListItem>
        <ListItem button component={Link} naked href="/contact" onClick={props.onClose}>
          <ListItemIcon>{<Icon>{"contact_mail"}</Icon>}</ListItemIcon>
          <ListItemText primary={<FormattedMessage defaultMessage="Contacto" description="leftMenu: title of contact" />} />
        </ListItem>**/}
      </List>
      <Divider />
    </div>
  );

  return (
    <div>
      <SwipeableDrawer
        onClose={props.onClose}
        onOpen={() => {}}
        open={props.open}
      >
        {sideList()}
      </SwipeableDrawer>
    </div>
  );
}

LeftMenu.defaultProps = {
  open: false,
}

LeftMenu.propTypes = {
  open: PropTypes.bool.isRequired,
  onClose: PropTypes.func.isRequired,
}

export default LeftMenu;