/* -------------------------------------------------------------------------- */
/*                                   Imports                                  */
/* -------------------------------------------------------------------------- */
import React from "react";
import classNames from "classnames";
import '../index.css'
import { StyleType } from "core/_variants";
/* -------------------------------------------------------------------------- */
/*                               Component props                              */
/* -------------------------------------------------------------------------- */
type Props = {
    emphasis?: StyleType | undefined,
    disabled?:boolean,
    iconed?: boolean,
} & Omit<React.ComponentPropsWithoutRef<"button">, "">

/* -------------------------------------------------------------------------- */
/*                                Emphasis styles                           */
/* -------------------------------------------------------------------------- */

const buttonEnableHighEmphasis = `
    bg-blue-500
    hover:bg-blue-400
    active:bg-blue-700    
    focus:shadow-lg shadow-blue-500
    focus:outline outline-blue-400/10 outline-8`;

const buttonDisabledHighEmphasis = 
    `bg-gray-200
    focus:outline-none`;

const buttonGeneralHighEmphasis = `
    text-white 
`

const buttonEnabledMediumEmphasis = 
    `text-blue-500
    border-gray-500
    active:border-blue-600
    active:text-blue-600
    hover:border-blue-400
    hover:text-blue-400
    focus:outline outline-blue-400/10 outline-8
    focus:border-blue-600/70`;


const buttonDisabledMediumEmphasis = 
    `text-gray-200
    border-gray-200
    focus:outline-none`;

const buttonGeneralMediumEmphasis = 
    `bg-white
    border`;


const buttonEnabledLowEmphasis = 
    `text-gray-900
    hover:text-blue-400
    active:text-blue-600
    focus:bg-gray-50`;

const buttonDisabledLowEmphasis = 
    `text-gray-200`;

const buttonGenerealLowEmphasis = 
    `focus:outline-none
    bg-transparent`;

/* -------------------------------------------------------------------------- */
/*                          Component implementation                          */
/* -------------------------------------------------------------------------- */
export const Button = ({
    emphasis ='high',
    disabled = false,
    iconed = false,
    className,
    children, ...props} : Props) => {

    return(
        <button
        //TODO change on click event
        onClick={!disabled ? () => alert('Click') : undefined}
        
        className={classNames([
            'text-center',
            'px-4 py-2 text-[15px]',
            'rounded',
            {
                '!cursor-default': disabled, 
                'transition-all': !disabled,
                'transition duration-200':!disabled,
                
            },            
            {   // Define high emphasis
                [`${buttonEnableHighEmphasis}`]: !disabled && emphasis === 'high',
                [`${buttonDisabledHighEmphasis}`]: disabled && emphasis === 'high',
                [`${buttonGeneralHighEmphasis}`] : emphasis === 'high',    
                // Define medium emphasis
                [`${buttonEnabledMediumEmphasis}`]: !disabled && emphasis === 'medium',
                [`${buttonDisabledMediumEmphasis}`]: disabled && emphasis === 'medium',
                [`${buttonGeneralMediumEmphasis}`]: emphasis === 'medium',
                // Define low emphasis
                [`${buttonEnabledLowEmphasis}`]: !disabled && emphasis === 'low',
                [`${buttonDisabledLowEmphasis}`]: disabled && emphasis ==='low',
                [`${buttonGenerealLowEmphasis}`]: emphasis === 'low',

            },
            className,
        ])} 
        {...props}>
            {children}
        </button>
    );
}