import * as sfw from 'sfw';
const { Div, Canvas } = sfw.element.native;

import { Image } from 'widgets';

const css = await sfw.css(import.meta.url, './index.css');

export default class ShuffleView extends sfw.element.Container {
	#front_image
	#back_image
	#front_image_index
	#back_image_index
	#images
	#date
	#drag_start_position
	#drag_strength

	constructor() {
		super({ css });

		this.#front_image_index = null;
		this.#back_image_index = null;

		this.body.append(
			this.#date = Div.new({ id: 'date' }),
			this.#front_image = Image.new({
				id: 'front',
				disabled: true,
				ontouchstart: (e) => {
					if (e.touches.length != 1) return;

					this.#drag_start_position = [e.touches[0].pageX, e.touches[0].pageY];
				},
				ontouchmove: (e) => {
					if (e.touches.length != 1) return;

					const position = [e.touches[0].pageX, e.touches[0].pageY];

					const delta = [
						position[0] - this.#drag_start_position[0],
						position[1] - this.#drag_start_position[1]
					];

					const strength = Math.min(1, Math.max((delta[0]**2 + delta[1]**2) / (40 ** 2), 0) / 100);
					this.#drag_strength = strength;
					console.log(this.#drag_strength);

					const angle_x = position[0] - window.screen.width / 2;
					const angle_y = position[1] - window.screen.height * 1.2;
					let angle = (Math.atan((angle_y) / (angle_x)) * 180 / Math.PI  + 90);

					if (angle_x < 0) {
						angle -= 180;
					}

					this.#front_image.style.transform = `
						translate(-50%, calc(-50% - 50px))
						translate(${delta[0]}px, ${delta[1]}px)
						rotate(${angle}deg)
					`;
					this.#back_image.style.filter = `blur(${(1 - strength) * 50}px)`;
				},
				ontouchend: (e) => {
					if (this.#drag_strength > 0.3) {
						this.next();
					}

					this.#front_image.style.transform = '';
					this.#back_image.style.filter = '';
				},
			}),
			this.#back_image = Image.new({ id: 'back', disabled: true }),
		)

		this.ondragover = (e) => {
			console.log(e)
		}

		this.onclick = () => this.next();
	}

	set images(images) {
		this.#images = images;
	}

	open() {
		this.next();
		this.next();
	}

	next() {
		this.#front_image_index = this.#back_image_index;
		this.#back_image_index = Math.floor(Math.random() * this.#images.length);

		if (this.#front_image_index !== null) {
			this.#front_image.metadata = this.#images[this.#front_image_index];
			this.#front_image.load();

			const date = this.#images[this.#front_image_index].date
			
			this.#date.innerText = date.toLocaleString('default', {
				month: 'long',
				year: 'numeric',
				day: 'numeric',
				hour: 'numeric',
				minute: 'numeric'
			}); ;
		}

		this.#back_image.metadata = this.#images[this.#back_image_index];
		this.#back_image.load();
	}
}