/**
 * React component to create an accordion element
 */
import * as React from "react";

type IProps = {
  headerClass?: string; // Override default class
  headerContent: React.ReactElement;
  panelClass?: string; // Override default class
  panelContent: React.ReactElement;
  panelInitiallyOpened?: boolean;
  style?: string;
};

type IState = {
  panelOpened: boolean;
};

export class Accordion extends React.Component<IProps, IState> {
  constructor(props: IProps) {
    super(props);

    this.handleHeaderClick = this.handleHeaderClick.bind(this);

    this.state = {
      panelOpened: props.panelInitiallyOpened
        ? props.panelInitiallyOpened
        : false,
    };
  }

  handleHeaderClick(): void {
    this.setState({
      panelOpened: !this.state.panelOpened,
    });
  }

  render(): React.ReactNode {
    let className = "accordion-header";
    if (typeof this.props.headerClass === "string") {
      className = this.props.headerClass;
    }

    if (this.state.panelOpened) className += " active";

    return (
      <>
        <button className={className} onClick={this.handleHeaderClick}>
          {this.props.headerContent}
        </button>
        <AccordionPanel
          opened={this.state.panelOpened}
          panelClass={this.props.panelClass}
          panelContent={this.props.panelContent}
        />
      </>
    );
  }
}

type IPanelProps = {
  opened: boolean;
  panelClass?: string; // Override default class
  panelContent: React.ReactElement;
};

class AccordionPanel extends React.Component<IPanelProps, any> {
  shouldComponentUpdate(nextProps: IPanelProps): boolean {
    return this.props.opened || nextProps.opened;
  }

  render(): React.ReactNode {
    let className = "accordion-panel";
    if (typeof this.props.panelClass === "string") {
      className = this.props.panelClass;
    }

    if (!this.props.opened) return <></>;

    return (
      <div className={className} style={{ display: "block" }}>
        {this.props.panelContent}
      </div>
    );
  }
}