// 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 {ScrollView, View} from 'react-native';
import {Navigation} from 'react-native-navigation';

import {paddingHorizontal as padding} from 'app/components/safe_area_view/iphone_x_spacing';
import FormattedText from 'app/components/formatted_text';
import StatusBar from 'app/components/status_bar';
import TextInputWithLocalizedPlaceholder from 'app/components/text_input_with_localized_placeholder';
import {
    changeOpacity,
    makeStyleSheetFromTheme,
    setNavigatorStyles,
    getKeyboardAppearanceFromTheme,
} from 'app/utils/theme';
import {popTopScreen} from 'app/actions/navigation';

export default class NotificationSettingsMentionsKeywords extends PureComponent {
    static propTypes = {
        componentId: PropTypes.string,
        keywords: PropTypes.string,
        onBack: PropTypes.func.isRequired,
        theme: PropTypes.object.isRequired,
        isLandscape: PropTypes.bool.isRequired,
    };

    constructor(props) {
        super(props);

        this.state = {
            keywords: props.keywords,
        };
    }

    componentDidMount() {
        this.navigationEventListener = Navigation.events().bindComponent(this);
    }

    componentDidUpdate(prevProps) {
        if (this.props.theme !== prevProps.theme) {
            setNavigatorStyles(this.props.componentId, this.props.theme);
        }
    }

    handleSubmit = () => {
        popTopScreen();
    };

    keywordsRef = (ref) => {
        this.keywordsInput = ref;
    };

    onKeywordsChangeText = (keywords) => {
        return this.setState({keywords});
    };

    componentDidDisappear() {
        this.props.onBack(this.state.keywords);
    }

    render() {
        const {theme, isLandscape} = this.props;
        const {keywords} = this.state;

        const style = getStyleSheet(theme);
        return (
            <View style={style.container}>
                <StatusBar/>
                <ScrollView
                    contentContainerStyle={style.wrapper}
                    alwaysBounceVertical={false}
                >
                    <View style={style.inputContainer}>
                        <TextInputWithLocalizedPlaceholder
                            autoFocus={true}
                            ref={this.keywordsRef}
                            value={keywords}
                            blurOnSubmit={true}
                            onChangeText={this.onKeywordsChangeText}
                            onSubmitEditing={this.handleSubmit}
                            multiline={true}
                            numberOfLines={1}
                            style={[style.input, padding(isLandscape)]}
                            autoCapitalize='none'
                            autoCorrect={false}
                            placeholder={{id: 'mobile.notification_settings_mentions.keywordsDescription', defaultMessage: 'Other words that trigger a mention'}}
                            placeholderTextColor={changeOpacity(theme.centerChannelColor, 0.4)}
                            returnKeyType='done'
                            keyboardAppearance={getKeyboardAppearanceFromTheme(theme)}
                        />
                    </View>
                    <View style={[style.helpContainer, padding(isLandscape)]}>
                        <FormattedText
                            id='mobile.notification_settings_mentions.keywordsHelp'
                            defaultMessage='Keywords are non-case sensitive and should be separated by a comma.'
                            style={style.help}
                        />
                    </View>
                </ScrollView>
            </View>
        );
    }
}

const getStyleSheet = makeStyleSheetFromTheme((theme) => {
    return {
        container: {
            flex: 1,
            backgroundColor: theme.centerChannelBg,
        },
        wrapper: {
            backgroundColor: changeOpacity(theme.centerChannelColor, 0.06),
            flex: 1,
            paddingTop: 35,
        },
        inputContainer: {
            borderTopWidth: 1,
            borderBottomWidth: 1,
            borderTopColor: changeOpacity(theme.centerChannelColor, 0.1),
            borderBottomColor: changeOpacity(theme.centerChannelColor, 0.1),
            backgroundColor: theme.centerChannelBg,
        },
        input: {
            color: theme.centerChannelColor,
            fontSize: 15,
            height: 150,
            paddingVertical: 10,
            paddingHorizontal: 15,
        },
        helpContainer: {
            marginTop: 10,
            paddingHorizontal: 15,
        },
        help: {
            color: changeOpacity(theme.centerChannelColor, 0.4),
            fontSize: 13,
        },
    };
});
