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


    render() {
        const SearchWrapper = styled.div`
            margin: .5em;
            border-radius: .5rem;
            display: inline-flex;
            white-space: nowrap;
            //margin-left: auto;
            transition: ease-in-out all 500ms;
            flex-grow: 0;
            max-width: 20em;
            &:hover {
                box-shadow: 0 0 1em ${this.props.theme.colours.color3};
                flex-grow: 1;
                input {
                    flex-grow: 1;
                }
            }
            input{
                height: 2rem;
                transition: ease all 500ms;
                border-radius: .5rem 0 0 .5rem;
                display: inline-flex;
                background: ${this.props.theme.colours.color3};
                border: none;
                outline: none;
                color: ${this.props.theme.colours.color10};
                flex-grow: 0;
                margin-left: auto;
                width: 100%;
                box-shadow: 0 0 .2em ${this.props.theme.colours.color5};
                padding: .5em;
                &:hover, &:not(:placeholder-shown){
                    transition: ease all 500ms;
                    flex-grow: 1;
                }
                + button{
                    height: 2rem;
                    border: none;
                    transition: ease-in-out all 100ms;
                    color: ${this.props.theme.colours.color6};
                    border-radius: 0 .5rem .5rem 0;
                    display: inline-flex;
                    align-items: center;
                    background: ${this.props.theme.colours.color2};
                    font-size: 1em;
                    border: .1rem inset ${this.props.theme.colours.color3};
                    border-style: solid;
                    padding: .5em;
                    &:hover{
                        background: ${this.props.theme.colours.color6};
                        color: ${this.props.theme.colours.color3};
                    }
                }
            }
            `;
        return (
            <SearchWrapper id="header__search"><input id={this.props.id} type="text" placeholder="..."></input><button>Search</button></SearchWrapper>
        )
    }
}

export default withTheme(SearchBox)