import React, { Component, Fragment } from "react";
import { Alert, Button } from "react-bootstrap";
import PropTypes from "prop-types";

interface AlertProps {
  classes?: string;
  children?: any;
  dismissible?: boolean;
  variant: any;
}

export default class EfeAlert extends Component<AlertProps> {
  state = {
    showCustomAlert: true
  };
  /* Props
   * ------------------------------------------------
   *   @prop { string }    classes             - Optional.  Bootstrap class properties can be sent.
   *   @prop { boolean }   dismissible         - Optional.  Closable property.
   *   @prop { string }    variant             - Optional.  Color of the alert component. Defined badge colors: primary, secondary, success, info, warning, danger, ligth. Default value: primary

   */

  /* PropTypes
   * ---------------------------------------------- */
  static propTypes = {
    classes: PropTypes.string,
    children: PropTypes.any,
    dismissible: PropTypes.bool,
    variant: PropTypes.string
  };

  closeCustomAlert = () => {
    this.setState({ showCustomAlert: false });
  };

  /* Life Cycle Functions
   * ------------------------------------------------ */

  render() {
    const { children, dismissible = true, variant } = this.props;
    return (
      <Fragment>
        {this.state.showCustomAlert && (
          <Alert
            className={this._getClasses()}
            variant={variant}
            dismissible={dismissible}
            onClose={this.closeCustomAlert}
          >
            {children}
          </Alert>
        )}
      </Fragment>
    );
  }

  /* Components Functions
   * ------------------------------------------------ */

  _getClasses = () => {
    const { classes } = this.props;
    let className: string = "";
    className += `alert-card ${classes}`;
    return className;
  };
}
