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 RandomDate extends React.Component {

  shuffleDate() {
    this.props.getRandomDateVideos(this.props.allDates);
  }

  render() {
    return (
      <section className="random-item-container">
        <h2 className="section-heading">
          <span className="arabic-text random-section-title">من أماكن الارشيف</span>
          <br/>
          <span className="section-title">
          <span className='english-text bold-english-text random-section-title'> Dates from the archive
        </span>
          </span>
        </h2>
        <Grid
          width={450}
        >
          {/* View all dates button*/}
          <Link className="view-items-link" to="/dates">
            <button className="view-all-items">
              <span className="english-text"> all dates    &nbsp; </span>
              <span className="arabic-text"> 	 جميع الأماكن	</span>
            </button>
          </Link>
          {/* Shuffle button */}
          <button className="shuffle-button" onClick={this.shuffleDate.bind(this)}>
            <span className="english-text">Shuffle Dates - </span>
            <span className="arabic-text"> مكان عشوائي </span>
            <i className="fa fa-random"></i>
          </button>
        </Grid>

        <Grid className="random-dates"
              width={220}
              gap={12}>
          {/*{this.props.videos.map(video =>*/}
            {/*<VideoItem id={video.id} key={video.id} title={video.title}/>*/}
          {/*)}*/}
        </Grid>
        <RandomItemTitle title={this.props.dateName}
                         count={this.props.dateCount}
                         src={'/results/date/' + this.props.dateName}
        />
      </section>

    )
  }
}

RandomDate.propTypes = {
  dateName: PropTypes.string,
  allDates: PropTypes.array,
  videos: PropTypes.array,
  loading: PropTypes.bool,
  dateCount: PropTypes.number,
  getRandomDateVideos: PropTypes.func
};

export default (RandomDate);