import * as React from 'react';
import * as DefaultStyles from './style';
import * as _ from 'lodash';

export namespace TextInput {
    export interface Props {
        onChange?: any;
        onBlur?: any;
        onFocus?: any;
        helperText?: string;
        value?: any;
        label?: string;
        placeholder?: string;
        readonly?: boolean;
        styles?: Styles;
        onClickSave?: any;
        id?: string;
        name?: string;
    }

    export interface State {
        isFocused?: boolean;
        isFocusedContainer?: boolean;
    }

    export interface Styles {
        Input?: any;
        Button?: any;
        EnterInfoText?: any;
        ReturnArrow?: any;
    }

}

export default class TextInput extends React.Component<TextInput.Props, TextInput.State> {

    constructor(props: TextInput.Props) {
        super(props);

        this.state = ({
            isFocused: false,
            isFocusedContainer: false,
        });
    }

    onChange = (e) => {
        if (this.props.onChange) {
            this.props.onChange(e.target.value);
        }
    }

    onFocusInputContainer = (e) => {
        this.setState({
            isFocusedContainer: true
        });
    }
    onFocusOutInputContainer = (e) => {
        this.setState({
            isFocusedContainer: false
        });
    }
    onClickSave = (e) => {
        if (this.props.onClickSave) {
            let value = e.target.value.trim();
            if (this.props.value.trim() !== '' || value.length > 0) {
                this.onChange(e);
                this.props.onClickSave(this.props.value.trim(), false);
                this.setState({
                    isFocused: false,
                    isFocusedContainer: false,
                });
            }
        }
    }

    onClickSaveButton = (e) => {
        if (this.props.onClickSave) {
            const value = this.props.value.trim();
            if (value !== '' || value.length > 0) {
                this.onChange(e);
                this.props.onClickSave(value, true);
                this.setState({
                    isFocused: false,
                    isFocusedContainer: false,
                });
            }
        }
    }

    handleKeyPress = (event) => {
        if (event.key === 'Enter' && this.props.onClickSave) {
            this.onClickSave(event);
        }
    }

    render() {
        const isNotEmpty = this.props.value && this.props.value.length > 0;
        const Styles = _.merge(DefaultStyles, this.props.styles);

        return (
            <Styles.InputContainer id={this.props.id && this.props.id + '-input-text-outer-container'}>
                <Styles.LabelText>{this.props.label}</Styles.LabelText>
                <Styles.HelperText>{this.props.helperText}</Styles.HelperText>
                <Styles.TextButtonContainer
                    onFocus={this.onFocusInputContainer}
                    onBlur={this.onFocusOutInputContainer}
                    id={this.props.id && this.props.id + '-input-text-button-container'}
                >
                    <Styles.InputTextContainer id={this.props.id && this.props.id + '-input-text-container'}>
                        <Styles.Input
                            onBlur={this.props.onBlur}
                            onFocus={this.props.onFocus}
                            placeholder={this.props.placeholder}
                            value={this.props.value}
                            onChange={this.onChange}
                            isFocused={isNotEmpty}
                            readOnly={this.props.readonly}
                            onKeyPress={this.handleKeyPress}
                            id={this.props.id && this.props.id + '-input-text-input'}
                            name={this.props.name && this.props.name + '-input-text-input'}
                        />
                    </Styles.InputTextContainer>
                </Styles.TextButtonContainer>
            </Styles.InputContainer>
        );
    }
}