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',
     },
});