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

import { Avatar, IAvatarProps } from "../Avatar";
import { Button, ButtonSize } from "../Button";
import { Form } from "../Form";
import { Loading, LoadingType } from "../Loading";
import { Pill, IPillProps } from "../Pill";
import { Pin, PinType } from "../Pin";
import { Reveal, RevealType } from "../Reveal";
import { Sheet, ISheetProps } from "../Sheet";
import { Link, LinkType, ILinkProps } from "../Link";

interface IPhotographerProps {
  avatar: IAvatarProps;
  sheet: ISheetProps;
  name: string;
  pill?: IPillProps;
  link?: Partial<ILinkProps>;
  promo?: string;
  request?: (data: any, complete: (success: boolean) => void) => void;
  onProfileBook?: () => void;
  onClose?: (navigation: string) => void;
  onFinish?: (success: boolean) => void;
  /**
   * Reset to the initial photographer "profile" screen when the sheet is closed
   */
  resetOnClose?: boolean;
  /**
   * Instead of a 'Book' button, only an email link will be shown
   */
  bookAsLink?: ILinkProps;
}

interface IPhotographerState {
  navigation: "profile" | "book" | "loader" | "success" | "failed";
}

const defaultPhotographerState: IPhotographerState = {
  navigation: "profile",
};

export class Photographer extends React.Component<IPhotographerProps, IPhotographerState> {
  public state: IPhotographerState = defaultPhotographerState;

  public render() {
    const { onCloseEnd, ...sheetProps } = this.props.sheet;

    return (
      <Sheet {...sheetProps} onCloseEnd={() => {
        if (_.isFunction(this.props.onClose)) {
          this.props.onClose(this.state.navigation);
        }

        if (_.isFunction(onCloseEnd)) {
          onCloseEnd();
        }

        if (this.props.resetOnClose) {
          this.setState({
            navigation: "profile",
          });
        }
      }}>
        <div className="photographer__pill sheet--resizable">
          <Pill {...this.props.pill} />
        </div>
        {this.renderProfile(this.state.navigation === "profile")}
        {this.renderBook(this.state.navigation === "book")}
        {this.renderLoader(this.state.navigation === "loader")}
        {this.renderSuccess(this.state.navigation === "success")}
        {this.renderFailed(this.state.navigation === "failed")}
      </Sheet>
    );
  }

  private renderProfile = (active: boolean) => {
    return (
      <Reveal immediate={{
        reveal: true,
        hide: false,
      }} id="photographer-profile" type={RevealType.SlideRightToLeft} mount={active} className="photographer photographer__profile">
        <div className="photographer__avatar sheet--resizable">
          <Avatar {...this.props.avatar} />
        </div>

        <h2 className="photographer__name sheet--resizable">
          {this.props.name}
        </h2>

        {this.props.link && (
          <div className="photographer__link">
            <Link {...this.props.link} type={LinkType.Boxed} target="_blank" />
          </div>
        )}

        {this.props.promo && (
          <div className="photographer__promo">
            {this.props.promo}
          </div>
        )}

        <div className={classNames("photographer__button", {
          "photographer__button--as-link": !_.isEmpty(this.props.bookAsLink),
          // "sheet--resizable": true,
        })}>
          {this.props.bookAsLink ? (
            <Link {...this.props.bookAsLink} />
          ) : (
            <Button text="Book" size={ButtonSize.Large} onClick={() => {
              if (_.isFunction(this.props.onProfileBook)) {
                this.props.onProfileBook();
              }

              this.setState({ navigation: "book"})
            }} />
          )}
        </div>
      </Reveal>
    );
  }

  private renderBook = (active: boolean) => {
    return (
      <Reveal id="photographer-book" type={RevealType.SlideRightToLeft} mount={active} className="photographer photographer__book">
        <div className="photographer__book-title">
          Book Photographer
        </div>
        <div className="photographer__book-subtitle">
          Let us know how to contact you so we can book it.
        </div>
        <Form
          className="photographer__book-form"
          onSubmit={(data: any) => {
            if (_.isFunction(this.props.request)) {
              this.setState({ navigation: "loader" })
              this.props.request(data, (success: boolean) => {
                this.setState({ navigation: success ? "success" : "failed" })
              });
            }
          }}
          selects={[
            {
              isSearchable: false,
              id: "photographer-select",
              supertext: "Contact via",
              defaultValue: {
                value: "email",
                label: "Email",
                input: {
                  id: "photographer-email",
                  supertext: "Email",
                  type: "email",
                  placeholder: "Enter your email",
                  required: true,
                },
              },
              defaultOptions: [
                {
                  value: "email",
                  label: "Email",
                  input: {
                    id: "photographer-email",
                    supertext: "Email",
                    type: "email",
                    placeholder: "Enter your email",
                    required: true,
                  },
                },
                {
                  value: "sms",
                  label: "SMS",
                  input: {
                    id: "photographer-sms",
                    supertext: "Phone Number",
                    type: "tel",
                    placeholder: "Enter your number",
                    required: true,
                  }
                },
                {
                  value: "call",
                  label: "Call",
                  input: {
                    id: "photographer-call",
                    supertext: "Phone Number",
                    type: "tel",
                    placeholder: "Enter your number",
                    required: true,
                  }
                },
              ],
            }
          ]}
          submit={{ text: "Book" }}
        />
      </Reveal>
    );
  }

  private renderLoader = (active: boolean) => {
    return (
      <Reveal id="photographer-loader" type={RevealType.SlideRightToLeft} mount={active} className="photographer photographer__loader">
        <Loading title="Requesting..." type={LoadingType.Spinner} />
      </Reveal>
    );
  }

  private renderSuccess = (active: boolean) => {
    return (
      <Reveal id="photographer-success" type={RevealType.SlideRightToLeft} mount={active} className="photographer photographer__success">
        <div className="photographer-success__pin">
          <Pin type={PinType.Success} />
        </div>

        <div className="photographer-success__title">
          Request Sent
        </div>
        <div className="photographer-success__subtitle">
          We will follow up with you shortly.
        </div>

        <div className="photographer__button">
          <Button text="Ok" size={ButtonSize.Large} onClick={this.props.onFinish.bind(null, true)} />
        </div>
      </Reveal>
    );
  }

  private renderFailed = (active: boolean) => {
    return (
      <Reveal id="photographer-failed" type={RevealType.SlideRightToLeft} mount={active} className="photographer photographer__failed">
        <div className="photographer-failed__pin">
          <Pin type={PinType.Failed} />
        </div>

        <div className="photographer-failed__title">
          Something went wrong!
        </div>
        <div className="photographer-failed__subtitle">
          Please try again shortly.
        </div>
      </Reveal>
    );
  }
}