import React from 'react';
import { StyleSheet, Text, View ,Button ,TouchableHighlight , ListView ,TouchableOpacity ,Image} from 'react-native';
import DatePicker from 'react-native-datepicker' ;

const ds = new ListView.DataSource({rowHasChanged: (r1, r2) => r1 !== r2});
export default class Planning extends React.Component {
  static navigationOptions = {
    title: 'Planning',
  }
  constructor(props){
      super(props)
      this.state = {date:new Date() ,
        dataSource: ds.cloneWithRows([{nom:'Pharmacie LA VICTOIRE' , ville:'Marrakech' ,adresse:'798, Unité 4, à côté de Diour Massakine et Boulangerie Ayourli ' } , {nom:'Pharmacie HANI' , ville:'Marrakech' ,adresse:'Rue Souraya Lot. Saâdia Résidence El Amane' },
      {nom:'Pharmacie DU SOLEIL' , ville:'Marrakech' ,adresse:'28, Sidi Abbad IV' },{nom:'Pharmacie LA VICTOIRE' , ville:'Marrakech' ,adresse:'798, Unité 4, à côté de Diour Massakine et Boulangerie Ayourli ' } , {nom:'MASJID DAOUDIATE' , ville:'Marrakech' ,adresse:'app 2 imm 10 jnane awrad' } , {nom:'Pharmacie HANI' , ville:'Marrakech' ,adresse:'Rue Souraya Lot. Saâdia Résidence El Amane' }]),
      };
    }

    render(){
      return (
        <View>
        <View style={{flexDirection: 'row' , justifyContent: 'space-between'}}>
        <DatePicker
          date={this.state.date}
          mode="date"
          placeholder="select date"
          format="DD-MM-YYYY"
          minDate="2016-05-01"
          confirmBtnText="Confirm"
          cancelBtnText="Cancel"
          customStyles={{
            dateIcon: {
              position: 'absolute',
              left: 0,
              top: 4,
              marginLeft: 0
            },
            dateInput: {
              marginLeft: 36
            }
            // ... You can check the source to find the other keys.
          }}
          onDateChange={(date) => {this.setState({date: date})}}
        />
        <Button
          onPress = { () => this.props.navigation.navigate('Planning')}
          title="Ajouter"/>
        </View>
        <ListView style={{marginTop:10}}
          dataSource={this.state.dataSource}
          renderRow={(rowData) => <View style={{ flexDirection: 'row' ,  justifyContent:'center' , marginBottom:10 , height: 100  , backgroundColor: '#3498db'}}>
            <TouchableOpacity style={{flex:1}}
              onPress={() => this.props.navigation.navigate('Planning',{name: 'amine'})}>
              <View style={styles.container}>
                <Text style={styles.text}>{rowData.nom.toUpperCase()}</Text>
                <Text style={styles.text2}>{rowData.ville}</Text>
                <Text style={styles.text2}>{rowData.adresse}</Text>
              </View>
            </TouchableOpacity>
            <TouchableHighlight style={{justifyContent: 'center'}}>
              <Image
                style={{width: 12, height: 12 , alignItems:'center'}}
                source={{uri:'https://image.flaticon.com/icons/png/128/32/32178.png'}}
              />
            </TouchableHighlight>


          </View>}
        />
        </View>
      )
    }
  }
  const styles = StyleSheet.create({
    container: {
      flex: 1,
      justifyContent: 'center',
    },
    text:{
      fontWeight: 'bold' ,
      fontSize:20 ,
      color:'#ecf0f1' ,
      left:10
    },
    text2:{
      color:'#ecf0f1' ,
      fontSize:13 ,
      left:10,
    }
  });