import React, { useState } from 'react';
import { makeStyles, useTheme } from '@material-ui/core/styles';
import Card from '@material-ui/core/Card';
import CardContent from '@material-ui/core/CardContent';
import CardMedia from '@material-ui/core/CardMedia';
import Typography from '@material-ui/core/Typography';
import ListItem from '@material-ui/core/ListItem';
import ListItemAvatar from '@material-ui/core/ListItemAvatar';
import ListItemText from '@material-ui/core/ListItemText';
import { Button, useMediaQuery, Dialog, DialogActions, DialogContent, DialogContentText, DialogTitle } from '@material-ui/core';


const useStyles = makeStyles(theme => ({
  card: {
    display: 'flex',
  },
  details: {
    display: 'flex',
    flexDirection: 'column',
  },
  content: {
    flex: '1 0 auto',
  },
  inline: {
    display: 'inline',
  },
  seminarCard: {
    color: 'limegreen',
  },
  examCard: {
    color: 'red',
  },
}));


function class_by_type (type, classes) {
  let classname = null;
  switch (type) {
    case 'Семинар':
      classname = classes.seminarCard;
      break;
    case 'Экзамен':
      classname = classes.examCard;
      break;
    default:
      return;
  }

  return classname;
}


export default function RuzCard(props) {
  const classes = useStyles();
  const theme = useTheme();
  const dialogFullScreen = useMediaQuery(theme.breakpoints.down('sm'));
  const [open, setOpen] = useState(false);

  const handleClickOpen = () => {
    setOpen(true);
  };

  const handleClose = () => {
    setOpen(false);
  };


  return (
    <ListItem alignItems="flex-start" button onClick={props.onClick}>
      <ListItemAvatar>
        <div>
          <Typography variant="body2">{props.item.beginLesson}</Typography><br />
          <Typography variant="body2" color="secondary">{props.item.endLesson}</Typography>
        </div>
      </ListItemAvatar>
      <ListItemText
        primary={props.item.discipline}
        secondary={
          <React.Fragment>
            {props.item.auditorium}<br />
            <Typography
              component="span"
              variant="body2"
              className={class_by_type(props.item.kindOfWork, classes)}
              color="textPrimary"
            >
              {props.item.kindOfWork}
            </Typography>
          </React.Fragment>
        }
      />
    </ListItem>
  )
}