import * as React from 'react';
import { FormFieldAlertEnum } from '.';
import { Card } from '../..';

interface IFormFieldAlertProps extends React.HTMLProps<HTMLDivElement> {
    alertType: FormFieldAlertEnum,
    className?: string,
    children?: any,
}

interface IFormFieldAlertState {
    isDisplayed: boolean,
}

export class FormFieldAlert extends React.Component<IFormFieldAlertProps, IFormFieldAlertState> {
    public static defaultProps = {
        children: null,
        className: '',
    };

    public state = {
        isDisplayed: true
    };

    public handleClose = () => {
        this.setState({
            isDisplayed: false,
        });
    };

    public render() {
        const { children, alertType, className, ...rest } = this.props;
        const { isDisplayed } = this.state;

        if (children || isDisplayed) {
            return null;
        }

        return (
            <Card {...rest} className={`alert alert--${alertType} ${className}`} >
                {children}
                <span onClick={this.handleClose}>
                    X
                </span>
            </Card>
        );
    }
}