'use strict';

import React from 'react';
import PropTypes from 'prop-types';
import classnames from 'classnames';
import {FormControl, isIndeterminate} from './FormControl';
import Checkbox from 'react-bootstrap/lib/Checkbox';

export class ToggleControl extends FormControl<any> {
    static propTypes: any = {
        ...FormControl.propTypes,
        hideLabel: PropTypes.bool,
        removeName: PropTypes.bool
    };

    static defaultProps = {
        ...FormControl.defaultProps,
        testAutomationId: 'toggle',
        hideLabel: false,
        removeName: false
    };

    constructor(props) {
        super(props);

        this.state = {
            hasFocus: false
        };
    }

    input: any;

    getValue() {
        return this.getInputDOMNode().checked;
    }

    inputConverter(value): any {
        return {checked: value};
    }

    outputConverter(e) {
        return e.target.checked;
    }

    getInputDOMNode() {
        return this.input;
    }

    componentWillReceiveProps(newProps) {
        this.getInputDOMNode().indeterminate = isIndeterminate(newProps.checked);
    }

    componentDidMount() {
        this.componentWillReceiveProps(this.props);
        this.testAutomationIdHandler();
    }

    componentDidUpdate() {
        this.testAutomationIdHandler();
    }

    testAutomationIdHandler() {
        if (this.input && !this.props.hasFormGroupContainer) {
            this.input.parentNode.setAttribute(
                'data-test-automation-id',
                this.props.testAutomationId
            );
        }
    }

    render() {
        let {
            readOnly,
            disabled,
            checked,
            children,
            hideLabel,
            removeName,
            ...props
        } = this.getPropsFromContext();
        let {hasFocus} = this.state;
        let onClassName = checked ? 'rc-toggle-on' : 'rc-toggle-off';

        return (
            <Checkbox
                role="switch"
                disabled={readOnly || disabled}
                checked={checked}
                aria-checked={checked}
                inputRef={ref => (this.input = ref)}
                data-test-automation-id="input"
                {...this.getSafeProps(props)}
                onFocus={this.onFocus}
                onBlur={this.onBlur}
                className="rc-toggle"
                name={removeName ? null : props.name}>
                <div
                    aria-hidden="true"
                    className={classnames('rc-toggle-input', onClassName, {
                        'rc-toggle-disabled': disabled,
                        'rc-toggle-focus': hasFocus
                    })}>
                    <div className="rc-toggle-circle" />
                </div>
                <span
                    data-test-automation-id="label"
                    className={classnames({'sr-only': hideLabel})}>
                    {children}
                </span>
            </Checkbox>
        );
    }

    onFocus = () => {
        this.handleFocus(true);
    };

    onBlur = () => {
        this.handleFocus(false);
    };

    handleFocus(hasFocus) {
        this.setState({
            hasFocus
        });
    }
}
