import { State, SessionStep, CountdownStatus } from "./state.slint";
import { VText, VButton, VSlider, VTextInput, Palette } from "@selenite";
import { Utils } from "utils.slint";
import { ComboBox } from "std-widgets.slint";

export component SettingsView inherits Rectangle {
    VerticalLayout {
		padding: 32px;
		spacing: 32px;
		alignment: center;
		VSlider {
			label: "Session duration";
			label-size: 1.25rem;
			label-alignment: TextHorizontalAlignment.center;
			no-background: true;
			minimum: 1;
			maximum: 60 * 60;
			value: State.focus-countdown-duration;
			format-value(value) => { return Utils.format-countdown(value); }
			released(value) => { State.focus-countdown-duration = value; }
		}
		VSlider {
			label: "Break duration";
			label-size: 1.25rem;
			label-alignment: TextHorizontalAlignment.center;
			no-background: true;
			minimum: 1;
			maximum: 60 * 60;
			value: State.break-countdown-duration;
			format-value(value) => { return Utils.format-countdown(value); }
			released(value) => { State.break-countdown-duration = value; }
		}
		VSlider {
			label: "Number of session";
			label-size: 1.25rem;
			label-alignment: TextHorizontalAlignment.center;
			no-background: true;
			minimum: 1;
			maximum: 8;
			value: State.max-session-count;
			format-value(value) => { return Math.round(value); }
			released(value) => { State.max-session-count = Math.round(value); }
		}

		VTextInput {
			label: "Timer ending script";
			label-size: 1.25rem;
			label-alignment: TextHorizontalAlignment.center;
			placeholder: "Default";
			text <=> State.timer-ending-script;
		}
	}
}