import * as React from 'react';
import PropsTypes from './types';

interface State {
    show: boolean
}

export default class Button extends React.Component<PropsTypes, State> {
    constructor(props: PropsTypes, public state: State) {
        super(props);

        this.state = {
            show: this.props.show
        }
    }

    componentWillReceiveProps(props) {
        if (props.show !== this.props.show) {
            this.setState({
                show: !this.state.show
            })
        }
    }

    showHide() {
        this.setState({
            show: !this.state.show
        })
    }

    public render(): JSX.Element {
        const {show} = this.state;
        const {title, footer, children, position,size} = this.props;

        return (
            <div id="quickviewDefault" className={`quickview is-${position || 'right'} ${show ? 'is-active' : ''} is-${size || ''}`}>
                <header className="quickview-header">
                    <p className="title">{title}</p>
                    <span className="krax-delete" onClick={() => this.showHide()} />
                </header>

                <div className="quickview-body">
                    <div className="quickview-block">
                        {children}
                    </div>
                </div>

                <footer className="quickview-footer">
                    {footer}
                </footer>
            </div>

        );
    }
}