import React, {MouseEvent, forwardRef, ForwardedRef, ReactNode, MouseEventHandler, CSSProperties} from 'react';
import cls from 'classnames';
import {IconType, Icon} from '@core0/icon';
import cn from './roundButton.module.styl';

interface RoundButtonProps {
    pulse?: boolean;
    children?: ReactNode;
    icon?: IconType;
    inverse?: boolean;
    secondary?: boolean;
    flat?: boolean;
    type?: 'submit' | 'reset' | 'button';
    size?: 'tiny' | 'small' | 'regular' | 'large' | 'huge' | 'oval';
    labelState?: 'selected' | 'deselected';
    disabled?: boolean;
    className?: string;
    style?: CSSProperties;
    onClick?: MouseEventHandler;
    onMouseDown?: MouseEventHandler;
    onMouseUp?: MouseEventHandler;
}

export const RoundButton = forwardRef((props: RoundButtonProps, ref: ForwardedRef<HTMLButtonElement>) => {
    const {
        onClick = () => {},
        onMouseDown = () => {},
        onMouseUp = () => {},
        type = 'button',
        size = 'regular',
        disabled = false,
        className = '',
        pulse = false,
        flat,
        inverse,
        secondary,
        labelState,
        icon,
        style,
        children
    } = props;

    function clickHandler(evt: MouseEvent<HTMLButtonElement>) {
        if (!disabled) onClick(evt);
    }

    function mouseDownHandler(evt: MouseEvent<HTMLButtonElement>) {
        if (!disabled) onMouseDown(evt);
    }

    function mouseUpHandler(evt: MouseEvent<HTMLButtonElement>) {
        if (!disabled) onMouseUp(evt);
    }

    return (
        <button
            ref={ref}
            className={cls(
                'ffwd-round-button',
                cn.roundButton,
                className,
                {
                    [cn.inverse]: inverse,
                    [cn.secondary]: secondary,
                    [cn.flat]: flat,
                    [cn.labelSelected]: labelState === 'selected',
                    [cn.labelDeselected]: labelState === 'deselected',
                    [cn.tiny]: size === 'tiny',
                    [cn.small]: size === 'small',
                    [cn.regular]: size === 'regular',
                    [cn.large]: size === 'large',
                    [cn.huge]: size === 'huge',
                }
            )}
            style={style}
            disabled={disabled}
            type={type}
            onClick={clickHandler}
            onMouseDown={mouseDownHandler}
            onMouseUp={mouseUpHandler}
        >
            {pulse && <div className={cn.pulse} />}
            {icon && <Icon type={icon} className={cn.icon} />}
            {children}
        </button>
    );
});