import React, { PropTypes } from 'react';
import SearchIcon from 'material-ui/svg-icons/action/search';
import radium from 'radium';
import Theme from '../../../theme';

const DialogSearchBarStyle = {
  styleSearchIcon: {
    marginTop: '4px',
    width: '20px',
    height: '20px',
  },
  wrapper: {
    padding: 0,
  },
  formControl: {
    display: 'block',
    width: '100%',
    height: '34px',
    padding: '6px 12px',
    fontSize: '14px',
    lineHeight: '1.42857143',
    color: '#555555',
    backgroundColor: '#ffffff',
    backgroundImage: 'none',
    border: '1px solid #cfdadd',
    borderRadius: '2px',
    boxShadow: 'inset 0 1px 1px rgba(0, 0, 0, 0.075)',
    transition: 'border-color ease-in-out .15s, box-shadow ease-in-out .15s',
    ':focus': {
      borderColor: Theme.colors.main,
      zIndex: 3,
      outline: 0,
      boxShadow: 'inset 0 1px 1px rgba(0, 0, 0, .075), 0 0 8px rgba(6, 151, 158, 0.6)',
    },
  },
  formControlWithAddOn: {
    position: 'relative',
    zIndex: '2',
    float: 'left',
    width: '100%',
  },
  inputGroup: {
    position: 'relative',
    display: 'table',
    borderCollapse: 'separate',
    width: '100%',
  },
  inputGroupAddOn: {
    cursor: 'pointer',
    fontSize: '16px',
    paddingLeft: '15px',
    paddingRight: '15px',
    fontWeight: 'bold',
    borderWidth: '1px',
    borderStyle: 'solid',
    borderColor: '#cfdadd',
    backgroundColor: '#edf1f2',
    width: '1%',
    whiteSpace: 'nowrap',
    verticalAlign: 'middle',
    lineHeight: 1,
    color: '#555555',
    textAlign: 'center',
    ':hover': {
      background: '#fbfbfb',
    },
  },
};

const DialogSearchBar = (props) => {
  const {
    onSearchChange,
  } = props;

  return (
    <div style={DialogSearchBarStyle.wrapper}>
      <div style={DialogSearchBarStyle.inputGroup}>
        <input
          key="search"
          style={[
            DialogSearchBarStyle.formControl,
            Theme.displayAsCell,
            DialogSearchBarStyle.formControlWithAddOn,
          ]}
          onChange={onSearchChange}
          type="search"
          placeholder="Search in users you are following"
        />
        <div
          key="addOn"
          style={[DialogSearchBarStyle.inputGroupAddOn, Theme.displayAsCell]}
        >
          <SearchIcon style={DialogSearchBarStyle.styleSearchIcon} />
        </div>
      </div>
    </div>
  );
};

DialogSearchBar.propTypes = {
  onSearchChange: PropTypes.func,
};

export default radium(DialogSearchBar);