import React from 'react';
import styled from 'styled-components';
import Icon from 'ui/components/common/Icon';

const Container = styled.div`
  display: inline-flex;
  margin-right: 10px;
`;

const Value = styled.div`
  position: relative;
  color: red;
  padding: ${(props) => props.smaller ? '0' : '2px'} 8px;
  user-select: none;
  background-color: ${(props) => props.isSelected ? props.theme.blue : '#f0f0f0'};
  color: ${(props) => props.isSelected ? 'white' : 'black'};
  cursor: ${(props) => props.isSelected ? 'default' : 'pointer'};
  
  &:first-child {
    border-radius: 4px 0 0 4px;
  }
  
  &:last-child {
    border-radius: 0 4px 4px 0;
  }
  
  ${({ isDisabled }) => isDisabled ? 'color: #b6b6b6; cursor: default; background-color: #f0f0f0;' : ''}
`;

const Values = ({ values, disabledValues = [], selectedValue, other, startEditing, onChange, smaller }) => (
  <Container>
    {
      values.map((value) => (
        <Value key={ value }
               isSelected={ value === selectedValue }
               isDisabled={ disabledValues.indexOf(value) !== -1 }
               onClick={ () => onChange && onChange(value) }
               smaller={ smaller }>
          { value }
        </Value>
      ))
    }

    { other && <Value isSelected={ values.indexOf(selectedValue) < 0 } onClick={ startEditing }>Other...</Value> }
  </Container>
);

const StatusForm = styled.form`
  width: 220px;
  position: relative;
`;

const CloseIcon = styled(Icon)`
  position: absolute;
  top: 4px;
  right: 4px;
  display: block;
`;

const Input = styled.input`
  border: none;
  background-color: #f0f0f0;
  outline: 0;
  border-radius: 4px;
  height: 24px;
  padding: 0 25px 0 6px;
  display: block;
  width: 100%;
  box-sizing: border-box;
  
  &:focus {
    border: 2px solid #b2c9ee;
    box-sizing: border-box;
    padding: 0 4px;
  }
`;

class CustomValue extends React.Component {
  handleChange = (event) => {
    event.preventDefault();
    this.props.onChange(parseInt(this.elem.value, 10));
  };

  handleKeyDown = event => {
    if (event.keyCode === 27) {
      event.preventDefault();
      event.stopPropagation();
      this.props.onChange(this.props.selectedValue);
    }
  };

  setElem = (elem) => {
    this.elem = elem;

    if (elem) {
      elem.value = this.props.selectedValue;
      setTimeout(() => elem.select(), 0);
    }
  };

  render() {
    return (
      <Container>
        <StatusForm onKeyUp={ this.handleKeyDown }>
          <Input type="text"
                 onChange={ this.handleChange }
                 innerRef={ this.setElem }
                 placeholder="Start typing an HTTP status code"/>
          <CloseIcon src="clear" onClick={ this.props.onClose }/>
        </StatusForm>
      </Container>
    );
  }
}

class SelectBar extends React.Component {

  state = {
    editing: false
  };

  setEditing = (editing) => {
    this.setState({ editing });
  };

  updateValue = (value) => {
    this.props.onChange(value);
    this.setState({ editing: false });
  };

  render() {
    return this.state.editing
      ? <CustomValue onChange={ this.updateValue }
                     selectedValue={ this.props.selectedValue }
                     onClose={ () => this.setEditing(false) }/>
      : <Values { ...this.props } smaller={ this.props.smaller } startEditing={ () => this.setEditing(true) }/>
  }
}

export default SelectBar;

@@ -105,16 +105,65 @@
 n/Icon';
+%0Aimport HttpStatusCodes from 'http-status-codes';
 %0A%0Aconst 
@@ -232,16 +232,155 @@
 : 10px;%0A
+  position: relative;%0A%60;%0A%0Aconst Placeholder = styled.div%60%0A  position: absolute;%0A  top: 3px;%0A  left: 6px;%0A  font-size: 11px;%0A  color: gray;%0A
 %60;%0A%0Acons
@@ -1929,16 +1929,31 @@
 er-box;%0A
+  color: gray;%0A
   %0A  &:f
@@ -2381,24 +2381,63 @@
 ctedValue);%0A
+    %7D else %7B%0A      this.forceUpdate();%0A
     %7D%0A  %7D;%0A%0A
@@ -2576,32 +2576,367 @@
 lem.
-select(), 0
+focus(), 0);%0A      this.forceUpdate();%0A    %7D%0A  %7D;%0A%0A  renderMatches() %7B%0A    if (!this.elem) %7B%0A      return null;%0A    %7D%0A%0A    const value = this.elem.value;%0A%0A    if (!value) %7B%0A      return null;%0A    %7D%0A%0A    try %7B%0A      const statusText = HttpStatusCodes.getStatusText(value
 );%0A
+%0A 
     
+ return %60$%7Bvalue%7D $%7BstatusText%7D%60;%0A    %7D catch (ex) %7B%0A      return null;%0A    
 %7D%0A  %7D
-;
 %0A%0A  
@@ -3025,24 +3025,86 @@
 eKeyDown %7D%3E%0A
+          %3CPlaceholder%3E%7B this.renderMatches() %7D%3C/Placeholder%3E%0A
           %3CI
@@ -3139,22 +3139,20 @@
       on
-Change
+Blur
 =%7B this.

Add typeahead functionallity to status code edit