import Grid from 'react-css-grid'
import React from 'react';
import PropTypes from 'prop-types';
import VideoItem from "./VideoItem";
import RandomItemTitle from "./SectionHeading";
import {Link} from 'react-router-dom';
class RandomTopic extends React.Component {

  shuffleTopic() {
    this.props.getRandomTopicVideos(this.props.allTopics);
  }

  render() {
    return (
      <section>
        <h2 className="section-subheading">Related Videos</h2>
        <Grid
          width={450}
        >
          {/* Shuffle button */}
          <button className="shuffle-button" onClick={this.shuffleTopic.bind(this)}>
            <span className="english-text">Shuffle Videos - </span>
            <span className="arabic-text"> ضربة حظ </span>
            <i className="fa fa-random"></i>
          </button>
        </Grid>

        <Grid className="random-topics"
              width={220}
              gap={12}>
          {this.props.videos.map(video =>
            <VideoItem id={video.id} key={video.id} title={video.title}/>
          )}
        </Grid>
      </section>

    )
  }
}

RandomTopic.propTypes = {
  topicName: PropTypes.string,
  allTopics: PropTypes.array,
  videos: PropTypes.array,
  loading: PropTypes.bool,
  topicCount: PropTypes.number,
  getRandomTopicVideos: PropTypes.func
};

export default (RandomTopic);