// @flow

import { makeStyles } from '@material-ui/styles';
import React from 'react';

import participantsPaneTheme from '../../../base/components/themes/participantsPaneTheme.json';

type Props = {

    /**
     * Label used for accessibility.
     */
    accessibilityLabel: String,

    /**
     * Additional class name for custom styles.
     */
    className?: string,

    /**
     * Children of the component.
     */
    children: string | React$Node,

    /**
     * Button id.
     */
    id?: string,

    /**
     * Click handler.
     */
    onClick: Function,

    /**
     * Whether or not the button should have primary button style.
     */
    primary?: boolean
}

const useStyles = makeStyles(theme => {
    return {
        button: {
            alignItems: 'center',
            backgroundColor: theme.palette.action02,
            border: 0,
            borderRadius: `${theme.shape.borderRadius}px`,
            display: 'flex',
            justifyContent: 'center',
            minHeight: '40px',
            padding: `${theme.spacing(2)}px ${theme.spacing(3)}px`,
            ...theme.typography.labelButton,
            lineHeight: `${theme.typography.labelButton.lineHeight}px`,

            '&:hover': {
                backgroundColor: theme.palette.action02Hover
            },

            [`@media (max-width: ${participantsPaneTheme.MD_BREAKPOINT})`]: {
                ...theme.typography.labelButtonLarge,
                lineHeight: `${theme.typography.labelButtonLarge.lineHeight}px`,
                minWidth: '48px',
                minHeight: '48px'
            }
        },

        buttonPrimary: {
            backgroundColor: theme.palette.action01,

            '&:hover': {
                backgroundColor: theme.palette.action01Hover
            }
        }
    };
});

const ParticipantPaneBaseButton = ({
    accessibilityLabel,
    className,
    children,
    id,
    onClick,
    primary = false
}: Props) => {
    const styles = useStyles();

    return (
        <button
            aria-label = { accessibilityLabel }
            className = { `${styles.button} ${primary ? styles.buttonPrimary : ''} ${className ?? ''}` }
            id = { id }
            onClick = { onClick }>
            {children}
        </button>
    );
};

export default ParticipantPaneBaseButton;