// components/background/raindrop/index.ts
import Toolkit from "../../../utils/Toolkit";

interface Raindrop {
	x: number;
	length: number;
	speed: number;
}

Component({

	data: {
		raindrops: [] as Raindrop[],
		timer: undefined as number | undefined,
		docWidth: 375,
		docHeight: 667,
	},

	methods: {
		createRaindrop() {
			const raindrop = {
				x: Toolkit.random(0, this.data.docWidth),
				length: Toolkit.random(20, 40),
				speed: Toolkit.random(1, 2)
			};
			this.setData({
				raindrops: [...this.data.raindrops, raindrop]
			});
		}
	},
	lifetimes: {
		attached() {
			const systemInfo = wx.getWindowInfo();
			this.setData({
				docWidth: systemInfo.windowWidth,
				docHeight: systemInfo.windowHeight,
				timer: setInterval(() => {
					this.createRaindrop();
					if (60 < this.data.raindrops.length) {
						if (this.data.timer) {
							clearInterval(this.data.timer);
						}
						this.setData({
							timer: undefined
						})
					}
				}, 100)
			});
		},
		detached() {
			if (this.data.timer) {
				clearInterval(this.data.timer);
				this.setData({
					timer: undefined
				})
			}
		}
	}
})