import * as React from 'react'
import { connect } from 'react-redux'
import * as cx from 'classnames'
import { StylableComponent } from '../theme'
import { FormFieldWrapper, WebFormField } from '../form-field'
import { CheckboxProps, CheckboxComponentProps } from './interfaces'
import { setFormField, FORM_REDUCER_KEY, mapStateToField } from '../form'
import { Icon } from '../icon'

const styles = require('../../../src/components/form-field/styles.scss')

class Component extends WebFormField<string> {

    public renderField() {
        const { name, label, disabled, placeholder } = this.props
        const { onClassName, offClassName, disabledClassName } = this.props as CheckboxProps
        let { iconOn, iconOff } = this.props as CheckboxProps

        let className = this.checked()? onClassName : offClassName
        className = disabled ? disabledClassName : className
        className = className ? className : styles.fieldLabel

        const iconTag = (iconOn || iconOff) ?
            <Icon
                className="checkboxIcon"
                icon={this.checked()? iconOn : iconOff}
                size={40} />
            : null

        className = (iconTag)? cx(className, styles.hideCheckbox) : className

        return (
            <label className={className} htmlFor={name}>
                <input
                    ref={this.setFieldRef}
                    className={this.classNames()}
                    name={name}
                    id={name}
                    placeholder={placeholder}
                    type="checkbox"
                    defaultChecked={this.checked()}
                    value={this.getValueFromState()}
                    disabled={disabled}
                    onChange={this.onChange}
                    onClick={this.onClick.bind(this)}
                    onFocus={this.onFocus}
                    onBlur={this.onBlur} />
                { iconTag }
                {label}
            </label>
        )
    }

    private checked(): boolean {
        return this.props.field.value.toString() === 'true'
    }

    public onClick(e: any) {
        //e.preventDefault() //took this out to make the checkbox work, needs testing.
        const { name, formName } = this.props

        const value = (this.props.value === this.props.field.value)? this.checked()? 'false' : 'true' : this.props.value

        console.log("onClick: changing from " +this.props.field.value + " to " + value)

        const field = {
            ...this.getNextFieldState(this.props.field.value),
            value,
            dirty: true,
        }

        if (this.props.onClick) {
            this.props.onClick(name, formName, field)
        }

        return this.dispatchUpdate(field)
    }
}

const mapStateToProps = (state: any, ownProps: CheckboxProps) => ({
    ...ownProps,
    field: mapStateToField(state[FORM_REDUCER_KEY], ownProps),
})

const mapDispatchToProps = {
    setFormField,
}

const ConnectedCheckbox = connect(mapStateToProps, mapDispatchToProps)(Component)

export class Checkbox extends FormFieldWrapper<CheckboxProps> {
    public render() {
        return (
            <ConnectedCheckbox {...this.props} formName={this.formName} />
        )
    }
}