import React, {Component} from 'react'
import glamorous, {Div} from 'glamorous'
import matchSorter from 'match-sorter'
import Downshift from '../../src'

class Examples extends Component {
  state = {
    selectedColor: '',
  }

  changeHandler = selectedColor => {
    this.setState({selectedColor})
  }

  render() {
    const items = ['Black', 'Red', 'Green', 'Blue', 'Orange', 'Purple']
    return (
      <div>
        <Div
          css={{
            margin: '50px auto',
            maxWidth: 600,
            textAlign: 'center',
          }}
        >
          <h2>basic example</h2>
          <Div display="flex" justifyContent="center">
            <span
              style={{
                height: '2em',
                width: '2em',
                padding: '.3em',
                borderRadius: '5px',
                marginRight: '.5em',
                backgroundColor: this.state.selectedColor
                  ? this.state.selectedColor
                  : 'transparent',
              }}
            />
            <BasicAutocomplete items={items} onChange={this.changeHandler} />
          </Div>
        </Div>
      </div>
    )
  }
}

const Label = glamorous.label({fontWeight: 'bold', display: 'block'})

const Item = glamorous.div(
  {
    cursor: 'pointer',
    display: 'block',
    border: 'none',
    height: 'auto',
    textAlign: 'left',
    borderTop: 'none',
    lineHeight: '1em',
    color: 'rgba(0,0,0,.87)',
    fontSize: '1rem',
    textTransform: 'none',
    fontWeight: '400',
    boxShadow: 'none',
    padding: '.8rem 1.1rem',
    boxSizing: 'border-box',
    whiteSpace: 'normal',
    wordWrap: 'normal',
  },
  ({isActive, isSelected}) => ({
    backgroundColor: isActive ? 'lightgrey' : 'white',
    fontWeight: isSelected ? 'bold' : 'normal',
    '&:hover, &:focus': {
      borderColor: '#96c8da',
      boxShadow: '0 2px 3px 0 rgba(34,36,38,.15)',
    },
  }),
)

const Input = glamorous.input({
  fontSize: 14,
  wordWrap: 'break-word',
  lineHeight: '1em',
  outline: 0,
  whiteSpace: 'normal',
  minHeight: '2em',
  background: '#fff',
  display: 'inline-block',
  padding: '.5em 2em .5em 1em',
  color: 'rgba(0,0,0,.87)',
  boxShadow: 'none',
  border: '1px solid rgba(34,36,38,.15)',
  transition: 'box-shadow .1s ease,width .1s ease',
  margin: 0,
  marginBottom: '-2px',
  '&:hover, &focus': {
    borderColor: 'rgba(34,36,38,.35)',
    boxShadow: 'none',
  },
})

// this is just a demo of how you'd use the getRootProps function
// normally you wouldn't need this kind of abstraction 😉
function Root({innerRef, ...rest}) {
  return <div ref={innerRef} {...rest} />
}
function BasicAutocomplete({items, onChange}) {
  return (
    <Downshift onChange={onChange}>
      {({
        getInputProps,
        getItemProps,
        getRootProps,
        getLabelProps,
        highlightedIndex,
        inputValue,
        isOpen,
        selectedItem,
        clearSelection,
      }) => (
        <Root {...getRootProps({refKey: 'innerRef'})}>
          <Label {...getLabelProps()}>What is your favorite color?</Label>
          <Input
            {...getInputProps({
              placeholder: 'Enter color here',
              'data-testid': 'basic-input',
            })}
          />
          <button data-testid="clear-selection" onClick={clearSelection}>
            clear
          </button>
          {isOpen && (
            <div
              style={{
                border: '1px solid rgba(34,36,38,.15)',
                maxHeight: 100,
                overflowY: 'scroll',
              }}
            >
              {(inputValue ? matchSorter(items, inputValue) : items).map(
                (item, index) => (
                  <Item
                    key={item}
                    {...getItemProps({
                      'data-testid': `downshift-item-${index}`,
                      item,
                      isActive: highlightedIndex === index,
                      isSelected: selectedItem === item,
                    })}
                  >
                    {item}
                  </Item>
                ),
              )}
            </div>
          )}
        </Root>
      )}
    </Downshift>
  )
}
export default Examples

@@ -641,18 +641,38 @@
 %22center%22
+ alignItems=%22center%22
 %3E%0A
-
         
@@ -1249,16 +1249,240 @@
 ock'%7D)%0A%0A
+const Menu = glamorous.ul(%0A  %7B%0A    margin: '0',%0A    padding: '0',%0A    border: '1px solid rgba(34,36,38,.15)',%0A    maxHeight: 100,%0A    overflowY: 'scroll',%0A  %7D,%0A  (%7BisOpen%7D) =%3E (%7B%0A    border: isOpen ? null : 'none',%0A  %7D),%0A)%0A%0A
 const It
@@ -1496,19 +1496,18 @@
 amorous.
-div
+li
 (%0A  %7B%0A  
@@ -2867,16 +2867,17 @@
 t%7D /%3E%0A%7D%0A
+%0A
 function
@@ -3032,32 +3032,54 @@
   getRootProps,%0A
+        getMenuProps,%0A
         getLabel
@@ -3632,190 +3632,117 @@
     
-%7BisOpen && (%0A            %3Cdiv%0A              style=%7B%7B%0A                border: '1px solid rgba(34,36,38,.15)',%0A                maxHeight: 100,%0A                overflowY: 'scroll',%0A    
+%3CMenu%0A            %7B...getMenuProps(%7B%0A              refKey: 'innerRef',%0A              isOpen,%0A            %7D)%7D%0A
     
@@ -3739,34 +3739,33 @@
   %7D)%7D%0A          
-%7D%7D
+%3E
 %0A            %3E%0A 
@@ -3753,33 +3753,42 @@
   %3E%0A            
-%3E
+%7BisOpen &&
 %0A              %7B
@@ -3786,17 +3786,16 @@
         
-%7B
 (inputVa
@@ -4330,29 +4330,15 @@
     
-  %3C/div%3E%0A          )%7D
+%3C/Menu%3E
 %0A   

update basic example to have better a11y (#554)