import React from 'react'
import PropTypes from 'prop-types'
import ModalForm from 'react-uikit/modal/form'
import Button from 'react-uikit/button'
import Layout from 'react-uikit/layout'
import List from 'react-uikit/list'
import EmptyList from 'components/list-items/empty-user-list-item'
import UserListItem from './partials/user-list-item'
import styles from './styles.scss'
import BEMModule from 'utils/bem'

const bem = new BEMModule(styles)

class CourseListEditModal extends React.PureComponent {
    componentDidMount() {
        const {courseId, getUsersFromCourse} = this.props

        getUsersFromCourse && getUsersFromCourse({courseId})
    }

    confirmRemoveUser = (user) => {
        const {courseId, showConfirmation} = this.props

        showConfirmation && showConfirmation({courseId, user})
    }

    render() {
        const {isShowing, users, onDismiss} = this.props
        const isEmpty = !users || users.length === 0
        const listClasses = bem.classNames('c-course-list-edit__list', {
            empty: isEmpty,
        })
        const layoutClasses = bem.classNames('c-course-list-edit__content')
        const legendClasses = bem.classNames('c-course-list-edit__legend')
        const buttonClasses = bem.classNames('c-course-list-edit__button')

        return (
            <ModalForm
                isShowing={isShowing}
                title="Edit Challenge List"
                onDismiss={onDismiss}
            >
                <Layout.Grid
                    className={layoutClasses}
                    gap={16}
                    templateColumns="1fr"
                >
                    <span className={legendClasses}>
                        {'Edit the members of your challenge:'}
                    </span>

                    {!isEmpty ? (
                        <List
                            className={listClasses}
                            component={UserListItem}
                            items={users}
                            onItemClick={this.confirmRemoveUser}
                        />
                    ) : (
                        <EmptyList className={listClasses} />
                    )}
                </Layout.Grid>

                <Button
                    className={buttonClasses}
                    variant="primary"
                    size="large"
                    text="Finish"
                    onClick={onDismiss}
                />
            </ModalForm>
        )
    }
}

CourseListEditModal.propTypes = {
    courseId: PropTypes.string,
    getUsersFromCourse: PropTypes.func,
    isShowing: PropTypes.bool,
    showConfirmation: PropTypes.func,
    users: PropTypes.array,
    onDismiss: PropTypes.func,
}

export default CourseListEditModal