import * as React from 'react';
import { connect } from 'react-redux';
import * as shortid from 'shortid';
import { validate } from 'validate.js';

import {IStore} from '../../store/store';
import {isSuccess, isFail, isLoading} from '../../store/common/actions';
const CallbackValidation = require('./CallbackFormValidation');
const CSS = require('./CallbackForm.styl');

interface ICallbackFormBaseProps {
    className?: string;
    showLabel?: boolean;
    isSuccess: boolean;
    isLoading: boolean;
}

interface ICallbackFormState {
    inputId: string;
    value: string;
    isValid: boolean;
}

interface ICallbackFormDispatchProps {
    send: (email: string) => void;
}

interface ICallbackFormProps extends ICallbackFormBaseProps, ICallbackFormDispatchProps {
}

export class CallbackForm extends React.PureComponent<ICallbackFormProps, ICallbackFormState> {
    public static defaultProps: Partial<ICallbackFormProps> = {
        className: '',
        showLabel: true,
    };

    constructor(props) {
        super(props);
        this.state = {
            inputId: shortid.generate(),
            value: '',
            isValid: false,
        };
    }

    keyUpHandler = () => {
        const { value } = this.state;
        this.setState({
            isValid: !validate({email: value}, CallbackValidation),
        });
    }
    changeHandler = (event: React.ChangeEvent<HTMLInputElement>) => {
        const input: HTMLInputElement = (event.target as HTMLInputElement);
        this.setState({
            value: input.value,
        });
    }
    submitHandler = () => {
        const { value } = this.state;
        this.props.send(value);
    }

    render() {
        const {className, showLabel} = this.props;
        const {inputId, value, isValid} = this.state;
        const classNames = [CSS.form, className].join(' ');
        return (
            <div className={classNames}>
                {showLabel && <label htmlFor={inputId} className={CSS.label}>Присоединяйтесь:</label>}
                <input
                    className={CSS.email}
                    type='email'
                    id={inputId}
                    placeholder='Email'
                    value={value}
                    onKeyUp={this.keyUpHandler}
                    onChange={this.changeHandler}
                />
                <button
                    type='submit'
                    className={CSS.button}
                    disabled={!isValid}
                    onClick={this.submitHandler}
                >
                    Отправить
                </button>
            </div>
        );
    }
}

const mapStateToProps = (state: IStore) => ({
    isSuccess: state.common.isSuccess,
    isLoading: state.common.isLoading,
});

const mapDispatchToProps = (dispatch): ICallbackFormDispatchProps => ({
    send: (email: string) => {
        console.log(email);
    },
});

export default connect(mapStateToProps, mapDispatchToProps)(CallbackForm);