import React from 'react'
import PropTypes from 'prop-types'
import Checkbox from 'react-uikit/checkbox'
import Layout from 'react-uikit/layout'
import BEMModule from 'utils/bem'
import styles from './styles.scss'

const bem = new BEMModule(styles)

const UserSwitch = ({on, toggle, user}) => {
    const classes = bem.classNames('c-user-switch')
    const checkboxClasses = bem.classNames('c-user-switch__checkbox')
    const nameClasses = bem.classNames('c-user-switch__name')

    return (
        <Layout.Flex className={classes} onClick={toggle} align="center">
            <span
                className={nameClasses}
            >{`${user.lastName}, ${user.firstName}`}</span>
            <Checkbox className={checkboxClasses} checked={on} />
        </Layout.Flex>
    )
}

UserSwitch.propTypes = {
    user: PropTypes.shape({
        firstName: PropTypes.string,
        lastName: PropTypes.string,
    }).isRequired,
    on: PropTypes.bool,
    toggle: PropTypes.func,
}

export default UserSwitch