import React, { useState } from 'react';
import Avatar from '@material-ui/core/Avatar';
import Button from '@material-ui/core/Button';
import CssBaseline from '@material-ui/core/CssBaseline';
import TextField from '@material-ui/core/TextField';
import FormControlLabel from '@material-ui/core/FormControlLabel';
import Checkbox from '@material-ui/core/Checkbox';
import Link from '@material-ui/core/Link';
import Grid from '@material-ui/core/Grid';
import Box from '@material-ui/core/Box';
import ScheduleIcon from '@material-ui/icons/Schedule';
import Typography from '@material-ui/core/Typography';
import { makeStyles } from '@material-ui/core/styles';
import Container from '@material-ui/core/Container';
import Divider from '@material-ui/core/Divider';
import List from '@material-ui/core/List';
import ListSubheader from '@material-ui/core/ListSubheader';
import { CircularProgress } from '@material-ui/core';
import { useTheme } from '@material-ui/core/styles';
import { useMediaQuery, Dialog, DialogActions, DialogContent, DialogContentText, DialogTitle } from '@material-ui/core';

import axios from 'axios';

import RuzCard from './RuzCard.js';
import RuzDialog from './RuzDialog.js';


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',
  },
}));


function RuzListDate(props) {
  const items = props.items;
  const date = new Date(props.date);
  const datestring = date.toLocaleDateString('ru-RU', {weekday: 'short', day: 'numeric', month: 'long'})
  const classes = useStyles();

  return (
    <React.Fragment key={`ruzdate-inner-${props.date}`}>
      <ListSubheader className={classes.dateHeader}>
          {datestring}
      </ListSubheader>
      {
        items.map(item => {
          return (
            <React.Fragment>
              <RuzCard onClick={() => props.onClickForward(item)} item={item} />
              <Divider variant="inset" />
            </React.Fragment>
          );
        })
      }
    </React.Fragment>
  );
}


export default function RuzList(props) {
  const classes = useStyles();

  const [ items, setItems ] = useState([]);
  const [ needUpdate, setNeedUpdate ] = useState(true);
  const [ openDialog, setOpenDialog ] = useState(null);

  if (needUpdate) {
    axios({
      method: 'GET',
      url: 'http://cors.hell.fcked.net/api/schedule/group/11235',
      params: {
        start: '2019.12.16',
        finish: '2019.12.23',
        lng: '1',
      },
    }).then(resp => {
      setNeedUpdate(false);

      const data = {};
      for (let [id, item] of resp.data.entries()) {
        if (!item) continue;
        item.id = id;
        item.date in data
        ?
          data[item.date].push(item)
        :
          data[item.date] = [item];
      }
      setItems(data);
    });
  }

  console.log(openDialog);
  const dialogCloseAction = () => {
    setOpenDialog(null);
  }

  let progressBar = (<React.Fragment />);
  if (needUpdate) {
    progressBar =  (<CircularProgress className={classes.centerProgress} />);
  }

  const dates = [...Object.keys(items)].sort();

  return (
    <Container component="main" maxWidth="xs">
      <CssBaseline />
      <RuzDialog dialog={openDialog} open={openDialog !== null} dialogCloseAction={dialogCloseAction} />
      <div className={classes.paper}>
        <Avatar className={classes.avatar}>
          <ScheduleIcon />
        </Avatar>
        {progressBar}
        <List className={classes.schedule} hidden={items.needUpdate}>
          {
            dates.map(date => {
              return (
                <li key={`ruzdate-${date}`} className={classes.stickyHeader}>
                  <ul className={classes.fixUl}>
                    <RuzListDate onClickForward={setOpenDialog} items={items[date]} date={date} />
                  </ul>
                </li>
              )
            })
          }
        </List>
      </div>
    </Container>
  );
}