import React from 'react'
import PropTypes from 'prop-types'
import Button from 'react-uikit/button'
import Icon from 'react-uikit/icon'
import Layout from 'react-uikit/layout'
import BEMModule from 'utils/bem'
import styles from './styles.scss'

const bem = new BEMModule(styles)

class ExportIntervalSelection extends React.PureComponent {
    static intervals = [
        // {label: 'Day', value: 'day'},
        {label: 'Week', value: 'week', iconName: 'calendar-week'},
        {label: 'Month', value: 'month', iconName: 'calendar-month'},
    ]

    state = {activeIndex: -1}

    exportData = () => {
        const organizeBy =
            ExportIntervalSelection.intervals[this.state.activeIndex].value

        this.props.exportData?.({organizeBy})
    }

    renderIntervalOption = ({label, iconName}, i) => {
        const click = () => this.setState({activeIndex: i})
        const classes = bem.classNames(
            'c-course-data-exportation__export-intervals__list-item',
            {active: this.state.activeIndex === i}
        )
        const iconClasses = bem.classNames(
            'c-course-data-exportation__export-intervals__icon'
        )
        const labelClasses = bem.classNames(
            'c-course-data-exportation__export-intervals__label'
        )
        return (
            <li
                className={classes}
                key={`interval-option-${i}`}
                onClick={click}
            >
                <Icon className={iconClasses} name={iconName} />
                <span className={labelClasses}>{label}</span>
            </li>
        )
    }

    render() {
        const classes = bem.classNames(
            'c-course-data-exportation__export-intervals'
        )
        const legendClasses = bem.classNames(
            'c-course-data-exportation__export-intervals__legend'
        )
        const listClasses = bem.classNames(
            'c-course-data-exportation__export-intervals__list'
        )
        const buttonClasses = bem.classNames(
            'c-course-data-exportation__export-intervals__button'
        )

        return (
            <React.Fragment>
                <Layout.Flex
                    align="center"
                    className={classes}
                    direction="column"
                    justify="center"
                >
                    <span className={legendClasses}>{'Organize data by:'}</span>

                    <Layout.Grid
                        className={listClasses}
                        templateColumns="repeat(2, 1fr)"
                        gap={16}
                        tag="ul"
                    >
                        {ExportIntervalSelection.intervals.map(
                            this.renderIntervalOption
                        )}
                    </Layout.Grid>
                </Layout.Flex>

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

ExportIntervalSelection.propTypes = {
    exportData: PropTypes.func,
}

export default ExportIntervalSelection