import { Post, SelectPostFromOffers } from '@posts';
import { ActionDispatcher, AppState } from '@store/models';
import { mainStyles } from '@ui';
import { HTMLParagraph } from '@ui/components/HTMLParagraph';
import HeaderIcon from '@ui/components/HeaderIcon';
import Loader from '@ui/components/Loader';
import { GLOBAL_COLORS, GLOBAL_ICONS } from '@ui/const';
import * as React from 'react';
import { LayoutAnimation, Platform, StyleSheet, Text, UIManager, View } from 'react-native';
import SafeAreaView from 'react-native-safe-area-view';
import { NavigationScreenProp } from 'react-navigation';
import { connect } from 'react-redux';
import { Dispatch } from 'redux';

import { BackToFilterOffer, UpdateFilterOffers } from '../actions';
import ChoicesList from '../components/ChoicesList';
import { Offer } from '../models';
import { getOffersList, isOffersListLoading } from '../selectors';

interface Props {
    back: ActionDispatcher<BackToFilterOffer>;
    data: Offer[];
    isLoading: boolean;
    navigation: NavigationScreenProp<any, any>;
    selectPost: ActionDispatcher<SelectPostFromOffers>;
    update: ActionDispatcher<UpdateFilterOffers>;
}

class FilterView extends React.Component<Props> {
    constructor(props: Props) {
        super(props);

        if (Platform.OS === 'android') {
            UIManager.setLayoutAnimationEnabledExperimental(true);
        }
    }

    backButtonHandler = () => {
        this.props.navigation.goBack();
    };

    selectCategory = (offer: Offer) => {
        const { selectPost, data, update } = this.props;

        if (offer.title) {
            selectPost(offer);
        } else {
            LayoutAnimation.configureNext(LayoutAnimation.Presets.easeInEaseOut);

            const updatedOffers = [...data, offer];
            const indexToUpdate = updatedOffers.length - 2;

            updatedOffers[indexToUpdate] = {
                ...updatedOffers[indexToUpdate],
                label: offer.name,
            };

            update(updatedOffers);
        }
    };

    backToPrevious = (offer: Offer) => {
        LayoutAnimation.configureNext(LayoutAnimation.Presets.easeInEaseOut);
        this.props.back(offer);
    };

    _renderHeader = (offer: Offer | undefined): JSX.Element | null =>
        offer ? (
            <View style={styles.headerContainer}>
                <Text style={styles.header}>{offer.header}</Text>
                <HTMLParagraph
                    primaryColor={GLOBAL_COLORS.white}
                    secondaryColor={GLOBAL_COLORS.black}
                    content={offer.description}
                    font={styles.desc}
                />
            </View>
        ) : null;

    _renderChoicesContainer = (data: Offer[]): JSX.Element | null =>
        data ? (
            <ChoicesList
                back={this.backToPrevious}
                data={data}
                latest={data[data.length - 1]}
                select={this.selectCategory}
            />
        ) : null;

    _renderBackButton = (): JSX.Element => (
        <View style={mainStyles.headerIcon}>
            <HeaderIcon icon={GLOBAL_ICONS.times} onPress={this.backButtonHandler} />
        </View>
    );

    render(): JSX.Element {
        const { data, isLoading } = this.props;

        return (
            <View style={styles.background}>
                <SafeAreaView style={mainStyles.mainContainer}>
                    <Loader isLoading={isLoading} />
                    {this._renderHeader(data ? data[data.length - 1] : undefined)}
                    {this._renderChoicesContainer(data)}
                    {this._renderBackButton()}
                </SafeAreaView>
            </View>
        );
    }
}

const styles = StyleSheet.create({
    background: {
        backgroundColor: GLOBAL_COLORS.blue,
        flex: 1,
    },
    desc: {
        color: GLOBAL_COLORS.white,
        fontSize: 15,
        fontWeight: '400',
    },
    header: {
        color: GLOBAL_COLORS.white,
        fontSize: 28,
        fontWeight: 'bold',
        letterSpacing: 1.4,
        marginBottom: 25,
    },
    headerContainer: {
        paddingHorizontal: 25,
        paddingTop: 60,
        width: '100%',
    },
});

const mapStateToProps = (state: AppState) => ({
    data: getOffersList(state),
    isLoading: isOffersListLoading(state),
});

const mapDispatchToProps = (dispatch: Dispatch) => ({
    back: (offer: Offer) => dispatch(new BackToFilterOffer(offer)),
    selectPost: (post: Post) => dispatch(new SelectPostFromOffers(post)),
    update: (offers: Offer[]) => dispatch(new UpdateFilterOffers(offers)),
});

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