import React from 'react'
import PropTypes from 'prop-types'

import Button from 'react-uikit/button'
import {Grid} from 'react-uikit/layout'
import Layout from 'components/layout'
import PageHeader from 'components/page-header'
import EmailSettings from './partials/email-settings'
import NotificationSettings from './partials/notification-settings'
import PasswordSettings from './partials/password-settings'
import SchoolSettings from './partials/school-settings'
import StudentNumberSettings from './partials/student-number-settings'
import UsernameSettings from './partials/username-settings'
import BEMModule from 'utils/bem'
import {isProfessorUser} from 'utils/user'
import styles from './styles.scss'

const bem = new BEMModule(styles)

const AccountSettings = ({
    user,
    onDeactivateAccount,
    onShowAvatarUpdate,
    onUpdateNotificationSettings,
    onUpdateSchoolSearch,
}) => {
    const classes = bem.classNames('c-account-settings')
    const hrClassNames = bem.classNames('c-account-settings__hr')
    const buttonClassNames = bem.classNames('c-account-settings__button')
    const containerClassNames = bem.classNames('c-account-settings__container')

    return (
        <Layout.Section className={classes} hasBackground>
            <PageHeader>
                <h1>Account Settings</h1>
            </PageHeader>

            <Grid
                className={containerClassNames}
                templateColumns="1fr"
                autoRows="minmax(6.6rem, auto)"
            >
                <UsernameSettings
                    firstName={user.firstName}
                    lastName={user.lastName}
                    unregisterOnExit
                />

                <EmailSettings email={user.email} unregisterOnExit />

                {isProfessorUser(user) ? (
                    <SchoolSettings
                        schoolId={user.schoolId}
                        unregisterOnExit
                        updateSchoolSearch={onUpdateSchoolSearch}
                    />
                ) : (
                    <StudentNumberSettings
                        studentNumber={user.studentNumber}
                        unregisterOnExit
                    />
                )}
            </Grid>

            <hr className={hrClassNames} />

            <Grid
                className={containerClassNames}
                templateColumns="1fr"
                autoRows="minmax(6.6rem, auto)"
            >
                <PasswordSettings unregisterOnExit />

                <Button
                    className={buttonClassNames}
                    constrained
                    onClick={onShowAvatarUpdate}
                >
                    Change profile photo
                </Button>

                <Button
                    className={buttonClassNames}
                    constrained
                    onClick={onDeactivateAccount}
                >
                    Deactivate account
                </Button>
            </Grid>

            <hr className={hrClassNames} />

            <NotificationSettings
                onUpdateNotificationSettings={onUpdateNotificationSettings}
                settings={user.notificationSettings}
                user={user}
            />
        </Layout.Section>
    )
}

AccountSettings.propTypes = {
    user: PropTypes.shape({
        email: PropTypes.string,
        firstName: PropTypes.string,
        lastName: PropTypes.string,
        notificationSettings: PropTypes.object,
        schoolId: PropTypes.string,
        studentNumber: PropTypes.string,
    }),
    onDeactivateAccount: PropTypes.func,
    onShowAvatarUpdate: PropTypes.func,
    onUpdateNotificationSettings: PropTypes.func,
    onUpdateSchoolSearch: PropTypes.func,
}

export default AccountSettings