import React, { Component } from 'react'
import styled from 'styled-components'
import { withTheme } from 'styled-components';
export class TextInput extends Component {

    
    constructor(props){
        super(props);
        this.state = {value: "value" in props?props.value:""}
        //this.handleChange = this.handleChange.bind(this);
    }

    handleChange(event){
        this.setState({value: event.target.value});
    }
    render() {
        const InputWrapper = styled.div`
        font-size: 1.1em;
        overflow: hidden;
        position: relative;
        margin: 0.2em 0;
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        -webkit-box-orient: horizontal;
        -webkit-box-direction: normal;
            -ms-flex-direction: row;
                flex-direction: row;
        -webkit-box-align: stretch;
            -ms-flex-align: stretch;
                align-items: stretch;
        background: ${this.props.disabled===undefined ? this.props.theme.colours.color6 : this.props.theme.colours.color7};
        border-bottom: 0.3em solid ${this.props.disabled===undefined ? this.props.theme.colours.color5 : this.props.theme.colours.color8};
        :hover {
            ${this.props.disabled===undefined ? "outline: solid "+ this.props.theme.colours.color3 +";\nborder-bottom: 0.3em solid" + this.props.theme.colours.color3 + ";" : null};
            button:hover{
                ${this.props.btndisabled===undefined ?"background: "+ this.props.theme.colours.color3:""};
                &::before{
                ${this.props.btndisabled===undefined ?"background: "+ this.props.theme.colours.color3:""};
                -webkit-transform: translateX(-90%) rotate(45deg) scale(1.2);
                        transform: translateX(-90%) rotate(45deg) scale(1.2);
                }
            }
        }
        input{
            padding: 1em .2em .1em 0.2em;
            display: inline-block;
            -webkit-box-flex: 1;
                -ms-flex-positive: 1;
                    flex-grow: 1;
                    z-index: 1;
            border: none;
            background: none;
            outline: none;
            color: ${this.props.theme.colours.color2};
            font-size: 1em;
            ${this.props.disabled!==undefined ? "user-select: none;" : null};
            &:focus + label, &:not(:placeholder-shown) + label {
                color: ${this.props.theme.colours.color5};
                font-size: 0.7em;
                -webkit-transform: translateY(0);
                        transform: translateY(0);
                bottom: 50%;
                font-weight: bold;
            }
            :disabled{
                color: ${this.props.theme.colours.color1};
                &:focus + label, &:not(:placeholder-shown) + label{
                    
                }
            }
        }
        label{
            padding: 0;
            color: ${this.props.theme.colours.color2};
            z-index: 0;
            position: absolute;
            left: 0.2em;
            padding-bottom: 0.2em;
            bottom: 0;
            -webkit-transition: all ease-in-out 350ms;
            transition: all ease-in-out 350ms;
        }
        button{
            position: relative;
            background: ${this.props.theme.colours.color2};
            color: ${this.props.theme.colours.color6};
            border: none;
            font-size: 0.8em;
            font-weight: bold;
            padding: 0 .5em;
            -webkit-transition: ease all 300ms;
            transition: ease all 300ms;
            z-index: 1;
            ::before {
                position: absolute;
                display: block;
                content: '';
                -webkit-clip-path: polygon(0% 0%, 100% 100%, 0% 100%);
                        clip-path: polygon(0% 0%, 100% 100%, 0% 100%);
                -webkit-transform: translateX(-90%) rotate(45deg);
                        transform: translateX(-90%) rotate(45deg);
                height: 1em;
                width: 1em;
                background: ${this.props.theme.colours.color2};
                -webkit-transition: ease all 300ms;
                transition: ease all 300ms;
            }
        }
        `;
        return (
            <InputWrapper>
                <input name={this.props.name} id={this.props.id} placeholder=" " type={this.props.type ? this.props.type : "text"} value={this.state.value} onChange={e=>this.handleChange(e)} disabled={this.props.disabled} />
                {this.props.label != null ? <label htmlFor={this.props.id}>{this.props.label}</label> : ""}
                {this.props.button != null ? <button onClick={this.props.onClick}>{this.props.button}</button> : ""}
            </InputWrapper>

        )
    }
}

export default withTheme(TextInput)