import * as React from 'react';
// import {isString} from 'lodash';
// import * as uuidv4 from 'uuid/v4'
import RenderHtml from '../renderFunction';
import PropsTypes from './types';
import classNames from "classnames";

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

    // private button = React.createRef<HTMLButtonElement>();

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

    handleClick = () => {
        const {disabled} = this.props;

        if (disabled) {
            return
        }

        this.props.onClick && this.props.onClick()

    };

    renderTypeRender() {
        const {type, text, icon, size, color, outline, disabled, active, loading, fluid, inverted, rounded, customStyle} = this.props;

        const uiClass = classNames(`krax-button is-${size || 'default'} is-${color || 'default'} ${customStyle || ''}`, {
            'is-fullwidth': fluid,
            'is-outlined': outline,
            'is-inverted': inverted,
            'is-rounded': rounded,
            'disabled': disabled,
            'active': active,
            'is-loading': loading
        });

        if (type === 'a') {
            return <a
                href={'#'}
                className={uiClass}
                onClick={() => this.handleClick()}
            >
                {RenderHtml.renderIcon(icon, 'left')}
                {text ? <span>{text}</span> : null}
                {RenderHtml.renderIcon(icon, 'right')}
            </a>
        }

        return <button
            type={type ? type : 'button'}
            className={uiClass}
            disabled={disabled}
            onClick={() => this.handleClick()}
        >
            {RenderHtml.renderIcon(icon, 'left')}
            {text ? <span>{text}</span> : null}
            {RenderHtml.renderIcon(icon, 'right')}
        </button>
    }

    public render(): JSX.Element {
        return this.renderTypeRender();
    }
}