import * as _ from "lodash";
import * as React from "react";
import * as smoothscroll from 'smoothscroll-polyfill';

import { markdownToHtml } from "../../utilities/strings";

import { About, IAboutProps } from "../../components/About";
import { IStaticMapProps, StaticMap } from "../StaticMap";
import { Image } from "../../components/Image";
import { Pointer } from "../../components/Pointer";
import { Testimonials } from "../../components/Testimonials";
import { Treadmill, TreadmillDirection } from "../../components/Treadmill";
import { IVideoProps, Video } from "../../components/Video";
import { getImageSrc } from "../../utilities/image";

interface IAircamProps {
  staticMap: IStaticMapProps;
  about: IAboutProps;
  imagePrefix?: string;
  onLearnMore?: () => void;
  video?: IVideoProps;
  onTestimonialsInteraction?: () => void;
  testimonialsDisabled?: boolean;
}

export class Aircam extends React.Component<IAircamProps, {}> {
  public componentDidMount() {
    smoothscroll.polyfill();
  }

  public render() {
    return (
      <div className="aircam">
        <Treadmill
          panes={5}
          renderPane={this.renderPane}
          direction={TreadmillDirection.Vertical}
        />
      </div>
    );
  }

  private renderPane = (pane: number): JSX.Element => {
    if (pane === 0) {
      return (
        <div className="aircam__map">
          <StaticMap {...this.props.staticMap} />
          <Pointer onClick={() => {
            if (_.isFunction(this.props.onLearnMore)) {
              this.props.onLearnMore();
            }

            document.getElementById('treadmill__pane-1').scrollIntoView({ behavior: "smooth" });
          }} />
        </div>
      );
    }

    if (pane === 4) {
      return (
        <div className="aircam__pane">
          <About {...this.props.about} />
        </div>
      );
    }

    return (
      <div className="aircam__pane">
        <div className="aircam__pane-text">
          <h3 dangerouslySetInnerHTML={{ __html: this.getHeaderHtmlForPane(pane - 1) }} />
          <div className="aircam__pane-text-separator" />
          <p>{this.getParagraphForPane(pane - 1)}</p>
        </div>

        <div className="aircam__pane-content">
          {this.getContentForPane(pane - 1)}
        </div>
      </div>
    );
  }

  /**
   * @param featurePane - The pane number excluding the first pane
   */
  private getHeaderHtmlForPane = (featurePane: number): string => {
    switch (featurePane) {
      case 0:
        return markdownToHtml("**Instantly share** photos with those **around you**");
      case 1:
        return markdownToHtml("**Anyone** can capture photos");
      case 2:
        return markdownToHtml("See **Aircam in action**");
      default:
        return "";
    }
  }

  /**
   * @param featurePane - The pane number excluding the first pane
   */
  private getParagraphForPane = (featurePane: number): string => {
    switch (featurePane) {
      case 0:
        return "Without anyone else downloading the app";
      case 1:
        return "Built for professional photographers to iPhone amateurs. Use your iPhone camera or connect to a Canon, Sony or Nikon.";
      case 2:
      default:
        return "";
    }
  }

  /**
   * @param featurePane - The pane number excluding the first pane
   */
  private getContentForPane = (featurePane: number) => {
    switch (featurePane) {
      case 0:
        return <Image src={getImageSrc(this.props.imagePrefix, "phone.png")} />;
      case 1:
        return <Image src={getImageSrc(this.props.imagePrefix, "photo-illustration.png")} />;
      case 2:
        return (
          <>
            <div className="aircam__video-container">
              <Video
                {...this.props.video}
                className="aircam__video"
              />
            </div>
            <Testimonials
              disabled={this.props.testimonialsDisabled}
              testimonials={[
                //{
                  //userThumbnail: getImageSrc(this.props.imagePrefix, "profile_grant_t.jpeg"),
                  //userName: "Grant T.",
                  //quote: "Aircam made me a better photographer and I'm so grateful.",
                //},
                //{
                  //userThumbnail: getImageSrc(this.props.imagePrefix, "profile_jordan_r.jpeg"),
                  //userName: "Jordan R.",
                  //quote: "Aircam is next-gen. It's simple and brilliant.",
                //},
                {
                  userThumbnail: getImageSrc(this.props.imagePrefix, "profile_erin_l.jpeg"),
                  userName: "Erin L.",
                  quote: "The joy Aircam spreads is amazing.",
                },
                //{
                  //userThumbnail: getImageSrc(this.props.imagePrefix, "profile_jessica_f.jpeg"),
                  //userName: "Jessica F.",
                  //quote: "People's minds are blown when they get PRO photos instantly.",
                //}
              ]} 
              onInteraction={this.props.onTestimonialsInteraction}
            /> 
          </>
        );
      default:
        return null;
    }
  }
}