import React from 'react'
import PropTypes from 'prop-types'
import Banner from 'components/banner'
import Checkbox from 'react-uikit/checkbox'
import {Flex, Grid} from 'react-uikit/layout'
import Slider from 'react-uikit/slider'
import investmentApproaches from 'common-fe/constants/investment-approaches'
import BEMModule from 'utils/bem'
import styles from './styles.scss'

const bem = new BEMModule(styles)

class InvestmentApproachInput extends React.PureComponent {
    static approaches = [
        investmentApproaches.DETAIL,
        investmentApproaches['DETAIL-BALANCED'],
        investmentApproaches.BALANCED,
        investmentApproaches['BALANCED-BIG-PICTURE'],
        investmentApproaches['BIG-PICTURE'],
    ]

    state = {value: investmentApproaches.NONE.value}

    get isControlled() {
        return this.props.hasOwnProperty('value')
    }

    get value() {
        return this.isControlled ? this.props.value : this.state.value
    }

    change = (index) => {
        if (!this.isControlled) {
            this.setState({
                value: InvestmentApproachInput.approaches[index].value,
            })
        }
        this.props.onChange &&
            this.props.onChange(InvestmentApproachInput.approaches[index].value)
    }

    toggle = (on) => {
        const value = on
            ? investmentApproaches.NONE.value
            : investmentApproaches.BALANCED.value

        if (!this.isControlled) {
            this.setState({value})
        }

        this.props.onChange && this.props.onChange(value)
    }

    render() {
        const {className, id} = this.props
        const selectedApproach =
            investmentApproaches[this.value] || investmentApproaches.NONE
        const index = InvestmentApproachInput.approaches.findIndex(
            ({value}) => selectedApproach.value === value
        )
        const isDisabled =
            selectedApproach.value === investmentApproaches.NONE.value
        const descriptionClasses = bem.classNames(
            'c-investment-approach__description',
            {
                disabled: isDisabled,
                [`${index}`]: true,
            }
        )

        const valueClasses = bem.classNames('c-investment-approach__value')
        const checkboxLabelClasses = bem.classNames(
            'c-investment-approach__checkbox-label'
        )
        const labelGroupClasses = bem.classNames(
            'c-investment-approach__labels'
        )
        const labelClasses = bem.classNames(
            'c-investment-approach__labels__label'
        )
        const sliderClasses = bem.classNames('c-investment-approach__slider')
        const sliderKnobClasses = bem.classNames(
            'c-investment-approach__slider-knob'
        )
        const checkboxId = 'investment-approach-checkbox'

        return (
            <Flex id={id} className={className} direction="column">
                <Flex align="center">
                    <span className={valueClasses}>
                        {selectedApproach.label}
                    </span>

                    <Checkbox
                        id={checkboxId}
                        checked={isDisabled}
                        onChange={this.toggle}
                    />
                    <label
                        className={checkboxLabelClasses}
                        htmlFor={checkboxId}
                    >{`I'm not sure`}</label>
                </Flex>

                <Banner className={descriptionClasses} info>
                    {selectedApproach.description}
                </Banner>

                <Slider
                    className={sliderClasses}
                    disable={isDisabled}
                    knobClassName={sliderKnobClasses}
                    max={InvestmentApproachInput.approaches.length - 1}
                    min={0}
                    snap
                    step={1}
                    value={isDisabled ? 0 : index}
                    onChange={this.change}
                />

                <Grid
                    className={labelGroupClasses}
                    direction="column"
                    templateColumns={`repeat(${InvestmentApproachInput.approaches.length}, 1fr)`}
                >
                    {InvestmentApproachInput.approaches.map(
                        ({label}, index) => (
                            <span
                                className={labelClasses}
                                key={`invest-approach-${index}`}
                            >
                                {index % 2 === 0
                                    ? label.replace(' Approach', '')
                                    : ''}
                            </span>
                        )
                    )}
                </Grid>
            </Flex>
        )
    }
}

InvestmentApproachInput.propTypes = {
    className: PropTypes.string,
    id: PropTypes.string,
    value: PropTypes.oneOf(Object.keys(investmentApproaches)),
    onChange: PropTypes.func,
}

export default InvestmentApproachInput