import React from 'react';
import { Link, useLocation } from 'react-router-dom';
import { sendEventViewItem } from '../../../utility/analytics/events';
import PlainText from '../../composite/plain-text';

import './index.scss';

export default function ComedianVideos({ videos, error }) {
  const location = useLocation();

  if (error) {
    return (
      <div className="comedian-videos error">
        <h3>Could not fetch any videos</h3>
        <p>Please try again later</p>
      </div>
    );
  }

  function send(params) {
    sendEventViewItem(params, location);
  }

  return (
    <ul className="comedian-videos flex-wrap">
      {videos.map((video, index) => {
        const loadingType = index < 4 ? 'auto' : 'lazy';
        const { videoId, title, url } = video;
        return (
          <li className="card video-card" key={videoId}>
            <Link to={`/watch/${videoId}`} onClick={() => send({ to: `/watch/${videoId}`, videoId, title })}>
              <img className="thumbnail" src={url} alt={title} loading={loadingType} />
              <div className="card-title">
                <PlainText text={title} />
              </div>
            </Link>
          </li>
        );
      })}
    </ul>
  );
}