import * as React from "react";
import * as _ from "lodash";
import Collapsible from "react-collapsible";

import { Sprite, SpriteType } from "../../components/Sprite";

type JSXFunction = () => JSX.Element;

interface IAccordionProps {
  renderTitle: string | JSXFunction;
  renderSibling?: string | JSXFunction;
  renderContent?: () => JSX.Element;
  onClosing?: () => void;
  onOpening?: () => void;
  onClose?: () => void;
  onOpen?: () => void;
}

export class Accordion extends React.Component<IAccordionProps, {}> {
  public render() {
    return (
      <div className="accordion">
        <Collapsible
          trigger={this.renderTrigger()}
          lazyRender={true}
          easing="ease-in-out"
          transitionTime={150}
          {..._.isFunction(this.props.onOpening) && {
            onOpening: this.props.onOpening
          }}
          {..._.isFunction(this.props.onClosing) && {
            onClosing: this.props.onClosing
          }}
          {..._.isFunction(this.props.onOpen) && {
            onOpen: this.props.onOpen
          }}
          {..._.isFunction(this.props.onClose) && {
            onClose: this.props.onClose
          }}
        >
          {_.isFunction(this.props.renderContent) && (
            <div className="accordion__content">
              {(() => {
                return this.props.renderContent()
              })()}
            </div>
          )}
        </Collapsible>
      </div>
    );
  }

  private renderTrigger = () => {
    return (
      <div className="accordion__trigger">
        <div className="accordion__trigger-title">
          {_.isFunction(this.props.renderTitle) ? this.props.renderTitle() : this.props.renderTitle}
        </div>

        {this.props.renderSibling && (
          <div className="accordion__trigger-sibling">
            {_.isFunction(this.props.renderSibling) ? this.props.renderSibling() : this.props.renderSibling}
          </div>
        )}

        <div className="accordion__trigger-icon">
          <Sprite type={SpriteType.RightChevron} />
        </div>
      </div>
    );
  }
}