import React from 'react';
import { ScrollView, Text, TouchableOpacity, View } from 'react-native';
// Reduxs
import { connect } from 'react-redux';
// Helpers
import Helpers from '../Lib/Helpers';
// Translations
import i18n from '../../I18n';
// Icons
import FontAwesome5 from 'react-native-vector-icons/FontAwesome5';
// Style
import styles from '../../Resources/Styles/SearchStyle';

function mapStateToProps(state) {
  return {
    documents: state.documents,
    mainColor: state.app.mainColor,
  };
}

class SearchScreen extends React.Component {
  state = {
    documents: [],
  };

  openDocument(document) {
    this.props.dispatch({ type: 'SET_CURRENT_OPENED_DOC', data: document });
    if (document.type === 'pdf') {
      this.props.navigation.navigate('PDFScreen', { uuid: document.uuid });
    } else if (document.type === 'mp4') {
      this.props.navigation.navigate('VideoScreen', { uuid: document.uuid });
    } else {
      console.log('Inconnu');
    }
  }

  componentDidMount() {
    const { needle, onlyVideos } = this.props.route.params;
    let objDocs = this.props.documents;
    let arrayDocs = Object.keys(objDocs).map(function (key) {
      return objDocs[key];
    });
    let sorted = arrayDocs.sort(Helpers.compareValues('title', 'asc'));
    let filtered = sorted.filter(
      item => item.title.toLowerCase().indexOf(needle.toLowerCase()) >= 0,
    );
    if (onlyVideos === true) {
      filtered = filtered.filter(item => item.type === 'mp4');
    }
    this.setState({
      documents: filtered,
    });
  }

  render() {
    let documentList = this.state.documents.map(document => {
      return (
        <TouchableOpacity
          key={document.id.toString()}
          style={{ ...styles.file, backgroundColor: this.props.mainColor }}
          onPress={() => this.openDocument(document)}>
          {document.type === 'pdf' ? (
            <FontAwesome5 name="file-pdf" color={'white'} size={60} />
          ) : (
            <FontAwesome5 name="file-video" color={'white'} size={60} />
          )}
          <Text style={styles.fileTxt}>{document.title}</Text>
        </TouchableOpacity>
      );
    });

    return (
      <View style={styles.container}>
        <ScrollView style={styles.scrollview}>
          <View style={styles.filesContainer}>{documentList}</View>
          {this.state.documents.length === 0 && (
            <Text style={{ textAlign: 'center', marginTop: 50, fontSize: 30 }}>
              {i18n.t('search_s.no_result')}
            </Text>
          )}
        </ScrollView>
      </View>
    );
  }
}

export default connect(mapStateToProps)(SearchScreen);