#app

$movieContentBg: #ddd

=scaleUp
  opacity: 1
  transform: scale(1)
  
=scaleDown($delay: 0)
  transform: scale(0)
  opacity: 0
  transition: transform .24s ease-in $delay, opacity .3s linear
  
*,*::before,*::after
  margin: 0
  padding: 0
  box-sizing: border-box

a
  text-decoration: none
  

.movies__container
  display: flex
  flex-wrap: wrap
  margin: 0 auto
  width: 95%
  padding-top: 30px
  justify-content: space-around
  color: #ddd
  
.movie
  margin: 5px
  padding: 20px 5px 10px
  display: flex
  flex-direction: column
  justify-content: space-between
  background-blend-mode: color
  max-width: 270px
  height: 400.1px
  box-shadow: 10px 10px 10px #111
  transition: background-color .25s linear
  text-align: center
  font-family: 'Roboto', sans-serif
  background-size: cover
  &:hover
    background-color: rgba(0,0,0,.8)
    .movie__title,
    .movie__description,
    .movie__infos div,
    .movie__rating,
    .movie__imdb-button
      +scaleUp
    
    
.movie__title
  +scaleDown
  text-transform: uppercase
  
.movie__description
  max-height: 200px
  +scaleDown(0.05s)
  
.movie__infos
  display: grid
  grid-gap: 10px 0
  grid-template-columns: repeat(2,1fr)
  align-items: center  
  
.info__head
  display: block
  margin-bottom: 4px
  font-weight: bold
  font-size: 1.1em
  
.movie__duration
  +scaleDown(0.15s) 

.movie__director
  +scaleDown(0.20s)
    
.movie__year
  +scaleDown(0.25s)
    
.movie__cast
  +scaleDown(0.30s)
  font-size: .9em
    
.movie__imdb
  display: flex
  justify-content: space-between
  align-items: center
  justify-self: flex-end
  padding: 0 10px
  
.movie__rating
  +scaleDown(0.35s)
    
.fa-star
  width: 9px
  font-size: 1.2em
  display: inline-block
  overflow: hidden
  &.checked
    color: yellow 
    
    
.movie__imdb-button
  width: 60px
  height: 30px
  border-radius: 5px
  background-color: #EBBA33
  display: flex
  justify-content: center
  align-items: center
  color: #000
  font-family: 'Oswald', sans-serif
  font-size: 1.1em
  font-weight: bold
  cursor: pointer
  +scaleDown(0.40s)

const Rating = ({rating}) => {
  let stars = [];
  for (let i = 1; i < 11; i++) {
    let klass = "fa fa-star";
    if (rating >= i && rating !== null) {
      klass = "fa fa-star checked";
    }
    stars.push(
      <i
        style={{ direction: (i%2===0) ? "rtl" : "ltr"}}
        className={klass}
        />
    );
  }
  return (
    <div className="movie__rating">
      {stars}
    </div>
  );
}



const MovieInfo = ({name,value}) => (
  <div className={`movie__${name}`}>
    <span className='info__head'>
      {name.replace(/\b\w/g, l => l.toUpperCase())}
    </span>
    {value}
  </div>
)


const Movie = ({infos}) => {
  const cast = infos.cast.map(actor => (
    <p key={actor}>{actor}</p>
  ))
  return(
    <div className='movie' style={{backgroundImage: `url(${infos.poster})`}}>
      
      <h2 className='movie__title'>{infos.title}</h2>
      
      <span className='movie__description'>{infos.description}</span>
      
      <div className='movie__infos'>
        <MovieInfo name='duration' value={infos.duration} />
        <MovieInfo name='director' value={infos.director} />
        <MovieInfo name='year' value={infos.year} />
        <MovieInfo name='cast' value={cast} />
      </div>
      
      <div className='movie__imdb'>
        <Rating rating={Math.round(infos.rating)}/>
        <a href={infos.imdbLink} className='movie__imdb-button' target='blank'> IMDb </a>
      </div>
      
    </div>
  )
} 

class App extends React.Component {
  constructor(props){
    super(props);
  }
  
  render() {
    const moviesList = this.props.infos.map((movie,i)=> (
      <Movie key={i} infos={movie}/>
    ))
    return (
      <div className='movies__container'>
        {moviesList}
      </div>
    )
  }
}



const infos = [
  {
    title: 'Thor',
    description: 'The powerful, but arrogant god Thor, is cast out of Asgard to live amongst humans in Midgard (Earth), where he soon becomes one of their finest defenders.',
    duration: '124',
    year: '2011',
    director: 'Kenneth Branagh',
    cast: ['Chris Hemsworth','Anthony Hopkins','Natalie Portman'],
    rating: 8.7,
    imdbLink: 'https://www.imdb.com/title/tt0800369/',
    poster:  'http://media.comicbook.com/2017/10/thor-movie-poster-marvel-cinematic-universe-1038890.jpg'
  },
  {
    title: 'The Shawshank Redemption',
    description: 'Two imprisoned men bond over a number of years, finding solace and eventual redemption through acts of common decency.',
    duration: '142',
    year: '1994',
    director: 'Frank Darabont',
    cast: ['Tim Robbins', 'Morgan Freeman', 'Bob Gunton'],
    rating: 9.3,
    imdbLink: 'https://www.imdb.com/title/tt0111161/',
    poster: "https://ae01.alicdn.com/kf/HTB1xKI9PFXXXXXAXVXXq6xXFXXXG/Dropship-The-Shawshank-Redemption-Nostalgia-classic-movie-kraft-paper-bar-poster-Retro-Poster-decorative-painting.jpg"
  },
  {
    title: 'The Silence of the Lambs',
    description: 'A young F.B.I. cadet must receive the help of an incarcerated and manipulative cannibal killer to help catch another serial killer, a madman who skins his victims.',
    duration: '118',
    year: '1991',
    director: 'Jonathan Demme',
    cast: ['Jodie Foster', 'Anthony Hopkins', 'Lawrence A. Bonney'],
    rating: 8.6,
    imdbLink: 'https://www.imdb.com/title/tt0102926/',
    poster: "https://m.media-amazon.com/images/M/MV5BNjNhZTk0ZmEtNjJhMi00YzFlLWE1MmEtYzM1M2ZmMGMwMTU4XkEyXkFqcGdeQXVyNjU0OTQ0OTY@._V1_SY1000_CR0,0,677,1000_AL_.jpg"
  },
  {
    title: 'Spirited Away',
    description: "During her family's move to the suburbs, a sullen 10-year-old girl wanders into a world ruled by gods, witches, and spirits, and where humans are changed into beasts.",
    duration: '125',
    year: '2001',
    director: 'Hayao Miyazaki',
    cast: ['Daveigh Chase', 'Suzanne Pleshette', 'Miyu Irino'],
    rating: 8.6,
    imdbLink: 'https://www.imdb.com/title/tt0245429/',
    poster: "https://m.media-amazon.com/images/M/MV5BOGJjNzZmMmUtMjljNC00ZjU5LWJiODQtZmEzZTU0MjBlNzgxL2ltYWdlXkEyXkFqcGdeQXVyNTAyODkwOQ@@._V1_SY1000_CR0,0,675,1000_AL_.jpg"
  },
  {
    title: 'Starship Troopers',
    description: "Humans in a fascistic, militaristic future do battle with giant alien bugs in a fight for survival.",
    duration: '129',
    year: '1997',
    director: 'Paul Verhoeven',
    cast: ['Casper Van Dien', 'Denise Richards', 'Dina Meyer'],
    rating: 7.2,
    imdbLink: 'https://www.imdb.com/title/tttt0120201/',
    poster: "https://m.media-amazon.com/images/M/MV5BNThlOTFhOGEtZjE2NC00MzMzLThkYWItZjlkNWNlMDAzMGZkXkEyXkFqcGdeQXVyMTQxNzMzNDI@._V1_SY1000_CR0,0,732,1000_AL_.jpg"
  },
  
]
ReactDOM.render(<App infos={infos}/>, document.getElementById('app'));