import React from 'react'
import PropTypes from 'prop-types'
import Button from 'react-uikit/button'
import Checkbox from 'react-uikit/checkbox'
import Layout from 'react-uikit/layout'
import SwitchList from 'react-uikit/switch-list'
import EmptyList from 'components/list-items/empty-user-list-item'
import UserSwitch from 'components/list-items/user-switch'
import BEMModule from 'utils/bem'
import styles from './styles.scss'

const bem = new BEMModule(styles)

class ExportUserSelection extends React.PureComponent {
    state = {value: []}
    switchList = React.createRef()

    change = (value) => {
        this.setState({value})
    }

    componentDidMount() {
        const {courseId, getUsersFromCourse} = this.props
        getUsersFromCourse && getUsersFromCourse({courseId})
    }

    exportData = () => {
        const {users} = this.props
        const userIds =
            users.length === this.state.value.length
                ? []
                : this.state.value.sort().reduce((result, index) => {
                      result.push(users[index].id)
                      return result
                  }, [])

        this.props.exportData && this.props.exportData({userIds})
    }

    toggleAll = () => {
        if (!this.switchList || !this.switchList.current) {
            return
        }

        this.switchList.current.toggleAll()
    }

    render() {
        const {users} = this.props
        const contentClasses = bem.classNames(
            'c-course-data-exportation__export-users__content'
        )
        const legendClasses = bem.classNames(
            'c-course-data-exportation__export-users__legend'
        )
        const listClasses = bem.classNames(
            'c-course-data-exportation__export-users__list'
        )
        const toggleClasses = bem.classNames(
            'c-course-data-exportation__export-users__list-toggle',
            {
                disabled: users.length === 0,
            }
        )
        const buttonClasses = bem.classNames(
            'c-course-data-exportation__export-users__button'
        )

        return (
            <React.Fragment>
                <Layout.Flex
                    className={contentClasses}
                    direction="column"
                    align="end"
                    justify="center"
                >
                    <span className={legendClasses}>
                        {'Export data for the following students:'}
                    </span>

                    <span className={toggleClasses} onClick={this.toggleAll}>
                        Select all
                        <Checkbox
                            className="u-margin-left-small"
                            checked={Boolean(
                                this.state.value.length &&
                                    this.state.value.length === users.length
                            )}
                        />
                    </span>

                    {users.length > 0 ? (
                        <SwitchList
                            className={listClasses}
                            multiSelect
                            ref={this.switchList}
                            value={this.state.value}
                            onChange={this.change}
                        >
                            {users.map((user, index) => {
                                const listItemClasses = bem.classNames(
                                    'c-course-data-exportation__export-users__list-item',
                                    {selected: this.state.value.includes(index)}
                                )

                                return (
                                    <SwitchList.Item
                                        className={listItemClasses}
                                        key={`export-user-${index}`}
                                        render={UserSwitch}
                                        user={user}
                                    />
                                )
                            })}
                        </SwitchList>
                    ) : (
                        <EmptyList />
                    )}
                </Layout.Flex>

                <Button
                    className={buttonClasses}
                    disabled={!this.state.value.length}
                    variant="primary"
                    size="large"
                    text="Export"
                    onClick={this.exportData}
                />
            </React.Fragment>
        )
    }
}

ExportUserSelection.propTypes = {
    courseId: PropTypes.string,
    exportData: PropTypes.func,
    getUsersFromCourse: PropTypes.func,
    users: PropTypes.array,
}

export default ExportUserSelection