import React from 'react';
import {
    View,
    Button,
    FlatList,
    Text,
    TouchableOpacity,
    Alert,
    TextInput,
} 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';
// 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.app.users,
        contacts: state.app.contacts,
        documents: state.app.documents,
        currentUser: state.app.currentUser,
    };
}

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.dispatch({ type: 'SEND_BROCHURE', data: 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.dispatch({ type: 'UPDATE_CONTACT', data: 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,
        });
    }

    deleteContact(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.dispatch({ type: 'DELETE_CONTACT', data: 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}>
                        {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.deleteContact(item.id);
                        }}>
                        <FontAwesome5 name="trash" size={20} color={'#ea4f52'} />
                    </TouchableOpacity>
                    <TouchableOpacity
                        style={styles.button}
                        onPress={() => {
                            this.setState({
                                showTransferContact: true,
                                contactToTransfer: item,
                            });
                        }}>
                        <FontAwesome5 name="paper-plane" size={20} color={'#ea4f52'} />
                    </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}>{i18n.t('global.name')} <FontAwesome5 name={'sort'} /></Text>
                </TouchableOpacity>
                <TouchableOpacity onPress={() => {
                    this.sortContacts('company');
                }}>
                    <Text style={styles.clickable}>{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]; });

        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={'#ea4f52'}
                        title={i18n.t('global.add')}
                        onPress={() =>
                            this.props.navigation.navigate('ContactDetailsScreen', {
                                action: 'add',
                            })
                        }
                    />
                    <Button
                        color={'#ea4f52'}
                        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} 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={'#ea4f52'}
                                title={i18n.t('global.cancel')}
                                onPress={() => this.setState({ showTransferContact: false })}
                            />
                            <Button
                                color={'#ea4f52'}
                                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
                                            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={'#ea4f52'}
                                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={'#ea4f52'} />
                        </View>
                    </View>
                </Overlay>
            </View>
        );
    }
}

export default connect(mapStateToProps)(ContactScreen);