import React, { Component } from 'react';
import { withRouter, Prompt } from "react-router-dom";
import { HomeRounded as HomeRoundedIcon, UndoRounded as TuneRoundedIcon } from "@material-ui/icons";
import NavBar from "./NavBar";
import Button from "./Button";
import Footer from "./Footer";
import LinkButton from "./LinkButton";
import AcceptDialog from "./AcceptDialog";
import Checkbox from '@material-ui/core/Checkbox';

const emptySetData = {
	title: "",
	public: false,
	text: "",
	vocabPairs: [],
	vocabChanged: false,
	incompletePairFound: false,
};

export default withRouter(class BulkCreateSets extends Component {
	constructor(props) {
		super(props);
		this.state = {
			user: props.user,
			db: props.db,
			loading: false,
			canSave: false,
			sets: [
				{
					...emptySetData
				}
			],
			navbarItems: [
				{
					type: "link",
					link: "/",
					icon: <HomeRoundedIcon />,
					hideTextMobile: true,
				}
			],
			termDefSeparator: "\\n",
			pairSeparator: "\\n",
			changesMade: false,
			showErrorDialog: false,
		};

		let isMounted = true;
		Object.defineProperty(this, "isMounted", {
			get: () => isMounted,
			set: (value) => isMounted = value,
		});
	}

	setState = (state, callback = null) => {
		if (this.isMounted) super.setState(state, callback);
	}

	alertLeavingWithoutSaving = (e = null) => {
		if (this.state.changesMade) {
			var confirmationMessage = "Are you sure you want to leave? You will lose any unsaved changes.";
	
			(e || window.event).returnValue = confirmationMessage; //Gecko + IE
			return confirmationMessage; //Gecko + Webkit, Safari, Chrome etc.
		}
		return "";
	}

	async componentDidMount() {
		window.addEventListener("beforeunload", this.alertLeavingWithoutSaving);

		document.title = "Bulk Create Sets | Parandum";
		this.props.logEvent("page_view");

		this.firstSetNameInput.focus();
		this.props.page.load();
	}

	componentWillUnmount = () => {
		window.removeEventListener('beforeunload', this.alertLeavingWithoutSaving);
		this.isMounted = false;
		this.props.page.unload();
	}

	stopLoading = () => {
		this.setState({
			canSave: false,
			loading: false,
		});
	}

	cleanseVocabString = (item, otherPatterns=[]) => {
		let newItem = item;
		otherPatterns.map(pattern => newItem = newItem.replace(new RegExp(pattern, "g"), ""));
		const chars = /[\p{P}\p{S}\n ]+/ug;
		return newItem.replace(chars, "");
	}

	removeNewLines = (item) => item.replace(/[\n]+/ug, "")

	handleSetDataChange = () => {
		const sets = [...this.state.sets];
		if (sets[this.state.sets.length - 1].text !== "" || sets[this.state.sets.length - 1].title !== "") {
			sets.push({...emptySetData});
			this.setState({
				sets,
				changesMade: true,
			});
		} else if (sets[this.state.sets.length - 2].text === "" && sets[this.state.sets.length - 2].title === "") {
			sets.pop();
			this.setState({
				sets,
				changesMade: true,
			});
		}
	}

	checkIfCanSave = async () => {
		let anySetIncomplete = this.state.termDefSeparator === "" || this.state.pairSeparator === "";
		let newSets;
		if (!anySetIncomplete) {
			let sets = [...this.state.sets];
			const pairSeparator = this.state.pairSeparator.replace("\\n","\n");
			const termDefSeparator = this.state.termDefSeparator.replace("\\n","\n");

			const setsWithVocab = sets.slice(0,-1).map(set => {
				let setIncomplete = this.cleanseVocabString(set.title) === "" || this.cleanseVocabString(set.text, [pairSeparator, termDefSeparator]) === "";
				if (setIncomplete) {
					anySetIncomplete = true;
					return {
						...set,
						vocabChanged: false,
						setIncomplete,
					};
				}
				if (set.vocabChanged) {
					let vocabPairs = [];
					if (pairSeparator === termDefSeparator) {
						set.text.trim().split(pairSeparator).forEach((item, index, arr) => {
							if (index % 2 === 0) {
								let definition = "unknown";
								if (index === arr.length - 1 || this.cleanseVocabString(item, [pairSeparator, termDefSeparator]) === "" || this.cleanseVocabString(arr[index + 1], [pairSeparator, termDefSeparator]) === "") {
									anySetIncomplete = setIncomplete = true;
								}
								else {
									definition = arr[index + 1];
								}
								vocabPairs.push({
									term: item,
									definition,
									sound: false,
								});
							};
						});
					} else {
						vocabPairs = set.text.trim().split(pairSeparator)
							.map((pair) => {
								let [first, ...rest] = pair.split(termDefSeparator);
								if (rest.length <= 0 || this.cleanseVocabString(first, [pairSeparator, termDefSeparator]) === "" || this.cleanseVocabString(rest.join(termDefSeparator), [pairSeparator, termDefSeparator]) === "") {
									rest = "unknown";
									anySetIncomplete = setIncomplete = true;
								} else {
									rest = rest.join(termDefSeparator);
								}
								return {
									term: first,
									definition: rest,
									sound: false,
								};
							});
					}

					if (vocabPairs.length < 1) {
						anySetIncomplete = setIncomplete = true;
					}

					return {
						...set,
						vocabPairs,
						vocabChanged: false,
						setIncomplete,
					};
				}
				if (set.setIncomplete) {
					anySetIncomplete = true;
				}
				return set;
			});
			newSets = setsWithVocab.concat(sets[sets.length - 1]);
		} else {
			newSets = [...this.state.sets];
		}

		this.setState({
			sets: newSets,
			canSave: !anySetIncomplete,
			showErrorDialog: anySetIncomplete,
		}, () => {if (!anySetIncomplete) this.saveSets()});
	}

	onTermDefSeparatorInputChange = (event) => {
		this.setState({
			termDefSeparator: event.target.value,
		});
	}

	onPairSeparatorInputChange = (event) => {
		this.setState({
			pairSeparator: event.target.value,
		});
	}

	onSetTitleInputChange = (event, setIndex) => {
		let sets = [...this.state.sets];
		sets[setIndex].title = event.target.value;
		this.setState({
			sets,
		}, () => this.handleSetDataChange());
	}

	onPublicSetInputChange = (event, setIndex) => {
		let sets = [...this.state.sets];
		sets[setIndex].public = event.target.checked;
		this.setState({
			sets,
		});
	}

	onVocabInputChange = (event, setIndex) => {
		let sets = [...this.state.sets];
		sets[setIndex].text = event.target.value;
		sets[setIndex].vocabChanged = true;
		this.setState({
			sets,
		}, () => this.handleSetDataChange());
	}

	saveSets = async () => {
		if (this.state.canSave) {
			this.setState({
				loading: true,
				canSave: false,
			});

			const db = this.state.db;
			const setCollectionRef = db.collection("sets");

			let promises = [];

			this.state.sets.slice(0,-1).map(async (set) => {
				let setDocRef = setCollectionRef.doc();
				setDocRef.set({
					title: set.title,
					public: set.public,
					owner: this.state.user.uid,
					groups: [],
				}).then(() => {
					let vocabCollectionRef = setDocRef.collection("vocab");
			
					let batches = [db.batch()];

					set.vocabPairs.map((vocabPair, index) => {
						if (index % 248 === 0) {
							promises.push(batches[batches.length - 1].commit());
							batches.push(db.batch());
						}

						let vocabDocRef = vocabCollectionRef.doc()
						return batches[batches.length - 1].set(vocabDocRef, {
							term: this.removeNewLines(vocabPair.term),
							definition: this.removeNewLines(vocabPair.definition),
							sound: vocabPair.sound,
						});
					});
					
					if (!batches[batches.length - 1]._delegate._committed) promises.push(batches[batches.length - 1].commit().catch(() => null));
				});
			});

			Promise.all(promises).then(() => {
				this.stopLoading();
				this.props.history.push("/");
			}).catch((error) => {
				console.log("Couldn't create sets: " + error);
				this.stopLoading();
			});
		}
	}

	closeErrorDialog = () => {
		this.setState({
			showErrorDialog: false,
		})
	}

	render() {
		return (
			<div>
				<Prompt
					when={this.state.changesMade}
					message="Are you sure you want to leave? You will lose any unsaved changes."
				/>

				<NavBar items={this.state.navbarItems} />

				<main>
					<div className="page-header">
						<h1>Bulk Create Sets</h1>
						<LinkButton to="/create-set" icon={<TuneRoundedIcon/>}>Normal</LinkButton>
					</div>
					<div className="bulk-create-sets-section bulk-create-sets-header">
						<label>
							<input
								type="text"
								name="term-def-separator"
								onChange={this.onTermDefSeparatorInputChange}
								value={this.state.termDefSeparator}
								autoComplete="off"
								autoCapitalize="none"
								autoCorrect="off"
							/>
							<span>Term/definition separator</span>
						</label>
						<label>
							<input
								type="text"
								name="pair-separator"
								onChange={this.onPairSeparatorInputChange}
								value={this.state.pairSeparator}
								autoComplete="off"
								autoCapitalize="none"
								autoCorrect="off"
							/>
							<span>Pair separator</span>
						</label>
					</div>
					{
						this.state.sets.map((data, setIndex) => 
							<div className="bulk-create-sets-section" key={setIndex}>
								<div className="page-header">
									<h2>
										<input
											type="text"
											name={`set_${setIndex}_title`}
											onChange={(event) => this.onSetTitleInputChange(event, setIndex)}
											placeholder="Set Title"
											value={data.title}
											className="set-title-input"
											autoComplete="off"
											ref={(inputEl) => {if (setIndex === 0) this.firstSetNameInput = inputEl}}
										/>
									</h2>
								</div>
							
								<label>
									<Checkbox
										checked={data.public}
										onChange={(event) => this.onPublicSetInputChange(event, setIndex)}
										inputProps={{ 'aria-label': 'checkbox' }}
									/>
									<span>Public</span>
								</label>

								<div className="form create-set-vocab-list">

									<textarea
										name={`set_${setIndex}_vocab`}
										onChange={(event) => this.onVocabInputChange(event, setIndex)}
										value={data.text}
										autoComplete="off"
										autoCapitalize="none"
										autoCorrect="off"
										className="bulk-create-sets-text"
										placeholder="Vocabulary"
									/>
								</div>
							</div>
						)
					}

					<Button
						onClick={this.checkIfCanSave}
						loading={this.state.loading}
					>
						Save
					</Button>
					{
						this.state.showErrorDialog && <AcceptDialog acceptFunction={this.closeErrorDialog} message="Ensure all fields are filled in correctly"/>
					}
				</main>
			<Footer />
			</div>
		)
	}
})