import { HorizontalBox } from "std-widgets.slint";
import { LineEdit, ToolbarIconButton } from "controls.slint";
import { AppTheme, LayoutMetrics } from "../design-system.slint";
import { TypeScale } from "../typography.slint";

export global ZoomApi { pure callback resolve(string, float, float, float) -> float; }

// One command vocabulary for email bodies and document previews.
export component ZoomControls inherits HorizontalBox {
    in property <bool> compact: false;
    in property <bool> available: true;
    in property <bool> fitting: false;
    in property <float> zoom: 1;
    in property <float> minimum: 0.5;
    in property <float> maximum: 3;
    in property <int> revision: 0;
    callback command(string);
    padding: 0px; spacing: 4px; horizontal-stretch: 0; cross-axis-alignment: center;
    height: root.compact ? LayoutMetrics.touch-target : LayoutMetrics.control-height;
    ToolbarIconButton { compact: root.compact; icon-color: AppTheme.body; icon: @image-url("../icons/lucide/outline/zoom-out.svg"); tooltip-text: @tr("Zoom out"); tooltip-above: true; tooltip-align-left: true; interactive: root.available && root.zoom > root.minimum; clicked => { root.command("zoom-out"); } }
    if !root.compact : ToolbarIconButton { icon-color: AppTheme.body; icon: @image-url("../icons/lucide/outline/history.svg"); tooltip-text: @tr("Reset zoom ({}%)", round(root.zoom * 100)); tooltip-above: true; interactive: root.available; clicked => { root.command("zoom-reset"); } }
    // The field shows the widest percentage, inside the editor's 12px insets,
    // at the platform font.
    Rectangle {
        width: max(62px, widest-zoom.preferred-width + 24px);
        height: root.compact ? LayoutMetrics.touch-target : LayoutMetrics.control-height;
        widest-zoom := Text { visible: false; text: "300%"; font-size: TypeScale.body; }
        editor := LineEdit {
            in property <float> applied: root.zoom;
            in property <int> revision: root.revision;
            changed applied => { self.text = "\{round(root.zoom * 100)}%"; }
            changed revision => { self.text = "\{round(root.zoom * 100)}%"; }
            width: parent.width; height: parent.height;
            enabled: root.available; input-label: @tr("Zoom percentage");
            text: "\{round(root.zoom * 100)}%";
            accepted(value) => { root.command("zoom-set:" + value); self.text = "\{round(root.zoom * 100)}%"; }
        }
    }
    ToolbarIconButton { compact: root.compact; icon-color: AppTheme.body; icon: @image-url("../icons/lucide/outline/zoom-in.svg"); tooltip-text: @tr("Zoom in"); tooltip-above: true; interactive: root.available && root.zoom < root.maximum; clicked => { root.command("zoom-in"); } }
    ToolbarIconButton { compact: root.compact; icon-color: AppTheme.body; icon: root.fitting ? @image-url("../icons/lucide/filled/screen-full.svg") : @image-url("../icons/lucide/outline/screen-full.svg"); tooltip-text: @tr("Fit to width"); tooltip-above: true; active: root.fitting; interactive: root.available; clicked => { root.command("fit"); } }
}