import * as sfw from 'sfw';
import * as api from './api/index.js';
import { literal as m } from './month.js';
import * as service_worker from './service-worker/index.js';

//service_worker.register();

import LoginView from './pages/login/index.js';
import MainView from './pages/main/index.js';
import ImageViewer from './pages/image-viewer/index.js';
import Search from './widgets/search/index.js';
import MonthSelect from './widgets/month-select/index.js';
import SettingsView from './pages/settings/index.js';
import ShuffleView from './pages/shuffle/index.js';
import UploadBar from './widgets/upload-bar/index.js';

sfw.theme.add_css(await sfw.css(import.meta.url, './index.css'));

const image_viewer = ImageViewer.new();

const reload = () => {
	image_viewer.clear();
	api.images.list().then(images => {
		for (const image of images) {
			image_viewer.add(image.id);
		}
	});
}

const login = LoginView.new({
	onlogin: async (user, password) => {
		if (await api.auth.login(user, password)) {
			reload();
			login.hide();
		} else {
			login.comment = 'Incorrect username or password.';
		}
	},

	onpassword: async (user) => {
		if (await api.auth.is_first_login(user)) {
			login.comment = 'Please enter a new password.';
		} else {
			login.comment = '';
		}
	},
});

const search = Search.new({
	onsubmit: (content) => console.log(content),
	onhide: () => main.show(),
});

const month_select = MonthSelect.new({
	months: m`2019-08`.to(m`2025-11`),
});

const upload_bar = UploadBar.new();

const settings = SettingsView.new({
	onlogout: () => {
		login.show();
		main.active_view = image_viewer;
		settings.profile = null;
	},
});

const shuffle = ShuffleView.new({ });

const main = MainView.new({
	active_view: image_viewer,
	active_kind: MainView.Kind.upload,
	onsearch: () => {
		main.active_kind = MainView.Kind.upload;
		main.active_view = image_viewer;
		search.toggle();
		main.hide();
	},
	onmonth: () => {
		main.active_kind = MainView.Kind.upload;
		main.active_view = image_viewer;
		month_select.show();
	},
	onupload: async () => {
		const uploader = await api.images.upload_to_timeline();

		upload_bar.progress = 0;
		upload_bar.show();

		uploader.onprogress = (count, total) => {
			upload_bar.progress = count / total;
		}

		uploader.ondone = () => {
			upload_bar.hide();
			reload();
		}

		uploader.send();
	},
	onshuffle: () => {
		main.active_kind = MainView.Kind.home;
		main.active_view = shuffle;
	},
	onsettings: async () => {
		if (!settings.profile) {
			settings.profile = await api.session.current();
		}

		main.active_kind = MainView.Kind.home;
		main.active_view = settings;
	},
	onhome: () => {
		main.active_kind = MainView.Kind.upload;
		main.active_view = image_viewer;
	},
});

document.body.append(
	login,
	main,
	search,
	month_select,
	upload_bar,
);


if (await api.session.is_valid()) {
	login.hide();
	reload();
} else {
	login.focus();
}