import React, { Component } from 'react';
import { connect } from 'react-redux';
import { dequal } from 'dequal';
import { Observable, Subscription } from 'rxjs';
import { Dispatch } from 'redux';
import { StackNavigationProp } from '@react-navigation/stack';

import * as HeaderButton from '../../containers/HeaderButton';
import database from '../../lib/database';
import { getUserSelector } from '../../selectors/login';
import { events, logEvent } from '../../utils/log';
import { isTeamRoom } from '../../utils/room';
import { IApplicationState, SubscriptionType, TMessageModel, TSubscriptionModel } from '../../definitions';
import { ChatsStackParamList } from '../../stacks/types';
import { withActionSheet } from '../../containers/ActionSheet';
import i18n from '../../i18n';
import { showConfirmationAlert, showErrorAlert } from '../../utils/info';
import { closeRoom } from '../../actions/room';
import RocketChat from '../../lib/rocketchat';

interface IRightButtonsProps {
	userId?: string;
	threadsEnabled: boolean;
	rid: string;
	t: string;
	tmid?: string;
	teamId?: string;
	isMasterDetail: boolean;
	toggleFollowThread: Function;
	joined: boolean;
	status?: string;
	dispatch: Dispatch;
	encrypted?: boolean;
	showActionSheet: Function; // TODO: Change to proper type
	transferLivechatGuestPermission: boolean;
	navigation: StackNavigationProp<ChatsStackParamList, 'RoomView'>;
}

interface IRigthButtonsState {
	isFollowingThread: boolean;
	tunread: string[];
	tunreadUser: string[];
	tunreadGroup: string[];
	canReturnQueue: boolean;
	canForwardGuest: boolean;
}

class RightButtonsContainer extends Component<IRightButtonsProps, IRigthButtonsState> {
	private threadSubscription?: Subscription;
	private subSubscription?: Subscription;

	constructor(props: IRightButtonsProps) {
		super(props);
		this.state = {
			isFollowingThread: true,
			tunread: [],
			tunreadUser: [],
			tunreadGroup: [],
			canReturnQueue: false,
			canForwardGuest: false
		};
	}

	async componentDidMount() {
		const { tmid, rid, t } = this.props;
		const db = database.active;
		if (tmid) {
			try {
				const threadRecord = await db.get('messages').find(tmid);
				this.observeThread(threadRecord);
			} catch (e) {
				console.log("Can't find message to observe.");
			}
		}
		if (rid) {
			try {
				const subCollection = db.get('subscriptions');
				const subRecord = await subCollection.find(rid);
				this.observeSubscription(subRecord);
			} catch (e) {
				console.log("Can't find subscription to observe.");
			}
		}
		if (t === 'l') {
			const canReturnQueue = await this.canReturnQueue();
			const canForwardGuest = await this.canForwardGuest();
			this.setState({ canReturnQueue, canForwardGuest });
		}
	}

	componentDidUpdate(prevProps: IRightButtonsProps) {
		const { status } = this.props;
		if (prevProps.status !== status) {
			return false;
		}
	}

	shouldComponentUpdate(nextProps: IRightButtonsProps, nextState: IRigthButtonsState) {
		const { isFollowingThread, tunread, tunreadUser, tunreadGroup } = this.state;
		const { teamId, status, joined } = this.props;
		if (nextProps.teamId !== teamId) {
			return true;
		}
		if (nextProps.status !== status) {
			return true;
		}
		if (nextProps.joined !== joined) {
			return true;
		}
		if (nextState.isFollowingThread !== isFollowingThread) {
			return true;
		}
		if (!dequal(nextState.tunread, tunread)) {
			return true;
		}
		if (!dequal(nextState.tunreadUser, tunreadUser)) {
			return true;
		}
		if (!dequal(nextState.tunreadGroup, tunreadGroup)) {
			return true;
		}
		return false;
	}

	componentWillUnmount() {
		if (this.threadSubscription && this.threadSubscription.unsubscribe) {
			this.threadSubscription.unsubscribe();
		}
		if (this.subSubscription && this.subSubscription.unsubscribe) {
			this.subSubscription.unsubscribe();
		}
	}

	observeThread = (threadRecord: TMessageModel) => {
		const threadObservable: Observable<TMessageModel> = threadRecord.observe();
		this.threadSubscription = threadObservable.subscribe(thread => this.updateThread(thread));
	};

	updateThread = (thread: TMessageModel) => {
		const { userId } = this.props;
		this.setState({
			isFollowingThread: (thread.replies && !!thread.replies.find(t => t === userId)) ?? false
		});
	};

	observeSubscription = (subRecord: TSubscriptionModel) => {
		const subObservable = subRecord.observe();
		this.subSubscription = subObservable.subscribe(sub => {
			this.updateSubscription(sub);
		});
	};

	updateSubscription = (sub: TSubscriptionModel) => {
		this.setState({
			tunread: sub?.tunread ?? [],
			tunreadUser: sub?.tunreadUser ?? [],
			tunreadGroup: sub?.tunreadGroup ?? []
		});
	};

	goTeamChannels = () => {
		logEvent(events.ROOM_GO_TEAM_CHANNELS);
		const { navigation, isMasterDetail, teamId } = this.props;
		if (!teamId) {
			return;
		}
		if (isMasterDetail) {
			// @ts-ignore TODO: find a way to make this work
			navigation.navigate('ModalStackNavigator', {
				screen: 'TeamChannelsView',
				params: { teamId }
			});
		} else {
			navigation.navigate('TeamChannelsView', { teamId });
		}
	};

	goThreadsView = () => {
		logEvent(events.ROOM_GO_THREADS);
		const { rid, t, navigation, isMasterDetail } = this.props;
		if (!rid) {
			return;
		}
		if (isMasterDetail) {
			// @ts-ignore TODO: find a way to make this work
			navigation.navigate('ModalStackNavigator', { screen: 'ThreadMessagesView', params: { rid, t } });
		} else {
			navigation.navigate('ThreadMessagesView', { rid, t: t as SubscriptionType });
		}
	};

	canForwardGuest = async () => {
		const { transferLivechatGuestPermission, rid } = this.props;
		const permissions = await RocketChat.hasPermission([transferLivechatGuestPermission], rid);
		return permissions[0];
	};

	canReturnQueue = async () => {
		try {
			const { returnQueue } = await RocketChat.getRoutingConfig();
			return returnQueue;
		} catch {
			return false;
		}
	};

	returnLivechat = () => {
		const { rid } = this.props;
		showConfirmationAlert({
			message: i18n.t('Would_you_like_to_return_the_inquiry'),
			confirmationText: i18n.t('Yes'),
			onPress: async () => {
				try {
					await RocketChat.returnLivechat(rid);
				} catch (e: any) {
					showErrorAlert(e.reason, i18n.t('Oops'));
				}
			}
		});
	};

	closeLivechat = () => {
		const { dispatch, rid } = this.props;

		dispatch(closeRoom(rid));
	};

	showMoreActions = () => {
		logEvent(events.ROOM_SHOW_MORE_ACTIONS);
		const { showActionSheet, rid, navigation } = this.props;
		const { canReturnQueue, canForwardGuest } = this.state;

		const options = [
			canForwardGuest && {
				title: i18n.t('Forward_Chat'),
				icon: 'chat-forward',
				onPress: () => navigation.navigate('ForwardLivechatView', { rid })
			},
			canReturnQueue && {
				title: i18n.t('Return_to_waiting_line'),
				icon: 'move-to-the-queue',
				onPress: () => this.returnLivechat()
			},
			{
				title: i18n.t('Close'),
				icon: 'chat-close',
				onPress: () => this.closeLivechat(),
				danger: true
			}
		];

		showActionSheet({ options });
	};

	goSearchView = () => {
		logEvent(events.ROOM_GO_SEARCH);
		const { rid, t, navigation, isMasterDetail, encrypted } = this.props;
		if (!rid) {
			return;
		}
		if (isMasterDetail) {
			// @ts-ignore TODO: find a way to make this work
			navigation.navigate('ModalStackNavigator', {
				screen: 'SearchMessagesView',
				params: { rid, showCloseModal: true, encrypted }
			});
		} else {
			navigation.navigate('SearchMessagesView', { rid, t: t as SubscriptionType, encrypted });
		}
	};

	toggleFollowThread = () => {
		logEvent(events.ROOM_TOGGLE_FOLLOW_THREADS);
		const { isFollowingThread } = this.state;
		const { toggleFollowThread } = this.props;
		if (toggleFollowThread) {
			toggleFollowThread(isFollowingThread);
		}
	};

	render() {
		const { isFollowingThread, tunread, tunreadUser, tunreadGroup } = this.state;
		const { t, tmid, threadsEnabled, teamId, joined, status } = this.props;
		const isOmnichannelPreview = joined && status !== 'queued';

		if (t === 'l') {
			if (isOmnichannelPreview) {
				return (
					<HeaderButton.Container>
						<HeaderButton.Item iconName='kebab' onPress={this.showMoreActions} testID='room-view-header-omnichannel-kebab' />
					</HeaderButton.Container>
				);
			}
			return null;
		}
		if (tmid) {
			return (
				<HeaderButton.Container>
					<HeaderButton.Item
						iconName={isFollowingThread ? 'notification' : 'notification-disabled'}
						onPress={this.toggleFollowThread}
						testID={isFollowingThread ? 'room-view-header-unfollow' : 'room-view-header-follow'}
					/>
				</HeaderButton.Container>
			);
		}
		return (
			<HeaderButton.Container>
				{isTeamRoom({ teamId, joined }) ? (
					<HeaderButton.Item iconName='channel-public' onPress={this.goTeamChannels} testID='room-view-header-team-channels' />
				) : null}
				{threadsEnabled ? (
					<HeaderButton.Item
						iconName='threads'
						onPress={this.goThreadsView}
						testID='room-view-header-threads'
						badge={() => <HeaderButton.Badge tunread={tunread} tunreadUser={tunreadUser} tunreadGroup={tunreadGroup} />}
					/>
				) : null}
				<HeaderButton.Item iconName='search' onPress={this.goSearchView} testID='room-view-search' />
			</HeaderButton.Container>
		);
	}
}

const mapStateToProps = (state: IApplicationState) => ({
	userId: getUserSelector(state).id,
	threadsEnabled: state.settings.Threads_enabled as boolean,
	isMasterDetail: state.app.isMasterDetail,
	transferLivechatGuestPermission: state.permissions['transfer-livechat-guest']
});

export default connect(mapStateToProps)(withActionSheet(RightButtonsContainer));