import React, { Component,PureComponent } from 'react';
import PropTypes from 'prop-types';
import {StyleSheet,Text,View,FlatList} from 'react-native';
import {responsiveFontSize,responsiveWidth,responsiveHeight} from 'react-native-responsive-dimensions';

export class DrawerItem extends React.PureComponent{

    render(){
        return ( 
        <View style={style.content}>
           <Text style={style.title}>{this.props.title}</Text>
           <Text style={style.description}>{this.props.description}</Text>
           <View style={style.timeContent}>
           <Text style={style.time}>{this.props.time}</Text>
           </View>
           <View style={style.bottomSeparator}/>
       </View>
       )
    
    }
    
}
export class DrawerListItem extends PureComponent{
    state = {selected: (new Map(): Map<string, boolean>)};

  _keyExtractor = (item, index) => item.id;

  _onPressItem = (id: string) => {
    this.setState((state) => {
      const selected = new Map(state.selected);
      selected.set(id, !selected.get(id)); // toggle
      return {selected};
    });
  };
  _renderItem = ({item}) => (
    <HistoryItem
        title={item.title}
        description={item.description}
        time={item.time}
    />
  );

  render() {
    return (
      <FlatList
        data={[{title:'titre de la demande',description:'test description de la demande',time:'Hier'},
        {title:'titre de la demande',description:'test description de la demande',time:'Hier'},
        {title:'titre de la demande',description:'test description de la demande',time:'Hier'},
        {title:'titre de la demande',description:'test description de la demande',time:'Hier'},
        {title:'titre de la demande',description:'test description de la demande',time:'Hier'},
        {title:'titre de la demande',description:'test description de la demande',time:'Hier'},
        {title:'titre de la demande',description:'test description de la demande',time:'Hier'},
        {title:'titre de la demande',description:'test description de la demande',time:'Hier'},
        {title:'titre de la demande',description:'test description de la demande',time:'Hier'},
        {title:'titre de la demande',description:'test description de la demande',time:'Hier'},
    ]}
        extraData={this.state}
        keyExtractor={this._keyExtractor}
        renderItem={this._renderItem}
      />
    );
  }
}

const style=StyleSheet.create({
    content:{
        width:responsiveWidth(100),
        height:responsiveHeight(12),
        borderBottomColor: '#FFFFFF',
        flex:1,
        flexDirection: 'column',
        paddingLeft: 10,
        paddingTop: 10,
  
    },
    bottomSeparator:{
        width:responsiveWidth(80),
        height:1,
        justifyContent:'center',
        alignSelf: 'center',

        backgroundColor:'#4f5b62',
    },
    title:{
      color:'#000',
      fontSize:responsiveFontSize(2.2)
    },
    description:{
      fontSize:responsiveFontSize(1.8),
      color:'#4f5b62',
    
    },
    timeContent:{
        justifyContent:'flex-end',
        flex:1,
        alignItems: 'flex-end',
    },
    time:{
        fontWeight: 'bold',
        marginRight: 20,
        marginBottom: 10,
        color:'#263238',
    },
  });