import * as React from 'react';
import { StyledHTMLElement } from 'styletron-react';
import { styled } from 'styletron-react';

export interface IButtonProps {
    primary?: boolean;
    secondary?: boolean;
}

export const ButtonStyle = ({ primary, secondary }: IButtonProps): React.CSSProperties =>
    primary
        ? ({
            ':hover': {
                background: primary ? 'rgba(100,200,100,0.8)' : secondary ? 'rgba(200,100,100,0.8)' : 'rgba(100,100,200,0.8)',
            },
            // alignItems: 'center',
            // display: 'inline-flex',
            'background': primary ? 'rgba(100,200,100,0.5)' : secondary ? 'rgba(200,100,100,0.5)' : 'rgba(100,100,200,0.5)',
            'border': '0',
            'borderRadius': '3px',
            // 'color': 'rgba(0,0,0,0.6)',
            'color': primary ? 'rgba(0,50,0,0.8)' : secondary ? 'rgba(50,0,0,0.8)' : 'rgba(0,0,50,0.8)',
            'cursor': 'pointer',
            'fontFamily': 'Segoe UI',
            'fontSize': '0.8rem',
            'fontWeight': 500,
            'lineHeight': '1rem',
            'margin': '2px',
            'outline': '0',
            'padding': '0.4em 0.8em',
            // 'textShadow': '0 0 2px rgba(0,0,0,0.1)',
            'verticalAlign': 'middle',
        })
        : ({
            ':hover': {
                background: primary ? 'rgba(50,200,50,0.3)' : secondary ? 'rgba(200,50,50,0.3)' : 'rgba(50,50,200,0.3)',
            },
            // alignItems: 'center',
            // display: 'inline-flex',
            'background': primary ? 'rgba(50,200,50,0.1)' : secondary ? 'rgba(200,50,50,0.1)' : 'rgba(50,50,200,0.1)',
            'border': '0',
            'borderRadius': '3px',
            'color': primary ? 'rgba(50,200,50,0.8)' : secondary ? 'rgba(200,50,50,0.8)' : 'rgba(50,50,200,0.8)',
            'cursor': 'pointer',
            'fontFamily': 'Segoe UI',
            'fontSize': '0.8rem',
            'fontWeight': 500,
            'lineHeight': '1rem',
            'margin': '2px',
            'outline': '0',
            'padding': '0.4em 0.8em',
            'verticalAlign': 'middle',
        });

export const Button = styled<IButtonProps>('button', ButtonStyle);