import * as React from "react";
import { useState } from "react";

import { About, IAboutProps } from "../../components/About";
import { Contacts, IContactsProps } from "../../components/Contacts";
import { Form } from "../../components/Form";
import { Image } from "../../components/Image";
import { IVideoProps, Video } from "../../components/Video";
import { Loading, LoadingType } from "../../components/Loading";
import { Link } from "../../components/Link";
import { Pin, PinType } from "../../components/Pin";

import { getImageSrc } from "../../utilities/image";

interface IPhotographerPromoProps {
  about: IAboutProps,
  contacts: IContactsProps;
  imagePrefix?: string;
  // TODO: This only requires src from IVideoProps
  video?: IVideoProps;
  /**
   * If provided, a <Form> will be rendered for booking
   * a photographer
   */
  book?: (data: any) => Promise<any>;
}

export const PhotographerPromo = ({
  about,
  contacts,
  imagePrefix,
  video,
  book,
}: IPhotographerPromoProps) => {
  const [booked, setBooked] = useState<"booking" | "booked" | "failed-book" | null>(null);

  return (
    <div className="photographer-promo">
      <div className="photographer-promo__header">
        <div className="photographer-promo__header-welcome">
          Welcome to Aircam
        </div>

        <div className="photographer-promo__header-image">
          <Image src={getImageSrc(imagePrefix, "buildings.png")} />
        </div>

        {video && (
          <div className="photographer-promo__header-video">
            <Video {...video} />
          </div>
        )}

        <div className="photographer-promo__header-text">
          Get a professional photographer
        </div>

        <div className="photographer-promo__header-price">
          $<span className="photographer-promo__header-price-value">99</span> <span className="photographer-promo__header-price-per">for</span> 90 mins
        </div>
      </div>
      
      <div className="photographer-promo__contacts">
        {book && (
          <div className="photographer-promo__form">

            {booked === "booking" && <Loading type={LoadingType.Spinner} />}
            {booked === "booked" && (
              <>
                <Pin type={PinType.Success} />

                <div className="photographer-promo__form-booking-status">
                  Thank you. We will be in touch!
                </div>
              </>
            )}
            {booked === "failed-book" && (
              <>
                <Pin type={PinType.Failed} />

                <div className="photographer-promo__form-booking-status">
                  Something went wrong!
                </div>

                <Link 
                  text= "Contact Support"
                  href= "mailto:support@air.cam"
                  target= "_blank"
                />
              </>
            )}

            {!booked && (
              <>
                <div className="photographer-promo__form-header">
                  Request a photographer
                </div>
                <Form
                  reveal={{
                    immediate: {
                      reveal: true,
                      hide: true,
                    },
                  }}
                  className="photographer-promo__form-form"
                  onSubmit={async (data: any) => {
                    try {
                      setBooked("booking");

                      await book(data);

                      setBooked("booked");
                    } catch (e) {
                      setBooked("failed-book");
                    }
                  }}
                  inputs={[
                    {
                      id: "photographer-email",
                      supertext: "Email",
                      type: "email",
                      placeholder: "Enter your email",
                      required: true,
                    }
                  ]}
                  submit={{ text: "Book" }}
                />
              </>
            )}
          </div>
        )}

        {!book && (
          <>
            <div className="photographer-promo__contacts-header">
              Contact us via
            </div>
            
            <Contacts {...contacts} />
          </>
        )}
      </div>

      <div className="photographer-promo__about">
        <About {...about} />
      </div>
    </div>
  )
}