import React from "react";
import { GenreSelect } from "./GenreSelect";

export const MoviesList = ({
  movies,
  selectedMovie,
  onGenreSelect,
  selectTicket,
  selectedGenres
}) => {
  return (
    <React.Fragment>
      <GenreSelect onGenreSelect={onGenreSelect} />
      <br />
      <br />
      <div>Filmai</div>
      <ul>
        {movies && movies.filter(movie => {
              let hasGenre = true;
              movie.genre.forEach(g => {
                if (!selectedGenres.includes(g)) {
                  hasGenre = false;
                }
              });
              return hasGenre;
            })
            .map((el, index) => (
              <li key={el.name}>
                <div
                  style={{
                    width: "500px",
                    display: "inline-flex",
                    justifyContent: "space-between"
                  }}
                >
                  {el.name}
                  <div>
                    <button
                      onClick={() => selectTicket(el.price)}
                      style={{ marginRight: "10px" }}
                    >
                      Suaugusiam ({el.price} €)
                    </button>
                    <button
                      onClick={() => selectTicket(Math.round(el.price * 0.8))}
                    >
                      Vaikui ({Math.round(el.price * 0.8)} €)
                    </button>
                  </div>
                </div>
              </li>
            ))}
      </ul>
    </React.Fragment>
  );
};