import * as sfw from 'sfw';

import * as api from './api/index.js';

import { literal as m } from './month.js';

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';

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

const image_viewer = ImageViewer.new();

[
	'/images/0001.jpg',
	'/images/0002.jpg',
	'/images/0003.jpg',
	'/images/0004.jpg',
	'/images/0005.jpg',
	'/images/0006.jpg',
	'/images/0007.jpg',
	'/images/0008.jpg',
	'/images/0009.jpg',
	'/images/0010.jpg',
].forEach(url => image_viewer.add(url))


const login = LoginView.new({
	onlogin: async (user, password) => {
		if (await api.auth.login(user, password)) {
			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 settings = SettingsView.new({
	onlogout: () => {
		login.show();
		main.active_view = image_viewer;
	},
});

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: () => api.images.upload_to_timeline(),
	onshuffle: () => {
		main.active_kind = MainView.Kind.home;
		main.active_view = shuffle;
	},
	onsettings: () => {
		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,
);

login.focus();