class SingleLineText extends React.Component {

    
    constructor(props) {
        super(props);
        this.state = { 
            value: props.value,
            field: props.field
        };
        
        this.value = '';
    }
    
    
    onChange = (value) => {
        this.setState({value: value});        
    }

    componentDidUpdate(prevProps) {
        if (prevProps.value !== this.props.value) {
            this.setState({value: this.props.value})            
        }
    }
    
    render() {
        let value = this.state.field.value;     
        
        if(this.state.value !== null) {
            value = this.state.value;
        }

        if(value === null || typeof value === 'undefined') {
            value = '';
        }
        
        return (
            <input type="text" disabled={this.props.isDisabled} value={value} onChange={e => this.onChange(e.target.value)} onBlur={e => this.props.onChange(e.target.value)} className="block w-full px-3 py-2 bg-tealGreen-800 bg-opacity-35 border border-transparent rounded-md text-sm placeholder-slate-400
      focus:outline-none focus:border-tealGreen-500 focus:ring-1 focus:border-tealGreen-500
      disabled:opacity-50
      invalid:border-pink-500 invalid:text-pink-600
      focus:invalid:border-pink-500 focus:invalid:ring-pink-500"/>
        )
    }

    static renderTeaser() {
        let arrowIcon = (<svg viewBox="0 0 12 24" className={"w-4 h-4 mr-2 text-slate-400 overflow-visible group-hover:text-slate-600 dark:text-slate-600 dark:group-hover:text-slate-500"}>
            <path d="M0 0L12 12L0 24" fill="none" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round"></path>
        </svg>);

        return(
            <div>
                <div className={"flex"}>
                    {arrowIcon}
                    <span className={"font-medium dark:text-slate-400 text-sm block mb-1"}>Single Line Text</span>
                </div>
            </div>
        );
    }
}


window.fieldTypes['SingleLineText'] = {
    field: SingleLineText,
    title: 'Single Line Text',
    settings: [
        'Required',
        'DefaultValue',
        'LanguageFallback'
    ]
}