import React, { useEffect, useState } from 'react';
import { disableBodyScroll, enableBodyScroll } from 'body-scroll-lock';

import Container from '../../shared/Container';
import { PrismicElement, PrismicImage } from '../../../typings/prismic';
import { BlockVideo, BlockMainVideo, ThumbnailVideo, ReviewWrapper } from '../../../styles/components/main/homepage/Review.style';
import ModalVideo from '../../shared/ModalVideo';
import { TextualReview, HomePageVideoReview } from '../../../typings/entities';
import RichText from '../../RichText';
import PrismicLink from '../../PrismicLink';
import { BlockReview } from '../../../styles/components/main/Review.style';
import { Flex } from '../../../styles/components/shared/Flex.style';
import { Avatar } from '../../../styles/components/shared/Avatar.style';

interface Props {
  title: string;
  description: PrismicElement;
  mainVideo: { id: string; illustration: PrismicImage };
  tagline: string;
  videoReviews: HomePageVideoReview[];
  textualReviews: TextualReview[];
}

const Review: React.FC<Props> = ({ title, description, mainVideo, tagline, videoReviews, textualReviews }) => {
  const [youtubeID, setYoutubeID] = useState<string>();

  useEffect(() => {
    if (youtubeID) {
      disableBodyScroll(undefined, { reserveScrollBarGap: true });
    } else {
      enableBodyScroll();
    }
  }, [youtubeID]);

  function renderVideoReviews (): React.ReactElement[] {
    return videoReviews.map((review: HomePageVideoReview, index: number) => (
        <div key={`video-review-${index}`}>
          <BlockVideo>
            <ThumbnailVideo onClick={() => setYoutubeID(review.video_review_id)}>
              <img src={review.video_review_illustration.url} alt={review.video_review_illustration.alt} />
              <i className="fas fa-play" />
            </ThumbnailVideo>
            <div>
              <RichText content={review.video_review_description} />
              <div>
                <div>
                  <strong>{review.video_review_author}</strong>
                  <PrismicLink link={review.video_review_author_company_link}>{review.video_review_author_company}</PrismicLink>
                </div>
                <div>
                  <img src={review.video_review_author_logo.url} alt={review.video_review_author_logo.alt} />
                </div>
              </div>
            </div>
          </BlockVideo>
        </div>
    ));
  }

  function renderStars (grade: number): string {
    let stars = '';
    for (let i = 0; i < grade; i++) {
      stars += '★';
    }
    for (let i = grade; i < 5; i++) {
      stars += '☆';
    }
    return stars;
  }

  function renderTextualReviews (): React.ReactElement {
    return (
        <div>
          {textualReviews.map((review: TextualReview, index: number) => (
              <BlockReview key={`textual-review-${index}`}>
                <Flex justifyContent="space-between">
                  <span>{renderStars(review.review_grade)}</span>
                  {review.review_platform_logo?.url && <img src={review.review_platform_logo.url} alt={review.review_platform_logo.alt} />}
                </Flex>
                <RichText content={review.review_text} />
                <Flex>
                  {review.review_author_avatar?.url && <Avatar url={review.review_author_avatar.url} />}
                  <strong>{review.review_author}</strong>
                </Flex>
              </BlockReview>
          ))}
        </div>
    )
  }

  return (
    <>
      {youtubeID && <ModalVideo youtubeID={youtubeID} onClose={() => setYoutubeID(null)} />}
      <Container color="grey">
        <h2>{title}</h2>
        <RichText content={description} Component={'div'} className="text-center mb" />
        <BlockMainVideo>
          <ThumbnailVideo onClick={() => setYoutubeID(mainVideo.id)}>
            <img src={mainVideo.illustration.url} alt={mainVideo.illustration.alt} />
            <i className="fas fa-play" />
          </ThumbnailVideo>
          <div>
            <h3>{tagline}</h3>
          </div>
        </BlockMainVideo>
        <ReviewWrapper>
          {renderVideoReviews()}
          {renderTextualReviews()}
        </ReviewWrapper>
      </Container>
    </>
  );
};

export default Review;