button.tsx

import * as React from 'react'
import {Link} from 'react-router-dom'
import {default as styled, ThemeInterface} from '../../styled-components'

interface ButtonProps {
    theme?: ThemeInterface
    className?: string
    action?: any
    modalId?: string
    disabled?: boolean
    danger?: boolean
    primary?: boolean
    small?: boolean
    to?: string
}

const Button: React.StatelessComponent<ButtonProps> = props => {
    let classes = 'uk-button ' + props.className

    if (props.danger) {
        classes += ' uk-button-danger'
    }
    if (props.primary) {
        classes += ' uk-button-primary'
    }

    if (!props.danger && !props.primary) {
        classes += ' uk-button-default'
    }

    if (props.small) {
        classes += ' uk-button-small'
    }

    if (props.to) {
        const linkClickHandler: React.MouseEventHandler<HTMLAnchorElement> = props.action
        return <Link
            data-uk-toggle={props.modalId ? 'target: #' + props.modalId : null}
            to={props.to}
            className={classes}
            onClick={linkClickHandler}
        >
            {props.children}
        </Link>
    } else {
        const buttonClickHandler: React.MouseEventHandler<HTMLButtonElement> = props.action
        return <button
            data-uk-toggle={props.modalId ? 'target: #' + props.modalId : null}
            className={classes}
            onClick={buttonClickHandler}
            disabled={props.disabled}
        >
            {props.children}
        </button>
    }
}

const StyledButton = styled(Button)``

export default StyledButton