import React from 'react';
import {
  Alert,
  Button,
  FlatList,
  Text,
  TextInput,
  TouchableOpacity,
  View,
} from 'react-native';
// Reduxs
import { connect } from 'react-redux';
import { deleteContact, editContact } from '../Store/Actions/contacts';
// Helpers
import Helpers from '../Lib/Helpers';
// Translations
import i18n from '../../I18n';
// Icons
import FontAwesome5 from 'react-native-vector-icons/FontAwesome5';
// Flash Messages
import { showMessage } from 'react-native-flash-message';
// Overlay
import { Overlay } from '@rneui/themed';
// Picker
import { Picker } from '@react-native-picker/picker';
// Style
import styles from '../../Resources/Styles/ContactStyle';

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

const mapDispatchToProps = dispatch => {
  return {
    editContact: (user, data) => dispatch(editContact(user, data)),
    deleteContact: (user, id) => dispatch(deleteContact(user, id)),
    sendBrochure: email => dispatch({ type: 'SEND_BROCHURE', data: email }),
  };
};

class ContactScreen extends React.Component {
  state = {
    contacts: [],
    sortType: 'asc',
    sortField: 'name',
    searchTxt: '',
    showTransferContact: false,
    selectedTransferUser: 0,
    contactToTransfer: {},
    showSendBrochure: false,
    selectedDocument: -1,
    sendDocumentList: [],
    selectedSendBrochureEmail: -1,
    tmpSendBrochureEmail: '',
    tmpSendBrochureSubject: '',
    tmpSendBrochureMessage: '',
    sortedDocuments: [],
    sortedEmails: [],
  };

  sendBrochure() {
    if (
      this.state.tmpSendBrochureEmail !== '' &&
      this.state.tmpSendBrochureSubject !== '' &&
      this.state.tmpSendBrochureMessage !== '' &&
      this.state.sendDocumentList.length > 0 &&
      Helpers.isEmailValid(this.state.tmpSendBrochureEmail)
    ) {
      const email = {
        email: this.state.tmpSendBrochureEmail,
        subject: this.state.tmpSendBrochureSubject,
        message: this.state.tmpSendBrochureMessage,
        documents: JSON.stringify(this.state.sendDocumentList),
        user_id: this.props.currentUser.id,
      };
      this.props.sendBrochure(email);
      this.setState({
        showSendBrochure: false,
        tmpSendBrochureEmail: '',
        tmpSendBrochureSubject: '',
        tmpSendBrochureMessage: '',
        selectedSendBrochureEmail: -1,
        selectedDocument: -1,
        sendDocumentList: [],
      });
      showMessage({
        message: i18n.t('global.message_sent') + '.',
        description: i18n.t('global.message_will_be_sent_after_sync') + '.',
        type: 'success',
        duration: 1500,
      });
    } else {
      Alert.alert(
        i18n.t('error.incomplete_form'),
        i18n.t('error.fill_all_fields_and_1_doc_min') + '.',
      );
    }
  }

  transferContact() {
    const nextUser = this.props.users.filter(
      user => user.id !== this.props.currentUser.id,
    )[this.state.selectedTransferUser];
    const transferContact = this.state.contactToTransfer;
    const contact = {
      id: transferContact.id,
      email: transferContact.email,
      type: transferContact.type,
      other: transferContact.other,
      network: transferContact.network,
      name: transferContact.name,
      firstname: transferContact.firstname,
      office: transferContact.office,
      company: transferContact.company,
      address: transferContact.address,
      phone: transferContact.phone,
      products: transferContact.products,
      notes: transferContact.note,
      visits: transferContact.visits,
      to_delete: false,
      synced: false,
      user_id: nextUser.id,
    };
    this.props.editContact(this.props.currentUser, contact);
    this.setState({ showTransferContact: false });
    showMessage({
      message: i18n.t('contact_s.contact_transferred') + '.',
      description: i18n.t('contact_s.contact_will_be_sent_after_sync') + '.',
      type: 'success',
      duration: 1500,
    });
  }

  deleteContactAction(id) {
    Alert.alert(
      i18n.t('global.confirmation'),
      i18n.t('contact_s.confirm_contact_delete'),
      [
        {
          text: i18n.t('global.no'),
          onPress: () => console.log('Cancel Pressed'),
          style: 'cancel',
        },
        {
          text: i18n.t('global.yes'),
          onPress: () => {
            this.setState({ contacts: [], sortedEmails: [] });
            this.props.deleteContact(this.props.currentUser, id);
            showMessage({
              message: i18n.t('contact_s.contact_deleted') + '.',
              type: 'success',
              duration: 500,
            });
          },
        },
      ],
      { cancelable: false },
    );
  }

  Item(item) {
    return (
      <View style={styles.item}>
        <TouchableOpacity
          onPress={() =>
            this.props.navigation.navigate('ContactDetailsScreen', {
              action: 'edit',
              contactId: item.id,
            })
          }>
          <Text style={{ ...styles.clickable, color: this.props.mainColor }}>
            {item.name.toUpperCase()} {item.firstname}
          </Text>
        </TouchableOpacity>
        <Text style={styles.company}>{item.company}</Text>
        <Text style={styles.email}>{item.email}</Text>
        <View style={styles.buttons}>
          <TouchableOpacity
            style={styles.button}
            onPress={() => {
              this.deleteContactAction(item.id);
            }}>
            <FontAwesome5 name="trash" size={20} color={this.props.mainColor} />
          </TouchableOpacity>
          <TouchableOpacity
            style={styles.button}
            onPress={() => {
              this.setState({
                showTransferContact: true,
                contactToTransfer: item,
              });
            }}>
            <FontAwesome5
              name="paper-plane"
              size={20}
              color={this.props.mainColor}
            />
          </TouchableOpacity>
        </View>
      </View>
    );
  }

  sortContacts(field) {
    let sort;
    if (field !== this.state.sortField) {
      sort = 'asc';
    } else {
      if (this.state.sortType === 'asc') {
        sort = 'desc';
      } else {
        sort = 'asc';
      }
    }
    this.setState({
      contacts: this.state.contacts.sort(Helpers.compareValues(field, sort)),
      sortType: sort,
      sortField: field,
    });
  }

  HeaderItem() {
    return (
      <View style={styles.item}>
        <TouchableOpacity
          onPress={() => {
            this.sortContacts('name');
          }}>
          <Text style={{ ...styles.clickable, color: this.props.mainColor }}>
            {i18n.t('global.name')} <FontAwesome5 name={'sort'} />
          </Text>
        </TouchableOpacity>
        <TouchableOpacity
          onPress={() => {
            this.sortContacts('company');
          }}>
          <Text style={{ ...styles.clickable, color: this.props.mainColor }}>
            {i18n.t('global.company')} <FontAwesome5 name={'sort'} />
          </Text>
        </TouchableOpacity>
        <Text style={styles.email}>{i18n.t('global.email')}</Text>
        <Text style={styles.buttons} />
      </View>
    );
  }

  handleSearchBtn() {
    if (this.state.searchTxt.length > 0) {
      let obj = this.props.contacts;
      let array = Object.keys(obj).map(function (key) {
        return obj[key];
      });
      this.setState({
        contacts: array.sort(Helpers.compareValues('name', 'asc')),
        sortType: 'asc',
        searchTxt: '',
      });
    }
  }
  handleSearchTxt(text) {
    this.setState({ searchTxt: text });
    if (text.length > 0) {
      let tmpContactsName = this.props.contacts.filter(
        item => item.name.toLowerCase().indexOf(text.toLowerCase()) >= 0,
      );
      let tmpContactsCompany = this.props.contacts.filter(
        item => item.company.toLowerCase().indexOf(text.toLowerCase()) >= 0,
      );
      let resSearch = Object.assign(tmpContactsName, tmpContactsCompany);
      this.setState({
        contacts: resSearch.sort(Helpers.compareValues('name', 'asc')),
        sortType: 'asc',
      });
    } else {
      let obj = this.props.contacts;
      let array = Object.keys(obj).map(function (key) {
        return obj[key];
      });
      this.setState({
        contacts: array.sort(Helpers.compareValues('name', 'asc')),
        sortType: 'asc',
      });
    }
  }

  componentDidMount() {
    this.init();
  }

  componentDidUpdate(prevProps, prevState, snapshot) {
    if (prevProps.contacts !== this.props.contacts) {
      this.init();
    }
  }

  init() {
    let objContacts = this.props.contacts;
    let objDocs = this.props.documents;
    let arrayContacts = Object.keys(objContacts).map(function (key) {
      return objContacts[key];
    });
    let arrayEmails = Object.keys(objContacts).map(function (key) {
      return objContacts[key];
    });
    let arrayDocs = Object.keys(objDocs).map(function (key) {
      return objDocs[key];
    });

    const { action } = this.props.route.params;
    if (action === 'add') {
      this.props.navigation.navigate('ContactDetailsScreen', {
        action: 'add',
      });
    }

    this.setState({
      contacts: arrayContacts.sort(Helpers.compareValues('name', 'asc')),
      sortedDocuments: arrayDocs.sort(Helpers.compareValues('title', 'asc')),
      sortedEmails: arrayEmails.sort(Helpers.compareValues('email', 'asc')),
      sortType: 'asc',
      sortField: 'name',
    });
  }

  render() {
    const { contactAdded } = this.props.route.params;

    if (contactAdded === true) {
      this.props.navigation.setParams({ contactAdded: false });
      showMessage({
        message: i18n.t('contact_s.contact_added') + '.',
        type: 'success',
        duration: 500,
      });
    }
    return (
      <View style={styles.container}>
        <View
          style={{
            marginTop: 20,
            flexDirection: 'row',
            justifyContent: 'space-evenly',
            alignItems: 'center',
          }}>
          <Button
            color={this.props.mainColor}
            title={i18n.t('global.add')}
            onPress={() =>
              this.props.navigation.navigate('ContactDetailsScreen', {
                action: 'add',
              })
            }
          />
          <Button
            color={this.props.mainColor}
            title={i18n.t('contact_s.send_flyer')}
            onPress={() => this.setState({ showSendBrochure: true })}
          />
          <View style={{ flexDirection: 'row' }}>
            <TextInput
              placeholder={i18n.t('global.search')}
              style={styles.inputSearch}
              value={this.state.searchTxt}
              onChangeText={text => this.handleSearchTxt(text)}
            />
            <TouchableOpacity
              style={{
                ...styles.btnSearch,
                backgroundColor: this.props.mainColor,
              }}
              onPress={() => this.handleSearchBtn()}>
              {this.state.searchTxt.length > 0 ? (
                <FontAwesome5 name={'times'} size={20} color={'white'} />
              ) : (
                <FontAwesome5 name={'search'} size={20} color={'white'} />
              )}
            </TouchableOpacity>
          </View>
        </View>
        <View style={{ flex: 1, marginTop: 20 }}>
          <FlatList
            data={this.state.contacts}
            renderItem={({ item }) => this.Item(item)}
            ListHeaderComponent={this.HeaderItem.bind(this)}
            keyExtractor={item => item.id.toString()}
          />
        </View>
        <Overlay
          isVisible={this.state.showTransferContact}
          windowBackgroundColor="rgba(255, 255, 255, .9)"
          overlayBackgroundColor="white"
          width={400}
          height={300}>
          <View
            style={{ flex: 1, alignItems: 'center', justifyContent: 'center' }}>
            <Text style={{ marginBottom: 10 }}>
              {i18n.t('contact_s.select_contact')} :
            </Text>
            <Picker
              style={{
                width: 300,
                marginBottom: 15,
                paddingLeft: 10,
              }}
              selectedValue={this.state.selectedTransferUser}
              onValueChange={(itemValue, itemIndex) => {
                this.setState({ selectedTransferUser: itemIndex });
              }}>
              {this.props.users
                .filter(user => user.id !== this.props.currentUser.id)
                .map((item, index) => {
                  return (
                    <Picker.Item
                      label={item.email}
                      value={index}
                      key={item.id.toString()}
                    />
                  );
                })}
            </Picker>
            <View
              style={{
                flexDirection: 'row',
                justifyContent: 'space-evenly',
                alignItems: 'center',
                width: 400,
              }}>
              <Button
                color={this.props.mainColor}
                title={i18n.t('global.cancel')}
                onPress={() => this.setState({ showTransferContact: false })}
              />
              <Button
                color={this.props.mainColor}
                title={i18n.t('contact_s.transfer')}
                onPress={() => this.transferContact()}
              />
            </View>
          </View>
        </Overlay>
        <Overlay
          isVisible={this.state.showSendBrochure}
          windowBackgroundColor="rgba(255, 255, 255, .9)"
          overlayBackgroundColor="white"
          width={600}
          height={500}>
          <View style={{ flex: 1 }}>
            <View style={{ flex: 2, flexDirection: 'row' }}>
              <View
                style={{
                  flex: 1,
                  alignItems: 'center',
                  justifyContent: 'flex-start',
                }}>
                <TextInput
                  style={styles.txtSendBrochure}
                  placeholder={i18n.t('global.email')}
                  autoCompleteType="email"
                  autoCapitalize="none"
                  keyboardType={'email-address'}
                  value={this.state.tmpSendBrochureEmail}
                  onChangeText={text =>
                    this.setState({ tmpSendBrochureEmail: text })
                  }
                />
                <Picker
                  style={{
                    width: 300,
                    marginBottom: 15,
                    paddingLeft: 10,
                  }}
                  selectedValue={this.state.selectedSendBrochureEmail}
                  onValueChange={(itemValue, itemIndex) => {
                    if (itemValue !== '-1') {
                      this.setState({
                        tmpSendBrochureEmail:
                          this.state.sortedEmails[itemIndex - 1].email,
                      });
                    }
                  }}>
                  <Picker.Item
                    label={i18n.t('contact_s.contact_list') + ' :'}
                    value="-1"
                  />
                  {this.state.sortedEmails.map((item, index) => {
                    return (
                      <Picker.Item
                        label={item.email}
                        value={index}
                        key={item.id.toString()}
                      />
                    );
                  })}
                </Picker>
                <TextInput
                  style={styles.txtSendBrochure}
                  placeholder={i18n.t('global.subject')}
                  value={this.state.tmpSendBrochureSubject}
                  onChangeText={text =>
                    this.setState({ tmpSendBrochureSubject: text })
                  }
                />
                <TextInput
                  style={styles.textAreaSendBrochure}
                  placeholder={i18n.t('global.message')}
                  value={this.state.tmpSendBrochureMessage}
                  multiline={true}
                  underlineColorAndroid="transparent"
                  onChangeText={text =>
                    this.setState({ tmpSendBrochureMessage: text })
                  }
                />
                <Picker
                  style={{
                    width: 300,
                    marginBottom: 15,
                    paddingLeft: 10,
                  }}
                  selectedValue={this.state.selectedDocument}
                  onValueChange={(itemValue, itemIndex) => {
                    if (
                      itemValue !== '-1' &&
                      this.state.sendDocumentList.length < 8
                    ) {
                      let tmp = this.state.sendDocumentList;
                      const toPush = this.state.sortedDocuments[itemIndex - 1];
                      const test = this.state.sendDocumentList.filter(
                        item => item.id === toPush.id,
                      );
                      if (test.length === 0) {
                        tmp.push(toPush);
                        this.setState({
                          sendDocumentList: tmp,
                        });
                      }
                    }
                  }}>
                  <Picker.Item
                    label={i18n.t('contact_s.documents_list') + ' :'}
                    value="-1"
                  />
                  {this.state.sortedDocuments.map((item, index) => {
                    return (
                      <Picker.Item
                        label={
                          item.title + ' (' + item.type.toUpperCase() + ')'
                        }
                        value={index}
                        key={item.id.toString()}
                      />
                    );
                  })}
                </Picker>
              </View>
              <View
                style={{
                  flex: 1,
                  borderWidth: 1,
                  borderColor: 'lightgrey',
                  alignItems: 'center',
                  justifyContent: 'center',
                  width: 600,
                }}>
                {this.state.sendDocumentList.map((item, index) => {
                  return (
                    <TouchableOpacity
                      key={index}
                      onPress={() => {
                        let tmp = this.state.sendDocumentList;
                        tmp.splice(this.props.documents[index], 1);
                        this.setState({
                          sendDocumentList: tmp,
                        });
                      }}>
                      <View
                        style={{
                          borderWidth: 1,
                          borderColor: 'lightgrey',
                          padding: 5,
                          margin: 5,
                          borderRadius: 5,
                        }}>
                        <Text>
                          {item.title} ({item.type.toUpperCase()}){' '}
                          <FontAwesome5 name="minus" size={15} />
                        </Text>
                      </View>
                    </TouchableOpacity>
                  );
                })}
              </View>
            </View>
            <View
              style={{
                flexDirection: 'row',
                justifyContent: 'space-evenly',
                alignItems: 'center',
                width: 600,
                marginTop: 15,
              }}>
              <Button
                color={this.props.mainColor}
                title={i18n.t('global.cancel')}
                onPress={() =>
                  this.setState({
                    showSendBrochure: false,
                    tmpSendBrochureEmail: '',
                    tmpSendBrochureSubject: '',
                    tmpSendBrochureMessage: '',
                    selectedSendBrochureEmail: -1,
                    selectedDocument: -1,
                    sendDocumentList: [],
                  })
                }
              />
              <Button
                title={i18n.t('global.send')}
                onPress={() => this.sendBrochure()}
                color={this.props.mainColor}
              />
            </View>
          </View>
        </Overlay>
      </View>
    );
  }
}

export default connect(mapStateToProps, mapDispatchToProps)(ContactScreen);