import type { WorkspaceLeaf } from "obsidian";
import { ItemView } from "obsidian";
import type VaultLinkPlugin from "src/vault-link-plugin";
import { Logger } from "src/tracing/logger";
import type { Database } from "src/database/database";

export class LogsView extends ItemView {
	public static readonly TYPE = "logs-view";
	public static readonly ICON = "logs";

	public constructor(
		private readonly plugin: VaultLinkPlugin,
		private readonly database: Database,
		leaf: WorkspaceLeaf
	) {
		super(leaf);
		this.icon = LogsView.ICON;
		Logger.getInstance().addOnMessageListener(() => {
			this.updateView();
		});

		database.addOnSettingsChangeHandlers((newSettings, oldSettings) => {
			if (newSettings.minimumLogLevel !== oldSettings.minimumLogLevel) {
				this.updateView();
			}
		});
	}

	private static formatTimestamp(timestamp: Date): string {
		return timestamp.toTimeString().split(" ")[0];
	}

	public getViewType(): string {
		return LogsView.TYPE;
	}

	public getDisplayText(): string {
		return "VaultLink logs";
	}

	public async onOpen(): Promise<void> {
		this.updateView();

		const container = this.containerEl.children[1];
		container.addClass("logs-view");
	}

	private updateView(): void {
		const container = this.containerEl.children[1];

		let logsContainer = container
			.getElementsByClassName("logs-container")
			.item(0);
		const scrollPosition = logsContainer?.scrollTop;

		console.log(scrollPosition);

		container.empty();

		container.createEl("h4", { text: "VaultLink logs" });
		container.createEl(
			"p",
			{
				text: "This view displays logs generated by VaultLink. You can set the log level in the "
			},
			(p) => {
				p.createEl(
					"a",
					{
						text: "settings"
					},
					(button) => {
						button.addEventListener("click", () => {
							this.plugin.openSettings();
						});
					}
				);

				p.createSpan({ text: "." });
			}
		);

		const logs = Logger.getInstance().getMessages(
			this.database.getSettings().minimumLogLevel
		);

		if (logs.length === 0) {
			container.createEl("p", { text: "No logs available yet." });
			return;
		}

		logsContainer = container.createDiv(
			{ cls: "logs-container" },
			(element) => {
				logs.forEach((message) =>
					element.createDiv(
						{
							cls: ["log-message", message.level]
						},
						(messageContainer) => {
							messageContainer.createEl("span", {
								text: LogsView.formatTimestamp(
									message.timestamp
								),
								cls: "timestamp"
							});
							messageContainer.createEl("span", {
								text: message.message
							});
						}
					)
				);
			}
		);

		if (scrollPosition !== undefined) {
			logsContainer.scrollTop = scrollPosition;
		} else {
			logsContainer.scrollTop = logsContainer.scrollHeight;
		}
	}
}