// script.js

import { Element } from './element.js';

const body = new Element(document.body)
	.addClass(
		'bg-slate-900',
		'text-slate-500',
		'flex',
		'flex-col',
		'items-center',
		'justify-center',
		'w-screen',
		'h-screen',
	);

const urlElement = new Element('span')
	.appendTo(body);

const saveButton = new Element('span')
	.appendTo(body)
	.addClass(
		'bg-slate-500',
		'rounded',
	)
	.setText('Checking...');

chrome.tabs.query({ active: true, currentWindow: true }, function(tabs) {
	const tab = tabs[0];
	const url = tab.url
	console.log('URL:', url);
	urlElement.setText(url);

	chrome.runtime.sendMessage({ action: 'check', url }, (response) => {
		if (response.success) {
			if (response.data.exists) {
				saveButton
					.setText('Saved!')
					.addClass('bg-green-600')
					.removeClass(
						'hover:bg-slate-400',
						'bg-slate-500',
						'cursor-pointer',
					);
			} else {
				saveButton
					.setText('Save')
					.addClass(
						'hover:bg-slate-400',
						'cursor-pointer',
					)
					.addEventListener('click', () => {
						chrome.runtime.sendMessage({ action: 'save', url }, (response) => {
							if (response.success) {
								saveButton.setText('Saved!').
									addClass('bg-green-600').
									removeClass(
										'hover:bg-slate-400',
										'bg-slate-500',
										'cursor-pointer',
									);
							} else {
								saveButton.setText('Error!').
									addClass('bg-red-500').
									removeClass(
										'hover:bg-slate-400',
										'bg-slate-500',
										'cursor-pointer',
									);
							}
						});
					})
			}
		} else {
			saveButton
				.setText('Error!')
				.addClass('bg-red-500')
				.removeClass('hover:bg-slate-400');
		}
	});
});