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

interface State {
    icon: string,
    spin: boolean,
    onClick?: Function
}

export default class Button extends React.Component<PropsTypes, State> {

    public state: State;

    constructor(props: PropsTypes, {}) {
        super(props);

        this.state = {
            ...props,
            spin: this.props.spin || false,
            icon: this.props.icon
        };
    }


    componentWillReceiveProps(nextProps: any) {
        if (nextProps.icon !== this.props.icon) {
            this.setState({
                icon: this.props.icon
            })
        }

        if (nextProps.spin !== this.props.spin) {
            this.setState({
                spin: nextProps.spin
            })
        }
    }

    public render(): JSX.Element {
        const {icon, spin} = this.state;
        return (
            <i onClick={()=> this.props.onClick && this.props.onClick()}>
                <i className={`${icon} ${spin}`}></i>
            </i>
        );
    }
}