import React from 'react';
import PropTypes from 'prop-types';
import { t } from 'Framework/i18n';
import { withStyles } from '@material-ui/core/styles';
import Button from '@material-ui/core/Button';
import AnalyticsWrapper from '../../../../Shared/Components/Analytics/AnalyticsWrapper';

const styles = theme => ({
    root: {
        textTransform: 'none',
        fontSize: 15,
    },
    outlined: {
        boxShadow: theme.shadows[2],
        '&:hover': {
            boxShadow: theme.shadows[4],
            // Reset on touch devices, it doesn't add specificity
            '@media (hover: none)': {
                boxShadow: theme.shadows[2],
            },
        },
    },
    label: {},
});

export const ConfigurationModeSwitch = ({ configurationModeOptions, onChange, ...props }) => {
    const modeOption = configurationModeOptions[0];
    return (
        configurationModeOptions.length && (
            <AnalyticsWrapper targetId="configuration_mode_switch" data={modeOption}>
                <Button
                    variant="outlined"
                    fullWidth
                    size="medium"
                    onClick={() => onChange(modeOption)}
                    {...props}
                >
                    {t(`configurationModeSwitch.options.${modeOption}`)}
                </Button>
            </AnalyticsWrapper>
        )
    );
};

ConfigurationModeSwitch.propTypes = {
    configurationModeOptions: PropTypes.array,
    onChange: PropTypes.func.isRequired,
};

ConfigurationModeSwitch.defaultProps = {
    configurationModeOptions: [],
};

export default withStyles(styles, { name: 'ConfigurationModeSwitch' })(ConfigurationModeSwitch);
