// node modules
import React, {FC} from 'react';

// local components
import { SimpleButton } from '../simple_button';

// local files
import { DEFAULT_MULTI_CLICK_PROTECTOR_DELAY } from "../../../utils/constants";
import { useMultiClickProtector } from "../../../helpers/hooks/useMultiClickProtector";
import { useStyles } from './styles';
import { theming } from "../../../theme";

export interface ColoredButtonProps {
    label: string;
    multiClickProtector?: boolean
    className?: string;
    disabled?: boolean;
    loading?: boolean;
    children?: any;
    delayNextClick?: number;
    onClick?: (props?: any) => any;
    multiClickProtectorDelay?: number;
    type?: string;
}


export const ColoredButton: FC<ColoredButtonProps> = ({
    className = '',
    label = '',
    children,
    multiClickProtector = true,
    multiClickProtectorDelay = DEFAULT_MULTI_CLICK_PROTECTOR_DELAY,
    onClick = () => {},
    type = 'purple',
    ...otherProps
}) => {
    const { handleMultiClickProtector } = useMultiClickProtector(multiClickProtectorDelay);
    const theme = theming.useTheme();
    const { root } = useStyles({ theme, type });
    const coloredBtnClassName = `${root} ${className}`;

    const handleClick = multiClickProtector ? handleMultiClickProtector(onClick) : onClick;

    return (
        <SimpleButton
            onClick={handleClick}
            className={coloredBtnClassName}
            label={label} {...otherProps}
        >
            {children}
        </SimpleButton>
    )
}
