import React from 'react';
import { makeStyles } from '@material-ui/core/styles';
import { Dialog, DialogContent, DialogContentText, DialogTitle, DialogActions, Button, List } from '@material-ui/core';
import { useMediaQuery, useTheme } from '@material-ui/core';
import { Divider, ListItem, ListItemAvatar, ListItemText } from '@material-ui/core';
import { AppBar, Toolbar, IconButton, Typography } from '@material-ui/core';
import CloseIcon from '@material-ui/icons/Close';


const useStyles = makeStyles(theme => ({
  paper: {
    marginTop: theme.spacing(3),
    display: 'flex',
    flexDirection: 'column',
    alignItems: 'center',
    width: '100%',
  },
  schedule: {
    width: '100%',
    backgroundColor: theme.palette.background.paper,
  },
  avatar: {
    margin: theme.spacing(1),
    backgroundColor: theme.palette.secondary.main,
  },
  stickyHeader: {
    background: 'inherit',
  },
  fixUl: {
    padding: 0,
    background: 'inherit',
  },
  centerProgress: {
    position: 'absolute',
    top: '50%',
    verticalAlign: 'middle',
  },
  dateHeader: {
    textTransform: 'capitalize',
    color: 'teal',
  },
  mobileBar: {
    position: 'relative',
  },
  mobileTitle: {
    marginLeft: theme.spacing(2),
    flex: 1,
  },
}));

function RuzDialogCard(props) {
  
  return (
    <ListItem alignItems="flex-start">
      <ListItemText
        primary={props.entry.description}
      />
    </ListItem>
  )
}

function RuzDialogList(props) {
  const item = props.item;
  const classes = useStyles();

  const entries = [
    { description: `${item.building}` },
    { description: `${item.lecturer}` },
  ];

  return (
    <List className={classes.schedule}>
      {entries.map(entry => {
        return (
          <React.Fragment>
            <RuzDialogCard entry={entry} />
            <Divider />
          </React.Fragment>
        );}
      )}
    </List>
  )
}

function MobileNavBar(props) {

  const classes = useStyles();
  const closeAction = props.closeAction;
  const title = props.title;

  return (
    <AppBar className={classes.mobileBar}>
      <Toolbar>
        <IconButton edge="start" color="inherit" onClick={closeAction} aria-label="close">
          <CloseIcon />
        </IconButton>
        <Typography variant="h6" className={classes.mobileTitle}>
          {title}
        </Typography>
      </Toolbar>
    </AppBar>
  );
}

export default function RuzDialog(props) {
  if (!props.open)
    return <React.Fragment />

  const theme = useTheme();
  const isMobile = useMediaQuery(theme.breakpoints.down('sm'));
  const closeAction = props.dialogCloseAction;
  
  return (
    <Dialog
      fullScreen={isMobile}
      fullWidth={true}
      maxWidth="xs"
      open={true}
      onClose={closeAction}
      aria-labelledby="ruz-dialog-title"
    >
      {
        isMobile ? 
        <MobileNavBar closeAction={closeAction} title={props.dialog.discipline} />
        :
        <DialogTitle id="responsive-dialog-title">{props.dialog.discipline}</DialogTitle>
      }
      <DialogContent>
        <RuzDialogList item={props.dialog} />
      </DialogContent>
      <DialogActions>
        <Button onClick={closeAction} color="primary" autoFocus>
          close
        </Button>
      </DialogActions>
    </Dialog>
  );
}