// Copyright (c) 2015-present Mattermost, Inc. All Rights Reserved.
// See LICENSE.txt for license information.

import React, {PureComponent} from 'react';
import PropTypes from 'prop-types';
import {Animated, Dimensions, NavigatorIOS, StyleSheet, View} from 'react-native';
import {intlShape} from 'react-intl';

import {Preferences} from 'mattermost-redux/constants';

import initialState from 'app/initial_state';
import mattermostBucket from 'app/mattermost_bucket';

import ExtensionPost from './extension_post';

const {View: AnimatedView} = Animated;

export default class SharedApp extends PureComponent {
    static propTypes = {
        appGroupId: PropTypes.string.isRequired,
        onClose: PropTypes.func.isRequired,
    };

    static contextTypes = {
        intl: intlShape,
    };

    constructor(props) {
        super(props);

        const {height, width} = Dimensions.get('window');
        const isLandscape = width > height;

        this.state = {
            backdropOpacity: new Animated.Value(0),
            containerOpacity: new Animated.Value(0),
            isLandscape,
        };

        mattermostBucket.readFromFile('entities', props.appGroupId).then((value) => {
            this.entities = value || initialState;
            this.setState({init: true});
        });
    }

    componentDidMount() {
        Animated.parallel([
            Animated.timing(this.state.backdropOpacity, {
                toValue: 0.5,
                duration: 100,
            }),
            Animated.timing(this.state.containerOpacity, {
                toValue: 1,
                duration: 250,
            }),
        ]).start();
    }

    onLayout = (e) => {
        const {height, width} = e.nativeEvent.layout;
        const isLandscape = width > height;
        if (this.state.isLandscape !== isLandscape) {
            this.setState({isLandscape});
        }
    };

    userIsLoggedIn = () => {
        if (
            this.entities &&
            this.entities.general &&
            this.entities.general.credentials &&
            this.entities.general.credentials.token &&
            this.entities.general.credentials.url
        ) {
            return true;
        }

        return false;
    };

    render() {
        const {init, isLandscape} = this.state;
        const {intl} = this.context;
        const {formatMessage} = intl;

        if (!init) {
            return null;
        }

        const title = formatMessage({
            id: 'mobile.extension.title',
            defaultMessage: 'Share in Mattermost',
        });

        const theme = Preferences.THEMES.default;

        const initialRoute = {
            component: ExtensionPost,
            title,
            passProps: {
                authenticated: this.userIsLoggedIn(),
                entities: this.entities,
                onClose: this.props.onClose,
                isLandscape,
                theme,
                title,
            },
            wrapperStyle: {
                borderRadius: 10,
                backgroundColor: theme.centerChannelBg,
            },
        };

        return (
            <View
                style={styles.flex}
                onLayout={this.onLayout}
            >
                <AnimatedView style={[styles.backdrop, {opacity: this.state.backdropOpacity}]}/>
                <View style={styles.wrapper}>
                    <AnimatedView
                        style={[
                            styles.container,
                            {
                                opacity: this.state.containerOpacity,
                                height: this.userIsLoggedIn() ? 250 : 130,
                                top: isLandscape ? 20 : 65,
                            },
                        ]}
                    >
                        <NavigatorIOS
                            initialRoute={initialRoute}
                            style={styles.flex}
                            navigationBarHidden={true}
                        />
                    </AnimatedView>
                </View>
            </View>
        );
    }
}

const styles = StyleSheet.create({
    flex: {
        flex: 1,
    },
    backdrop: {
        position: 'absolute',
        flex: 1,
        backgroundColor: '#000',
        height: '100%',
        width: '100%',
    },
    wrapper: {
        flex: 1,
        marginHorizontal: 20,
    },
    container: {
        backgroundColor: 'white',
        borderRadius: 10,
        position: 'relative',
        width: '100%',
    },
});