import React from 'react';
import PropTypes from 'prop-types';

import '../styles/button.css';
import '../styles/main.css';

import { Loader } from './Loader';

export const Button = ({ intent, appearance, disabled, size, align, isLoading, isActive, isFullWidth, children, ...props }) => {

    const loading = isLoading && `loading`
    const active = isActive && `active`
    const fullWidth = isFullWidth && 'full-width'

    return (
        <button
            type="button"
            className={['button', intent, appearance, size, align, loading, active, fullWidth].join(' ')}
            disabled={disabled || isLoading}
            {...props}
        >
            {
                isLoading ?
                <>
                    <div style={{ display: "flex", justifyContent: 'center', padding: 16, paddingBottom: 22, paddingRight: 22 }}>
                        <Loader />
                    </div>
                </>
                :
                <>
                    {children}
                </>
            }
        </button>
    );
};

Button.propTypes = {
    intent: PropTypes.oneOf(['default', 'primary', 'minimal']),
    appearance: PropTypes.oneOf(['none', 'succes', 'danger', 'warning']),
    disabled: PropTypes.bool,
    size: PropTypes.oneOf(['small', 'medium']),
    align: PropTypes.oneOf(['start', 'center']),
    isLoading: PropTypes.bool,
    isActive: PropTypes.bool,
    isFullWidth: PropTypes.bool,
    /**
     * Optional click handler
     */
    onClick: PropTypes.func,
};

Button.defaultProps = {
    intent: 'default',
    appearance: 'none',
    disabled: false,
    size: 'medium',
    align: 'center',
    isLoading: false,
    isActive: false,
    isFullWidth: false,
    onClick: undefined,
};
