import { State, SessionStep, CountdownStatus } from "./state.slint";
import { VText, VButton, VActionButton, Svg, Palette } from "@selenite";
import { Utils } from "utils.slint";

export component CountdownView inherits VerticalLayout {
	callback start-stop <=> startStopButton.clicked;

	pure function format-session-step(session-step: SessionStep) -> string {
		if (session-step == SessionStep.Setup) {
			return "Setup";
		}
		if (session-step == SessionStep.Focus) {
			return "Focus";
		}
		if (session-step == SessionStep.Break) {
			return "Break";
		}
		if (session-step == SessionStep.Finished) {
			return "Finished";
		}
		return "Not implemented";
	}
	
    VerticalLayout {
		
		spacing: 32px;
		alignment: center;
		
		VerticalLayout {
			VText {
				font-size: 3rem;
				letter-spacing: 0.2rem;
				font-weight: 600; 
				text: "\{Utils.format-countdown(State.countdown)}";
				horizontal-alignment: center;
			}
			VText {
				color: Palette.foreground-hint;
				text: format-session-step(State.sessions-step);
				horizontal-alignment: center;
			}
		}
		HorizontalLayout {
			alignment: space-between;
			spacing: 8px;
			for step[step-index] in State.max-session-count: Rectangle {
				preferred-width: 16px;
				preferred-height: 16px;
				border-radius: 32px;
				background: step-index + 1 == State.current-session 
					? Palette.accent.transparentize(0.5)
					: step-index + 1 < State.current-session ? Palette.accent
					: Palette.control-background;
				animate background {
					duration: 0.5s;
				}
			}
		}
		HorizontalLayout {
			alignment: center;
			startStopButton := VActionButton {
				background: Palette.foreground.transparentize(1);
				icon-size: 2rem;
				icon-svg: State.countdown-status != CountdownStatus.Running ? Svg.play : Svg.pause;
			}
		}
	}
}