import React, { Component } from 'react';
import _ from 'lodash';
import { connect } from 'react-redux';
import PropTypes from 'prop-types';
import { submit, isSubmitting } from 'redux-form';
import { View } from 'react-native';
import { Dialogue } from 'nixplay-ui-kit';
import { ModalForm } from '~comp/Forms/modalForm';

import i18n from '~/locale/i18n';

import { DELETE_ACTIVITY_PHOTO } from '~/store/actionTypes';

export class FriendActivitiesActions extends Component {
	static propTypes = {
		actions: PropTypes.array,
		route: PropTypes.string.isRequired,
		event: PropTypes.string.isRequired,
		toastError: PropTypes.func.isRequired,
	}

	static defaultProps = {
		actions: [
			DELETE_ACTIVITY_PHOTO,
		],
	}

	constructor(props) {
		super(props);

		this.state = {
			payload: {},
			onActionSuccess: () => {},
		};

		this.dialogue = this.dialogue.bind(this);
		this.closeAction = this.closeAction.bind(this);
		this.submitDeletePhoto = this.submitDeletePhoto.bind(this);
		this.actionExists = this.actionExists.bind(this);
	}

	onSubmitFail = (errors) => {
		const { _error: error } = errors;
		this.props.toastError({
			text: typeof error.toString === 'function' ? error.toString() : error,
		});
	};

	dialogue(action) {
		switch (action) {
			case DELETE_ACTIVITY_PHOTO:
				return this.deletePhotoDialog;
			default:
				return this.modalNameForm;
		}
	}

	doAction(action, payload, onActionSuccess) {
		if (this.props.actions.indexOf(action) < 0) return;
		this.setState({
			payload,
			selectedAction: action,
			onActionSuccess,
		}, () => {
			this.dialogue(action).open();
		});
	}

	closeAction(callback) {
		this.dialogue(this.state.selectedAction).close();
		this.setState({
			payload: {},
			onActionSuccess: () => {},
		}, () => {
			if (typeof callback === 'function') callback();
		});
	}

	submitDeletePhoto(values, dispatch) {
		return new Promise((resolve, reject) => {
			dispatch({
				type: DELETE_ACTIVITY_PHOTO,
				payload: {
					s3Key: this.state.payload.s3Key,
					albumId: this.state.payload.albumId,
					timestamp: this.state.payload.timestamp,
					friend: this.state.payload.friend,
					resolve,
					reject,
				},
			});
		});
	}

	actionExists(actions) {
		return (_.intersection(this.props.actions, actions)).length > 0;
	}

	render() {
		let bodyMessage = '';
		let alertButton = 'common.delete';
		let alertTitle;
		let eventAction;
		if (this.props.event === 'deletePhoto') {
			eventAction = this.submitDeletePhoto;
			alertTitle = 'common.permanentDelete';
			bodyMessage = i18n.t('common.deletePermanentConfirmation');
			alertButton = 'common.delete';
		}
		return (
			<View>
				{this.actionExists([DELETE_ACTIVITY_PHOTO]) &&
				<ModalForm
					ref={(ref) => { this.deletePhotoDialog = ref; }}
					form={`${this.props.route}DeletePhotoForm`}
					onSubmit={eventAction}
					onSubmitSuccess={() => {
						this.closeAction(this.state.onActionSuccess);
					}}
					onSubmitFail={(errors) => {
						this.onSubmitFail(errors);
						this.deletePhotoDialog.reset();
						this.closeAction(this.state.onActionSuccess);
					}}
					onCancel={this.closeAction}
					submitText={i18n.t(alertButton)}
					submitColor="red"
				>
					<Dialogue.Title>{i18n.t(alertTitle)}</Dialogue.Title>
					<Dialogue.Description>{bodyMessage}</Dialogue.Description>
				</ModalForm>}
			</View>
		);
	}
}

const mapStateToProps = (state, ownProps) => {
	const { route, event } = ownProps;
	return {
		deleteFormMeta: {
			submitting: isSubmitting(`${route}DeleteForm`)(state),
		},
		event,
	};
};

const mapActionsToProps = (dispatch, ownProps) => {
	const { route } = ownProps;
	return {
		submitDeleteForm() {
			dispatch(submit(`${route}DeleteForm`));
		},
	};
};


export default connect(
	mapStateToProps,
	mapActionsToProps,
	null,
	{ forwardRef: true },
)(FriendActivitiesActions);
