import React, {Component} from 'react';
import './index.scss';
import {showing} from "services/api";
import {cinema} from "services/cinema";
import Page from "components/Page";
import {groupBy} from "ramda";
import avatarImg from "assets/images/avatar.png";
import {Link} from "react-router-dom";
import Dialog from 'material-ui/Dialog';
import FlatButton from 'material-ui/FlatButton';
import RaisedButton from 'material-ui/RaisedButton';
import moment from 'moment';

const styles = {
  flatbtn: {
    fontSize: 20,
  },
};

class Repertoire extends Component {

    state = {
        showings: [],
    cinema: {},
    open: false,
    }

  constructor(props) {
    super(props)
  }

  componentDidMount() {
        showing
      .allForCinema(cinema.current.id)
            .then(response => {
                this.setState({
                    showings: response.data,
                })
            })
  }

  handleOpen = () => {
    this.setState({open: true});
  };

  handleClose = () => {
    this.setState({open: false});
  };

  groupByMovie = groupBy((showing) => showing.movie.id)

  render() {
    console.log(this.state)
    const actions = [
      <RaisedButton
        label="Rezerwuj/ Kup bilet"
        primary={true}
        onClick={this.handleClose}
        labelStyle={styles.flatbtn}
      />,
    ];

    return (
            <Page>
        <div className="repertoire">
                    <section className="hero is-light">
                        <div className="hero-body">
                            <div className="container">
                                <h1 className="title">W dniu</h1>
                            </div>
                        </div>
                    </section>

                    <div className="container">
            <div className="list">
              {
                this.state.showings
                  .map((showing, key) =>
                    <div key={showing.id} className="tile  hvr-grow">
                                            <div className="has-text-centered">
                                                <img src={showing.movie.imgURL} />
                                            </div>
                                            <div className="movie-info">
                                                <div>{showing.movie.title}</div>
                                                <div>12 lat</div>
                                                <div>{showing.movie.groups.map((g, i) => `${g.label}${i+1 !== showing.movie.groups.length ? ',':''} `)}</div>
                                                <div>{showing.movie.runTime} min</div>
                                            </div>
                                            <div className="showings-info">
                        <Link to={'/repertoire/reservation/' + showing.id} >
                                                <b>10:10</b>
                        </Link>
                                                <b>13:30</b>
                                                <b>19:50</b>
                          <button onClick={this.handleOpen}>Click me!</button>
                        <Dialog
                          actions={actions}
                          modal={false}
                          open={this.state.open}
                          onRequestClose={this.handleClose}
                        >
                          <div className="movie-info-wrapper">
                            <div className="movie-info-img">
                              <div className="imgimg">
                                <img className="poster" src={showing.movie.imgURL} />
                              </div>
                            </div>
                            <div className="movie-info-txt">
                              <h2>{showing.movie.title}</h2>
                              {showing.movie.groups.map((group) =>
                                <p key={group.id} className="types">{group.label}</p>
                              )}
                              <p>Czas trwania: {showing.movie.runTime} min. </p>
                              <p>Od lat: {showing.movie.age} </p>
                              <p>Produkcja: {showing.movie.country}</p>
                              <p>.............................................</p>
                              <p className="headingsp2">Kino:</p>
                              <p className="types2">{cinema.current.name}</p>
                              <p className="headingsp2">Data:</p>
                              <p className="types2">{moment(showing.screeningStart).format("YYYY-MM-DD  hh:mm")}</p>
                            </div>
                          </div>
                        </Dialog>
                      </div>
                  </div>
                )
              }

            </div>
          </div>


        </div>
      </Page>
    )
  }
}

export default Repertoire;