import {remote} from 'electron';
import fs from 'fs';
import path from 'path';

import SendFeedback from '@electron-elements/send-feedback';

const {app} = remote;

customElements.define('send-feedback', SendFeedback);
export const sendFeedback: SendFeedback = document.querySelector('send-feedback');
export const feedbackHolder = sendFeedback.parentElement;

// Make the button color match zulip app's theme
sendFeedback.customStylesheet = 'css/feedback.css';

// Customize the fields of custom elements
sendFeedback.title = 'Report Issue';
sendFeedback.titleLabel = 'Issue title:';
sendFeedback.titlePlaceholder = 'Enter issue title';
sendFeedback.textareaLabel = 'Describe the issue:';
sendFeedback.textareaPlaceholder = 'Succinctly describe your issue and steps to reproduce it...';

sendFeedback.buttonLabel = 'Report Issue';
sendFeedback.loaderSuccessText = '';

sendFeedback.useReporter('emailReporter', {
	email: 'support@zulip.com'
});

feedbackHolder.addEventListener('click', (event: Event) => {
	// Only remove the class if the grey out faded
	// part is clicked and not the feedback element itself
	if (event.target === event.currentTarget) {
		feedbackHolder.classList.remove('show');
	}
});

sendFeedback.addEventListener('feedback-submitted', () => {
	setTimeout(() => {
		feedbackHolder.classList.remove('show');
	}, 1000);
});

sendFeedback.addEventListener('feedback-cancelled', () => {
	feedbackHolder.classList.remove('show');
});

const dataDir = app.getPath('userData');
const logsDir = path.join(dataDir, '/Logs');
sendFeedback.logs.push(...fs.readdirSync(logsDir).map(file => path.join(logsDir, file)));