/** @jsx jsx */
import * as React from "react";
import css from "@styled-system/css";
import { jsx } from "@emotion/core";
import styled from "@emotion/styled";
import { variant } from "styled-system";
import { notEqual } from "assert";


type ButtonTypes = "primary" | "secondary" | "outlined";

// Button
export interface ButtonProps {
    children: React.ReactNode;
    variant: ButtonTypes;
    onClick?: () => void;
    theme?: any;
    disabled?: boolean;
}
type StyledProps = {
    variant: ButtonTypes;
};

const variants = {
    primary: {
        border: "1px solid",
        borderColor: "highlight",
        color: "soft",
        bg: "highlight",
        // ":hover": {
        //     bg: "hard",
        // },
         ":disabled": {
            opacity: .5
        },        
    },
    secondary: {
        border: "1px solid",
        borderColor: "neutral",
        color: "soft",
        bg: "neutral",
        ":disabled": {
            opacity: .5
        },        
        // ":hover": {
        //     bg: "hard",
        // },  
    },
    outlined: {
        border: "1px solid",
        borderColor: "hard",
        color: "hard",
        bg: "transparent",
        ":disabled": {
            opacity: .5
        },        
    }
}





const StyledButton = styled("button")<StyledProps>`
    ${variant({variants})};
`
const Button: React.FC<ButtonProps> = ({
    children,
    onClick,
    variant,
    theme,
    disabled
}): React.ReactElement => {
    return (
        <StyledButton
            theme={theme}
            css={
                css({
                    outline: 'none',
                    px: 3,
                    fontSize: 1,
                    height: 1, 
                    display: 'inline-block',
                    textAlign: 'center',
                    textTransform: 'uppercase'
                })
            }
            variant={variant}
            disabled={disabled}
            onClick={!!onClick ? onClick : undefined}>
            {children}
        </StyledButton>
    );
};

export default Button;