import * as classNames from "classnames";
import * as _ from "lodash";
import * as React from "react";
import { stretch, UIReflowEventType } from "./../../utilities/styling";

import { Avatar, IAvatarProps } from "./../Avatar";
import { Button, IButtonProps } from "./../Button";
import { Link, ILinkProps } from "./../Link";
import { Lights } from "./../Lights";
import { Icon, IIconProps } from "./../Icon";

interface IHeaderProps {
  text?: string;
}

export enum SubheaderType {
  Simple = "Simple",
  Sectioned = "Sectioned",
}

interface ISubheaderSection {
  /**
   * Since we iterate through the provided sections,
   * we want to provide proper keys to React.
   */
  id: string;
  text?: string;
  icon?: IIconProps;
  link?: ILinkProps;
}

interface ISubheaderProps {
  type: SubheaderType;
  text?: string;
  sections?: ISubheaderSection[];
}

interface ICardProps {
  header?: IHeaderProps;
  /**
   * Render the main body of the <Card>
   */
  renderContent?: () => JSX.Element;
  /**
   * Place the header and subheader next to each other
   */
  inlineHeaders?: boolean;
  subheader?: ISubheaderProps;
  /**
   * If provided, a floating "action" button will render fixed
   * to the botton of the card.
   */
  action?: IButtonProps;
  /**
   * This styling property removes the rounded edges from the bottom right and bottom left corners.
   */
  flatBottom?: boolean;
  /**
   * This styling property will apply a `margin: 0 auto` to the element. This centers it horizontally 
   * inside its containing element.
   */
  center?: boolean;
  /**
   * The <Card> component calculates its height dynamically based on its parent container. If
   * the parent container also calculates its height dynamically a recalculation of height might be
   * needed.
   */
  listenForReflowEvent?: boolean;
  /**
   * Should the <Card> stretch to fit inside its parent container
   */
  stretch?: boolean;
  /**
   * Will set any string data on the 'data-card' attribute.
   */
  dataAttr?: string;
  /**
   * Add a Christmas themed easter egg
   */
  lights?: boolean;
  /**
   * Add an avatar to the left of the title
   */
  avatar?: IAvatarProps;
}

export class Card extends React.PureComponent<ICardProps, {}> {
  public cardRef: React.RefObject<HTMLDivElement>;
  public contentContainerRef: React.RefObject<HTMLDivElement>;
  /**
   * We create a reference to the node which handles the scrollable
   * content content as we want to perform scroll fixes on it.
   *
   * @see `Utilities#provideBounce`
   */
  public cardContentRef: React.RefObject<HTMLDivElement>;

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

    this.cardRef = React.createRef();
    this.contentContainerRef = React.createRef();
    this.cardContentRef = React.createRef();
  }

  public componentDidMount() {
    if (this.props.stretch) {
      this.stretchElements();
    }

    if (this.props.listenForReflowEvent) {
      this.addReflowListener();
    }
  }

  public componentWillUnmount() {
    if (this.props.listenForReflowEvent) {
      this.removeReflowListener();
    }
  }

  public render() {
    const { header, subheader, flatBottom, inlineHeaders, center, action, dataAttr, lights } = this.props;
     
    return (
      <div className={`card ${flatBottom && "card--flat-bottom"} ${center && "card--center"} ${inlineHeaders && "card--inline-headers"}`} ref={this.cardRef} {...dataAttr && { "data-card": dataAttr}}>
        <div className="card__header-container">
          {lights && <Lights />}
          <div className={classNames("card__header", {
            "pt-10": lights,
            "card__header--with-avatar": this.props.avatar,
          })}>
            {this.props.avatar && (
              <div className="card__avatar">
                <Avatar {...this.props.avatar} />
              </div>
            )}
            {header.text}
          </div>
          {!_.isEmpty(subheader) && (
           <div className={`card__subheader ${subheader.type === SubheaderType.Sectioned ? "card__subheader--sectioned" : "card__subheader--simple"}`}>
              {subheader.type === SubheaderType.Sectioned ? (
                <React.Fragment>
                  {(subheader.sections || []).map((section: ISubheaderSection) => (
                    <div className="card__subheader-section" key={section.id}>
                      {section.icon && (
                        <div className={`card__subheader-section-icon ${section.link && "card__subheader-section-icon--link"}`}>
                          <Icon {...section.icon} />
                        </div>
                      )}
                      {(section.text || section.link) && (
                        <div className={`card__subheader-section-text ${section.link && "card__subheader-section-text--link"}`}>
                          {section.link ? <Link {...section.link} /> : section.text}
                        </div>
                      )}
                    </div>
                  ))}
                </React.Fragment>
              ) : subheader.text}
            </div>
          )}
        </div>

        {_.isFunction(this.props.renderContent) && (
          <div className="card__content-container">
            {this.props.renderContent()}
          </div>
        )}
          
        {action && (
          <div className="card__action">
            <Button {...action} />
          </div>
        )}
      </div>
    );
  }

  private withCard<T>(found: (node: HTMLDivElement) => T, notFound?: () => T): T {
    const cardNode = this.cardRef.current;

    if (cardNode) {
      return found(cardNode);
    } else if (notFound) {
      return notFound();
    }

    return null;
  }

  private withContentContainer<T>(found: (node: HTMLDivElement) => T, notFound?: () => T): T {
    const contentContainerNode = this.contentContainerRef.current;

    if (contentContainerNode) {
      return found(contentContainerNode);
    } else if (notFound) {
      return notFound();
    }

    return null;
  }

  private addReflowListener = () => {
    window.addEventListener(UIReflowEventType.StretchCardElements, this.stretchElements);
  }

  private removeReflowListener = () => {
    window.removeEventListener(UIReflowEventType.StretchCardElements, this.stretchElements);
  }

  /**
   * Stretch the <Card> to the bottom of its parent and the inner content to the bottom of the <Card>
   */
  private stretchElements = () => {
    if (this.props.stretch) {
      this.withCard((card) => {
        // Stretch the card to the bottom of its parent
        stretch(card);
      });

      this.withContentContainer((contentContainer) => {
        // Stretch the card to the bottom of its parent
        stretch(contentContainer);
      });
    }
  }
}