import React, { Component } from 'react'
import { Slider, Modal } from 'react-native'
import {
  Container, Content, Body, View,
  Card, CardItem,
  Form,
  Item, InputGroup, Input, Label, Text,
  Picker, Button, Icon,
  Spinner
} from 'native-base'
import { Grid, Col, Row } from 'react-native-easy-grid'

const ROLE_FETCHER = 'Fetcher'
const fakeFetcher =   { userID: 2, userAlias: 'Epan',  role: ROLE_FETCHER,   objective: 'Pencil' }

export default class TaskForm extends Component {
  static navigationOptions = {
    header: {
      title: 'New Task',
    }
  }
  state = {
    requestModalVisible: false,
    bidStatus: 'PENDING',
    cost: 0,
    tip: 0
  }

  submitRequest = () => {
    // this.setState({
    //   requestModalVisible: true
    // })

    // setTimeout(() => {
    //   this.setState({
    //     bidStatus: 'ACCEPTED'
    //   })
    // }, 2000)

    this.props.navigation.navigate('ChatRoom', { receiver: fakeFetcher })
  }

  render = () => (
    <Content>
      <Modal
        animationType="fade"
        transparent={true}
        visible={this.state.requestModalVisible}
      >
        <Container style={{ backgroundColor: 'rgba(52, 52, 52, 0.4)', paddingHorizontal: 50, paddingVertical: 200 }}>
          <Card>
            <CardItem>
              <View style={{flex: 1, flexDirection: 'row', justifyContent: 'center', alignItems: 'center'}}>{
                this.state.bidStatus === 'PENDING' ?
                  <View style={{ justifyContent: 'center', alignItems: 'center', marginVertical: 70, marginHorizontal: 30 }}>
                    <Text>Waiting for Fetcher response</Text>
                    <Spinner />
                  </View> :
                  <View style={{ justifyContent: 'center', alignItems: 'center', marginVertical: 70, marginHorizontal: 30 }}>
                    <View><Text>Task {this.state.bidStatus} !</Text></View>
                    <Button primary block onPress={() => {
                      this.setState({
                        requestModalVisible: false
                      })
                      this.props.navigation.navigate('ChatRoom', { receiver: fakeFetcher })
                      }}>
                      <Icon name="arrow-forward" />
                    </Button>
                  </View>
              }</View>
            </CardItem>
          </Card>
        </Container>
      </Modal>
        <Card>
          <CardItem>
            <Body>
            <View style={{ alignSelf: 'stretch' }}>
              <Item stackedLabel>
                <Label>I need:</Label><Input />
              </Item>
              <Item stackedLabel>
                <Label>From:</Label><Input />
              </Item>
              <View style={{ flexDirection: 'row', flex: 1 }}>
                <Item stackedLabel style={{ width: 200 }}>
                  <Label>Within:</Label><Input keyboardType="numeric" />
                </Item>
                <View style={{ justifyContent: 'center', alignItems: 'center' }}>
                <Picker
                  iosHeader="Select one"
                  mode="dropdown"
                  selectedValue="key0"
                  onValueChange={() => {}}
                  style={{width: 100}}
                  mode="dropdown"
                >
                  <Picker.Item label="Hour" value="key0" />
                  <Picker.Item label="Day" value="key1" />
                </Picker>
                </View>
              </View>
              <View style={{ marginVertical: 10 }}>
                <Label>Cost: {this.state.cost}</Label>
                <Slider minimumValue={0} maximumValue={1000} step={5} onSlidingComplete={cost => this.setState({ cost })} />
              </View>
              <View style={{ marginVertical: 10 }}>
                <Label>Tip: {this.state.tip}</Label>
                <Slider minimumValue={0} maximumValue={100} step={2} onSlidingComplete={tip => this.setState({ tip })} />
              </View>
              <Item stackedLabel>
                <Label>Additional information</Label>
                <Input />
              </Item>
              <Button primary block style={{ marginTop: 30 }} onPress={() => this.submitRequest()}>
                <Text>Request!</Text>
              </Button>
            </View>
            </Body>
          </CardItem>
        </Card>
      </Content>
  )
}

@@ -211,16 +211,26 @@
 n, Icon,
+ CheckBox,
 %0A  Spinn
@@ -668,221 +668,64 @@
 p: 0
-%0A  %7D%0A%0A  submitRequest = () =%3E %7B%0A    // this.setState(%7B%0A    //   requestModalVisible: true%0A    // %7D)
+,%0A    preferFemale: false%0A  %7D
 %0A%0A  
- 
- // setTimeout(() =%3E %7B%0A    //   this.setState(%7B%0A    //     bidStatus: 'ACCEPTED'%0A    //   %7D)%0A    // %7D, 2000)%0A
+submitRequest = () =%3E %7B
 %0A   
@@ -3392,25 +3392,8 @@
 st: 
-%7Bthis.state.cost%7D
 %3C/La
@@ -3418,84 +3418,93 @@
    %3C
-Slider minimumValue=%7B0%7D maximumValue=%7B1000%7D step=%7B5%7D onSlidingComplete=%7Bcost
+Input keyboardType=%22numeric%22 defaultValue=%7Bthis.state.cost%7D onChange=%7B(%7BnativeEvent%7D)
  =%3E 
@@ -3523,16 +3523,34 @@
 e(%7B cost
+: nativeEvent.text
  %7D)%7D /%3E%0A
@@ -3697,105 +3697,393 @@
    %3C
-Slider minimumValue=%7B0%7D maximumValue=%7B100%7D step=%7B2%7D onSlidingComplete=%7Btip =%3E this.setState(%7B tip
+Input keyboardType=%22numeric%22 defaultValue=%7Bthis.state.tip%7D onChange=%7B(%7BnativeEvent%7D) =%3E this.setState(%7B tip: nativeEvent.text %7D)%7D /%3E%0A              %3C/View%3E%0A              %3CView style=%7B%7B marginVertical: 10 %7D%7D%3E%0A                %3CLabel%3E %7Bthis.state.tip%7D%3C/Label%3E%0A                %3CCheckBox checked=%7Bthis.state.preferFemale%7D onPress=%7B() =%3E this.setState(%7B preferFemale: !this.state.preferFemale
  %7D)%7D

use numeric for cost+tip, add checkbox for prefer female fetcher