// @flow
import * as React from 'react'
import TextField from 'material-ui/TextField'
import RaisedButton from 'material-ui/RaisedButton'
import { List, ListItem } from 'material-ui/List'
import FontAwesome from 'react-fontawesome'
import styled from 'styled-components'

type Props = {
  tags: string[],
  searchSubmit: Function,
}

type State = {
  qText: string,
  tagText: string,
}

const Wrapper = styled.div`
  padding: 10px;
`

const Inputs = styled.div`
  width: 70%;
`

const Row = styled.div`
  display: flex;
  justify-content: space-between;
`

const IconWrap = styled.div`
  margin: 15px auto;
  width: 2em;
`

class Component extends React.Component<Props, State> {
  constructor(props: Props) {
    super(props)
    this.state = {
      qText: '',
      tagText: '',
    }
  }
  render() {
    const { props } = this
    return (
      <Wrapper>
        <Row>
          <Inputs>
            <Row>
              <IconWrap>
                <FontAwesome name="search" />
              </IconWrap>
              <TextField
                hintText="キーワード・作品・キャラ"
                value={this.state.qText}
                onChange={(event: Object, newValue: string) => {
                  this.setState({
                    qText: newValue,
                  })
                }}
              />
            </Row>
            <Row>
              <IconWrap>
                <FontAwesome name="tag" />
              </IconWrap>
              <TextField
                hintText="タグ"
                value={this.state.qText}
                onChange={(event: Object, newValue: string) => {
                  console.log(newValue)
                  this.setState({
                    tagText: newValue,
                  })
                }}
              />
            </Row>
          </Inputs>
          <RaisedButton
            style={{ margin: 5, paddingTop: 25, width: 50 }}
            label="検索"
            onClick={() => {
              this.props.searchSubmit(this.state.qText, this.state.tagText)
            }}
          />
        </Row>
        <List>
          {props.tags.map(tag => (
            <ListItem
              rightIcon={<FontAwesome name="circle-thin" />}
              primaryText={tag}
              secondaryText="..."
            />
          ))}
        </List>
      </Wrapper>
    )
  }
}

export default Component

@@ -1514,33 +1514,35 @@
 lue=%7Bthis.state.
-q
+tag
 Text%7D%0A          
@@ -2074,49 +2074,189 @@
    %3C
-List%3E%0A          %7Bprops.tags.map(tag =%3E (%0A
+p%3E%E3%82%BF%E3%82%B0%E6%95%B0:%7Bprops.tags.length%7D%3C/p%3E%0A        %3CList%3E%0A          %7Bprops.tags.map(tag =%3E %7B%0A            // HACKME%0A            const selected = tag === this.state.tagText%0A            return (%0A  
     
@@ -2287,16 +2287,18 @@
         
+  
 rightIco
@@ -2304,76 +2304,304 @@
 on=%7B
-%3CFontAwesome name=%22circle-thin%22 /%3E%7D%0A              primaryText=%7Btag%7D%0A
+%0A                  %3CFontAwesome%0A                    name=%7Bselected ? 'check-circle-o' : 'circle-thin'%7D%0A                  /%3E%0A                %7D%0A                primaryText=%7Btag%7D%0A                onClick=%7B() =%3E %7B%0A                  this.setState(%7B tagText: selected ? '' : tag %7D)%0A                %7D%7D%0A  
     
@@ -2634,35 +2634,39 @@
 ..%22%0A            
+  
 /%3E%0A
+  
           ))%7D%0A  
@@ -2660,16 +2660,28 @@
        )
+%0A          %7D
 )%7D%0A     

Tag list selector