import * as React from "react";
import * as _ from "lodash";

import { Avatar } from "../Avatar";
import AliceCarousel from "react-alice-carousel";

interface ITestimonial {
  userThumbnail: string;
  userName: string;
  quote: string;
}

interface ITestimonialsProps {
  testimonials: ITestimonial[]
  className?: string;
  id?: string;
  onInteraction?: () => void;
  disabled?: boolean;
}

const AUTOPLAY_INTERVAL = 10000

const responsiveGallery = {
  0: { items: 1 },
  700: { items: 2 },
  1400: { items: 4 },
}


export class Testimonials extends React.Component<ITestimonialsProps, {}> {
  public ref: React.RefObject<HTMLDivElement>;
  private carousel: any;

  constructor(props: ITestimonialsProps) {
    super(props);

    this.ref = React.createRef();
  }

  public componentDidMount() {
    // Alice carousel doesn't provide a hook into interactions in general, but
    // does pause after user interaction, so we shim out the pause function, and
    // assume it was triggered by an interaction.
    this.carousel._originalPause = this.carousel._pause 
    this.carousel._pause = (i: number) => {
      this.handleInteraction();
      this.carousel._originalPause();
    }
  }

  public createTestimonialItem(testimonial, i) {
    return <div className="testimonial" key={testimonial.userName} id={`testimonial__${i}`}>
        <div className="testimonial__avatar">
          <div className="testimonial__avatar-single-quote">
            <span>{`\"`}</span>
          </div>
          <Avatar src={testimonial.userThumbnail} />
        </div>

        <div className="testimonial__quote-citation">
          <blockquote className="testimonial__quote">
            {testimonial.quote}
          </blockquote>

          <cite className="testimonial__citation">
            {testimonial.userName}
          </cite>
        </div>
      </div>;
  }

  public handleInteraction = () => {
    if (this.props.onInteraction) {
      this.props.onInteraction()
    }
  }

  public render() {
    const disabled = !!this.props.disabled
    return (
      <div className="testimonials" ref={this.ref}>
        <AliceCarousel
          items={this.props.testimonials.map(this.createTestimonialItem)}
          responsive={responsiveGallery}
          ref={(el) => (this.carousel = el)}
          buttonsDisabled={disabled}
          dotsDisabled={disabled}
          autoPlayInterval={AUTOPLAY_INTERVAL}
          autoPlay={!disabled}
          mouseDragEnabled={!disabled}
          swipeDisabled={disabled}
          disableAutoPlayOnAction={true}
        > 
        </AliceCarousel>
      </div>
    );
  }
}