import { Component, OnDestroy, OnInit } from '@angular/core';
import { ActivatedRoute, Router } from '@angular/router';
import { Subscription } from 'rxjs';
import { Poll } from '../../core/models/poll.model';
import { ModalService } from '../../core/services/modal.service';
import { PollService } from '../../core/services/poll.service';
import { DateService } from '../../core/services/date.service';
import { PollUtilities } from '../old-stuff/config/PollUtilities';
import { Comment } from '../../core/models/comment.model';
import { StorageService } from '../../core/services/storage.service';
import { ApiService } from '../../core/services/api.service';
import { Stack } from '../../core/models/stack.model';

@Component({
	selector: 'app-consultation',
	templateUrl: './consultation.component.html',
	styleUrls: ['./consultation.component.scss'],
})
export class ConsultationComponent implements OnInit, OnDestroy {
	public isCompactMode = true;
	public poll: Poll;
	public pollSlug: string;
	public passHash: string;
	public fetching = true;
	public isArchived: boolean;

	public myVoteStack: any = {
		id: '',
	};
	public myTempVoteStack: any = {
		id: '',
	};
	private routeSubscription: Subscription;

	constructor(
		private router: Router,
		private utils: PollUtilities,
		private _Activatedroute: ActivatedRoute,
		public storageService: StorageService,
		public api: ApiService,
		public pollService: PollService,
		public dateService: DateService,
		private modalService: ModalService
	) {}

	ngOnInit(): void {
		console.log('constultation de poll');
		this.pollService.poll.subscribe((newpoll: Poll) => {
			this.poll = newpoll;
			if (newpoll) {
				this.isArchived = new Date(newpoll.expiracy_date) < new Date();
				this.poll.is_archived = this.isArchived;
			}
		});

		this._Activatedroute.paramMap.subscribe((params) => {
			console.log('params', params);
			this.pollSlug = params.get('slug');
			this.passHash = params.get('hash');
			console.log('hash, slug', this.passHash, this.pollSlug);
			if (this.passHash) {
				this.pollService.loadPollBySlugWithPasswordHash(this.pollSlug, this.passHash);
			} else {
				this.pollService.loadPollBySlug(this.pollSlug).then((resp) => {
					console.log('resp', resp);
					this.fetching = false;
				});
			}
		});
	}

	ngOnDestroy(): void {
		if (this.routeSubscription) {
			this.routeSubscription.unsubscribe();
		}
	}

	updateVote(votestack: Stack) {
		alert('TODO');
	}

	addVoteStack() {
		this.api.sendVoteStackOfPoll(this.poll, this.storageService.vote_stack).subscribe((resp) => {
			console.log('resp', resp);

			this.api.getPollBySlug(this.poll.custom_url);
		});
	}

	/**
	 * export all the poll data available to the public as a CSV single file
	 */
	exportCSV() {
		let rows = [];
		const now = new Date();
		const headers = [
			['export de sondage Framadate ', this.poll.custom_url],
			['le', now.toISOString()],
			[this.poll.id, this.poll.title, this.poll.custom_url, this.poll.creation_date],
			['pseudo'],
		];

		const listOfChoices = ['choices : '];
		this.poll.choices.map((choice) => {
			listOfChoices.push(choice.name);
		});
		listOfChoices.push('pseudo');

		this.poll.stacks.map((voteStack) => {
			const voteStackInArray = [voteStack.pseudo];
			const keysVotes = Object.keys(voteStack.votes);

			keysVotes.map((id) => {
				voteStackInArray.push(voteStack.votes[id].value ? voteStack.votes[id].value : '');
			});
			rows.push(voteStackInArray);
		});
		const headersComments = [['comments'], ['pseudo', 'text', 'creation_date']];
		const comments = [];
		this.poll.comments.map((item: Comment) => {
			comments.push([item.pseudo, item.text, new Date(item.created_at), '\n']);
		});
		headers.push(listOfChoices);
		rows = [headers, listOfChoices, rows, headersComments, comments];

		const convertedCsv = rows
			.map((elem) => {
				console.log('elem', elem);
				return elem
					.map((item) => {
						console.log('item', item);
						if (typeof item === typeof Array) {
							return item.join('\n');
						}
						return item;
					})
					.join('\n');
			})
			.join('\n');
		console.log('rows', rows);
		console.log('convertedCsv', convertedCsv);

		const csvContent = 'data:text/csv;charset=utf-8,' + convertedCsv;
		console.log('csvContent', csvContent);
		const encodedUri = encodeURI(csvContent);
		const link = document.createElement('a');
		link.setAttribute('href', encodedUri);
		const exportFileName =
			(this.poll.urlPublic ? this.poll.urlPublic : this.utils.makeSlug(this.poll)) +
			'_export_' +
			new Date() +
			'.csv';
		link.setAttribute('download', exportFileName);
		document.body.appendChild(link); // Required for FF
		link.click(); // This will download the data file named "my_data.csv".
	}

	exportJson() {
		this.download('export_poll_' + this.pollSlug + '.json', JSON.stringify(this.poll));
	}

	download(filename, text) {
		const element = document.createElement('a');
		element.setAttribute('href', 'data:text/plain;charset=utf-8,' + encodeURIComponent(text));
		element.setAttribute('download', filename);

		element.style.display = 'none';
		document.body.appendChild(element);

		element.click();

		document.body.removeChild(element);
	}

	duplicate() {
		alert('TODO');
	}

	print() {
		alert('TODO');
	}
}