import React from 'react';
import {ThemeProvider, TextField } from 'styled-material-components';
import PropTypes from 'prop-types';
import InputMask from 'inputmask';
import styled from 'styled-components';
import Error from '@material-ui/icons/Error';

const Dom = styled.div`
    ${props => props.w ? 'width: ' + props.w : ''}
`;

const Text  = TextField.extend`
    border: ${props => props.error ? props.theme.textInput.border.size.wrong : props.theme.textInput.border.size.default} solid ${props => props.error ? props.theme.textInput.border.color.wrong : props.theme.textInput.border.color.default};
    margin-top: ${props => props.theme.textInput.marginTop};
    margin-bottom: ${props => props.theme.textInput.marginTop};
    padding: ${props => props.theme.textInput.padding};
    border-radius: ${props => props.theme.textInput.borderRadius};
    .smc-text-field-floating-label{
        padding: ${props => props.theme.textInput.placeholder.padding};
        color: ${props => props.error ? props.theme.textInput.placeholder.color.wrong  : props.theme.textInput.placeholder.color.default};
        top: ${props => (props.floating ? '-1em' : '0.5em')};
        ${props => props.floating ? 'left: ' + (props.hasPrefix ? '1.5em;' : `calc(0.5em + ${props.theme.defaultPadding});`) : 'left: ' + (props.hasPrefix ? '1em;' : `calc(0em + ${props.theme.defaultPadding});`)}
        background: ${props => props.theme.textInput.placeholder.background};;
        width: auto;
    }

    .smc-text-field-container{
        display: flex;
        align-items: center;
        background: red;
    }

    .smc-textfield-suffix{
        bottom: auto;
    }

    .smc-textfield-prefix{
        bottom: auto;
    }

    .smc-text-field-input{
        color: ${props => props.error ? props.theme.textInput.color.wrong : props.theme.textInput.color.default};
    }

    .smc-text-field-error-text{
        color: ${props => props.error ? props.theme.textInput.errorField.color.wrong : props.theme.textInput.errorField.color.wrong};
    }

    .smc-text-field-error-text{
        transition: opacity 200ms;
        opacity: ${props => + props.error ? 1 : 0};
        cursor: none;
        user-select: none;
    }
`;

class Input extends React.Component{
    state = {
        focus: false,
        text: ''
    };

    _dom = null;
    _input = null;

    constructor(props){
        super(props);

        this._onFocus = this._onFocus.bind(this);
        this._onBlur = this._onBlur.bind(this);
        this._onChange = this._onChange.bind(this);
    }

    componentDidMount(){
        this._input = this._dom.getElementsByTagName('input')[0];
        var im;
        var opt = {
            placeholder: " ",
            clearMaskOnLostFocus: true,
            showMaskOnHover: false
        }

        if(this.props.mask){
            switch(this.props.mask){
                case 'CEP':
                    im = new InputMask({
                        mask: '99999-999',
                        ...opt
                    });
                    break;
                case 'DATE':
                    im = new InputMask({
                        mask: '99/99/9999',
                        ...opt
                    });
                    break;
                case 'CPF':
                    im = new InputMask({
                        mask: '999.999.999-99',
                        ...opt
                    });
                    break;
                case 'CNPJ':
                    im = new InputMask({
                        mask: '99.999.999/9999-99',
                        ...opt
                    });
                    break;
                case 'FONE':
                    im = new InputMask({
                        mask: ['(99)9999-9999', '(99)9 9999-9999'],
                        keepStatic: true,
                        ...opt
                    });
                    break;
            }

            im.mask(this._input);
        }
    }

    _onFocus(e){
        this.setState({focus: true});
        if(this.props.onFocus) this.props.onFocus(e);
    }

    _onBlur(e){
        this.setState({focus: false});
        if(this.props.onBlur) this.props.onBlur(e);
    }

    _onChange(e){
        this.setState({text: e.target.value});
        if(this.props.onChange) this.props.onChange(e);
    }

    render(){
        return(
            <ThemeProvider theme={this.props.theme}>
                <Dom innerRef={el => this._dom = el}>
                    <Text
                        hasBorder
                        floatingLabelText={this.props.placeholder}
                        errorText={this.props.errorText}
                        onFocus={this._onFocus}
                        onBlur={this._onBlur}
                        onChange={this._onChange}
                        floating={this.state.focus || this.state.text.length}
                        type={this.props.password ? 'password' : 'text'}
                        error={this.props.error}
                        disabled={this.props.disabled}
                        prefix={this.props.prefix}
                        suffix={this.props.error ? <Error style={{fill: this.props.theme.textInput.color.wrong}} /> : this.props.suffix}
                        w={this.props.width}
                        required={this.props.required ? true : false}
                    />
                </Dom>
            </ThemeProvider>

        );
    }
}

Input.propTypes = {
    placeholder: PropTypes.string,
    errorText: PropTypes.string,
    onFocus: PropTypes.func,
    onBlur: PropTypes.func,
    onChange: PropTypes.func,
    password: PropTypes.bool,
    error: PropTypes.bool,
    disabled: PropTypes.bool,
    prefix: PropTypes.oneOfType([PropTypes.string, PropTypes.element]),
    suffix: PropTypes.oneOfType([PropTypes.string, PropTypes.element]),
    width: PropTypes.string
}

export default Input;
export {Text}
