//! Interface for Element's which describe the contents of a `Container`.

pub fn Element(Event: type) type {
    return struct {
        ptr: *anyopaque = undefined,
        vtable: *const VTable = &.{},

        pub const VTable = struct {
            resize: ?*const fn (ctx: *anyopaque, size: Point) void = null,
            reposition: ?*const fn (ctx: *anyopaque, origin: Point) void = null,
            handle: ?*const fn (ctx: *anyopaque, event: Event) anyerror!void = null,
            content: ?*const fn (ctx: *anyopaque, cells: []Cell, size: Point) anyerror!void = null,
        };

        /// Resize the corresponding `Element` with the given *size*.
        pub inline fn resize(this: @This(), size: Point) void {
            if (this.vtable.resize) |resize_fn|
                resize_fn(this.ptr, size);
        }

        /// Reposition the corresponding `Element` with the given *origin*.
        pub inline fn reposition(this: @This(), origin: Point) void {
            if (this.vtable.reposition) |reposition_fn|
                reposition_fn(this.ptr, origin);
        }

        /// Handle the received event. The event is one of the user provided
        /// events or a system event, with the exception of the `.size`
        /// `Event` as every `Container` already handles that event.
        ///
        /// In case of user errors this function should return an error. This
        /// error may then be used by the application to display information
        /// about the user error.
        pub inline fn handle(this: @This(), event: Event) !void {
            if (this.vtable.handle) |handle_fn|
                try handle_fn(this.ptr, event);
        }

        /// Write content into the `cells` of the `Container`. The associated
        /// `cells` slice has the size of (`size.x * size.y`). The
        /// renderer will know where to place the contents on the screen.
        ///
        /// # Note
        ///
        /// - Caller owns `cells` slice and ensures that the size usually by assertion:
        ///   ```zig
        ///   std.debug.assert(cells.len == @as(usize, size.x) * @as(usize, size.y));
        ///   ```
        ///
        /// - This function should only fail with an error if the error is
        ///   non-recoverable (i.e. an allocation error, system error, etc.).
        ///   Otherwise user specific errors should be caught using the `handle`
        ///   function before the rendering of the `Container` happens.
        pub inline fn content(this: @This(), cells: []Cell, size: Point) !void {
            if (this.vtable.content) |content_fn| {
                try content_fn(this.ptr, cells, size);

                // DEBUG render corresponding top left corner of this `Element` *red*
                // - only rendered if the corresponding associated element renders contents into the `Container`
                if (comptime build_options.debug) {
                    cells[0].style.fg = .red;
                    cells[0].style.bg = .black;
                    cells[0].cp = 'e'; // 'e' for *element*
                }
            }
        }
    };
}

pub fn Alignment(Event: type) type {
    return struct {
        /// `Size` of the actual contents that should be aligned.
        size: Point = .{},
        /// Alignment Configuration to use for aligning the associated contents of this `Element`.
        configuration: Configuration,
        /// `Container` to render in alignment. It needs to use the sizing options accordingly to be effective.
        container: Container(Event),

        /// Configuration for Alignment
        pub const Configuration = packed struct {
            h: Align = .start,
            v: Align = .start,

            /// Alignment Options for configuration for vertical and horizontal orientations
            pub const Align = enum(u2) { start, center, end };

            /// Configuration for vertical alignment
            pub fn vertical(a: Align) @This() {
                return .{ .v = a };
            }
            /// Configuration for horizontal alignment
            pub fn horizontal(a: Align) @This() {
                return .{ .h = a };
            }

            pub const center: @This() = .{ .v = .center, .h = .center };
        };

        pub fn init(container: Container(Event), configuration: Configuration) @This() {
            return .{
                .container = container,
                .configuration = configuration,
            };
        }

        pub fn element(this: *@This()) Element(Event) {
            return .{
                .ptr = this,
                .vtable = &.{
                    .resize = resize,
                    .reposition = reposition,
                    .handle = handle,
                    .content = content,
                },
            };
        }

        fn resize(ctx: *anyopaque, size: Point) void {
            const this: *@This() = @ptrCast(@alignCast(ctx));
            this.size = size;
            this.container.resize(size);
        }

        fn reposition(ctx: *anyopaque, anchor: Point) void {
            const this: *@This() = @ptrCast(@alignCast(ctx));
            var origin = anchor;
            origin.x = switch (this.configuration.h) {
                .start => origin.x,
                .center => origin.x + (this.size.x / 2) -| (this.container.size.x / 2),
                .end => this.size.x -| this.container.size.x,
            };
            origin.y = switch (this.configuration.v) {
                .start => origin.y,
                .center => origin.y + (this.size.y / 2) -| (this.container.size.y / 2),
                .end => this.size.y -| this.container.size.y,
            };
            this.container.reposition(origin);
        }

        fn handle(ctx: *anyopaque, event: Event) !void {
            const this: *@This() = @ptrCast(@alignCast(ctx));
            try this.container.handle(event);
        }

        fn content(ctx: *anyopaque, cells: []Cell, size: Point) !void {
            const this: *@This() = @ptrCast(@alignCast(ctx));
            assert(cells.len == @as(usize, size.x) * @as(usize, size.y));
            const origin = this.container.origin;
            const csize = this.container.size;

            const container_cells = try this.container.content();
            defer this.container.allocator.free(container_cells);

            outer: for (0..csize.y) |row| {
                inner: for (0..csize.x) |col| {
                    // do not read/write out of bounce
                    if (this.size.x < row) break :outer;
                    if (this.size.y < col) break :inner;

                    cells[((row + origin.y) * size.x) + col + origin.x] = container_cells[(row * csize.x) + col];
                }
            }
        }
    };
}

pub fn Scrollable(Event: type) type {
    return struct {
        /// `Size` of the actual contents where the anchor and the size is
        /// representing the size and location on screen.
        size: Point = .{},
        /// `Size` of the `Container` content that is scrollable and mapped to
        /// the *size* of the `Scrollable` `Element`.
        container_size: Point = .{},
        /// Anchor of the viewport of the scrollable `Container`.
        anchor: Point = .{},
        /// The actual `Container`, that is scrollable.
        container: Container(Event),
        /// Whether the scrollable contents should show a scroll bar or not.
        /// The scroll bar will only be shown if required and enabled. With the
        /// corresponding provided color if to be shown.
        configuration: Configuration,

        pub const Configuration = packed struct {
            // TODO the scrollbar bool and the color should be in their own struct using `enabled` and `color` inside of the struct to be more consistent with other `Configuration` structs
            scrollbar: bool,
            color: Color = .default,
            x_axis: bool = false,
            y_axis: bool = false,

            pub const disabled: @This() = .{ .scrollbar = false };

            pub fn enabled(color: Color) @This() {
                return .{ .scrollbar = true, .color = color };
            }
        };

        pub fn init(container: Container(Event), configuration: Configuration) @This() {
            return .{
                .container = container,
                .configuration = configuration,
            };
        }

        pub fn element(this: *@This()) Element(Event) {
            return .{
                .ptr = this,
                .vtable = &.{
                    .resize = resize,
                    .reposition = reposition,
                    .handle = handle,
                    .content = content,
                },
            };
        }

        fn resize(ctx: *anyopaque, size: Point) void {
            const this: *@This() = @ptrCast(@alignCast(ctx));
            const last_max_anchor_x = this.container_size.x -| this.size.x;
            const last_max_anchor_y = this.container_size.y -| this.size.y;

            this.size = size;
            this.container.resize(size);
            if (this.configuration.scrollbar) {
                if (this.container.properties.size.dim.x > this.size.x or this.container.size.x > this.size.x) this.configuration.y_axis = true;
                if (this.container.properties.size.dim.y > this.size.y or this.container.size.y > this.size.y) this.configuration.x_axis = true;

                if (this.configuration.x_axis or this.configuration.y_axis) this.container.resize(.{
                    .x = this.size.x - if (this.configuration.x_axis) @as(u16, 1) else @as(u16, 0),
                    .y = this.size.y - if (this.configuration.y_axis) @as(u16, 1) else @as(u16, 0),
                });
            }

            const new_max_anchor_x = this.container.size.x -| size.x;
            const new_max_anchor_y = this.container.size.y -| size.y;

            // correct anchor if necessary
            if (new_max_anchor_x < last_max_anchor_x and this.anchor.x > new_max_anchor_x) this.anchor.x = new_max_anchor_x;
            if (new_max_anchor_y < last_max_anchor_y and this.anchor.y > new_max_anchor_y) this.anchor.y = new_max_anchor_y;

            this.container_size = this.container.size;
        }

        fn reposition(ctx: *anyopaque, _: Point) void {
            const this: *@This() = @ptrCast(@alignCast(ctx));
            this.container.reposition(.{});
        }

        fn handle(ctx: *anyopaque, event: Event) !void {
            const this: *@This() = @ptrCast(@alignCast(ctx));
            switch (event) {
                // TODO other means to scroll except with the mouse? (i.e. Ctrl-u/d, k/j, etc.?)
                .mouse => |mouse| switch (mouse.button) {
                    Mouse.Button.wheel_up => if (this.container_size.y > this.size.y) {
                        this.anchor.y -|= 1;
                    },
                    Mouse.Button.wheel_down => if (this.container_size.y > this.size.y) {
                        const max_anchor_y = this.container_size.y -| this.size.y;
                        this.anchor.y = @min(this.anchor.y + 1, max_anchor_y);
                    },
                    Mouse.Button.wheel_left => if (this.container_size.x > this.size.x) {
                        this.anchor.x -|= 1;
                    },
                    Mouse.Button.wheel_right => if (this.container_size.x > this.size.x) {
                        const max_anchor_x = this.container_size.x -| this.size.x;
                        this.anchor.x = @min(this.anchor.x + 1, max_anchor_x);
                    },
                    else => try this.container.handle(.{
                        .mouse = .{
                            .x = mouse.x + this.anchor.x,
                            .y = mouse.y + this.anchor.y,
                            .button = mouse.button,
                            .kind = mouse.kind,
                        },
                    }),
                },
                else => try this.container.handle(event),
            }
        }

        fn render_container(container: Container(Event), cells: []Cell, container_size: Point) !void {
            const size = container.size;
            const origin = container.origin;
            const contents = try container.content();

            const anchor = (@as(usize, origin.y) * @as(usize, container_size.x)) + @as(usize, origin.x);

            var idx: usize = 0;
            blk: for (0..size.y) |row| {
                for (0..size.x) |col| {
                    cells[anchor + (row * container_size.x) + col] = contents[idx];
                    idx += 1;

                    if (contents.len == idx) break :blk;
                }
            }
            // free immediately
            container.allocator.free(contents);

            for (container.elements.items) |child| try render_container(child, cells, size);
        }

        fn content(ctx: *anyopaque, cells: []Cell, size: Point) !void {
            const this: *@This() = @ptrCast(@alignCast(ctx));
            assert(cells.len == @as(usize, size.x) * @as(usize, size.y));
            assert(cells.len == @as(usize, this.size.x) * @as(usize, this.size.y));
            const offset_x: usize = if (this.configuration.x_axis) 1 else 0;
            const offset_y: usize = if (this.configuration.y_axis) 1 else 0;

            const container_size = this.container.size;
            const container_cells = try this.container.content();

            for (this.container.elements.items) |child| try render_container(child, container_cells, container_size);

            const anchor = (@as(usize, this.anchor.y) * @as(usize, container_size.x)) + @as(usize, this.anchor.x);
            for (0..size.y - offset_y) |row| {
                for (0..size.x - offset_x) |col| {
                    cells[(row * size.x) + col] = container_cells[anchor + (row * container_size.x) + col];
                }
            }
            if (this.configuration.scrollbar) {
                if (this.configuration.x_axis) {
                    const ratio: f32 = @as(f32, @floatFromInt(this.size.y)) / @as(f32, @floatFromInt(this.container.size.y));
                    const scrollbar_size: usize = @intFromFloat(@as(f32, @floatFromInt(this.size.y)) * ratio);
                    const pos_ratio: f32 = @as(f32, @floatFromInt(this.anchor.y)) / @as(f32, @floatFromInt(this.container.size.y));
                    const scrollbar_starting_pos: usize = @intFromFloat(@as(f32, @floatFromInt(this.size.y)) * pos_ratio);
                    for (0..size.y) |row| {
                        cells[(row * size.x) + size.x - 1] = .{
                            .style = .{
                                .fg = this.configuration.color,
                                .emphasis = if (row >= scrollbar_starting_pos and row <= scrollbar_starting_pos + scrollbar_size)
                                    &.{} // scrollbar itself
                                else
                                    &.{.dim}, // background (around scrollbar)
                            },
                            .cp = '🮋', // 7/8 block right
                        };
                    }
                }
                if (this.configuration.y_axis) {
                    const ratio: f32 = @as(f32, @floatFromInt(this.size.x)) / @as(f32, @floatFromInt(this.container.size.x));
                    const scrollbar_size: usize = @intFromFloat(@as(f32, @floatFromInt(this.size.x)) * ratio);
                    const pos_ratio: f32 = @as(f32, @floatFromInt(this.anchor.x)) / @as(f32, @floatFromInt(this.container.size.x));
                    const scrollbar_starting_pos: usize = @intFromFloat(@as(f32, @floatFromInt(this.size.x)) * pos_ratio);
                    for (0..size.x) |col| {
                        cells[((size.y - 1) * size.x) + col] = .{
                            .style = .{
                                .fg = this.configuration.color,
                                .emphasis = if (col >= scrollbar_starting_pos and col <= scrollbar_starting_pos + scrollbar_size)
                                    &.{} // scrollbar itself
                                else
                                    &.{.dim}, // background (around scrollbar)
                            },
                            .cp = '🮄', // 5/8 block top (to make it look more equivalent to the vertical scrollbar)
                        };
                    }
                }
            }
            this.container.allocator.free(container_cells);
        }
    };
}

pub fn Input(Event: type, Queue: type) fn (meta.FieldEnum(Event)) type {
    // NOTE the struct is necessary, as otherwise I cannot point to the function I want to return
    const input_struct = struct {
        pub fn input_fn(accept_event: meta.FieldEnum(Event)) type {
            const event_type: enum { ascii, utf8 } = blk: { // check for type correctness and the associated type to use for the passed `accept_event`
                const err_msg = "Unexpected type for the associated input completion event to trigger. Only `[]u8` or `[]u21` are allowed.";
                switch (@typeInfo(@FieldType(Event, @tagName(accept_event)))) {
                    .pointer => |pointer| {
                        if (pointer.size != .slice) @compileError(err_msg);
                        switch (@typeInfo(pointer.child)) {
                            .int => |num| {
                                if (num.signedness != .unsigned) @compileError(err_msg);
                                switch (num.bits) {
                                    8 => break :blk .ascii,
                                    21 => break :blk .utf8,
                                    else => @compileError(err_msg),
                                }
                            },
                            else => @compileError(err_msg),
                        }
                    },
                    else => @compileError(err_msg),
                }
            };
            return struct {
                /// Offset from the end describing the current position of the cursor.
                cursor_offset: usize = 0,
                /// Configuration for the InputField.
                configuration: Configuration,
                /// Array holding the value of the input.
                input: std.ArrayList(u21),
                /// Reference to the app's queue to issue the associated event to trigger when completing the input.
                queue: *Queue,

                /// Configuration for InputField's.
                pub const Configuration = packed struct {
                    color: Color,

                    pub fn init(color: Color) @This() {
                        return .{ .color = color };
                    }
                };

                pub fn init(allocator: std.mem.Allocator, queue: *Queue, configuration: Configuration) @This() {
                    return .{
                        .configuration = configuration,
                        .input = .init(allocator),
                        .queue = queue,
                    };
                }

                pub fn deinit(this: @This()) void {
                    this.input.deinit();
                }

                pub fn element(this: *@This()) Element(Event) {
                    return .{
                        .ptr = this,
                        .vtable = &.{
                            .handle = handle,
                            .content = content,
                        },
                    };
                }

                fn handle(ctx: *anyopaque, event: Event) !void {
                    const this: *@This() = @ptrCast(@alignCast(ctx));
                    switch (event) {
                        .key => |key| {
                            assert(this.cursor_offset >= 0 and this.cursor_offset <= this.input.items.len);

                            // readline commands
                            if (key.eql(.{ .cp = input.Left }) or key.eql(.{ .cp = input.KpLeft }) or key.eql(.{ .cp = 'b', .mod = .{ .ctrl = true } })) {
                                if (this.cursor_offset < this.input.items.len) this.cursor_offset += 1;
                            }

                            if (key.eql(.{ .cp = input.Right }) or key.eql(.{ .cp = input.KpRight }) or key.eql(.{ .cp = 'f', .mod = .{ .ctrl = true } }))
                                this.cursor_offset -|= 1;

                            if (key.eql(.{ .cp = 'e', .mod = .{ .ctrl = true } })) this.cursor_offset = 0;

                            if (key.eql(.{ .cp = 'a', .mod = .{ .ctrl = true } })) this.cursor_offset = this.input.items.len;

                            if (key.eql(.{ .cp = 'k', .mod = .{ .ctrl = true } })) {
                                while (this.cursor_offset > 0) {
                                    _ = this.input.pop();
                                    this.cursor_offset -= 1;
                                }
                            }

                            if (key.eql(.{ .cp = 'u', .mod = .{ .ctrl = true } })) {
                                const len = this.input.items.len - this.cursor_offset;
                                for (0..len) |_| _ = this.input.orderedRemove(0);
                                this.cursor_offset = this.input.items.len;
                            }

                            if (key.eql(.{ .cp = 'w', .mod = .{ .ctrl = true } })) {
                                var non_whitespace = false;
                                while (this.cursor_offset < this.input.items.len) {
                                    if (non_whitespace and this.input.items[this.input.items.len - this.cursor_offset - 1] == ' ') break;

                                    // see backspace
                                    const removed = if (this.cursor_offset == 0) this.input.pop() else this.input.orderedRemove(this.input.items.len - this.cursor_offset - 1);
                                    if (removed != ' ') non_whitespace = true;
                                }
                            }

                            if (key.eql(.{ .cp = 'b', .mod = .{ .alt = true } }) or key.eql(.{ .cp = input.Left, .mod = .{ .ctrl = true } }) or key.eql(.{ .cp = input.KpLeft, .mod = .{ .ctrl = true } })) {
                                var non_whitespace = false;
                                while (this.cursor_offset < this.input.items.len) {
                                    if (non_whitespace and this.input.items[this.input.items.len - this.cursor_offset - 1] == ' ') break;

                                    // see backspace
                                    this.cursor_offset += 1;
                                    if (this.cursor_offset == this.input.items.len) break;
                                    const next = this.input.items[this.input.items.len - this.cursor_offset - 1];
                                    if (next != ' ') non_whitespace = true;
                                }
                            }

                            if (key.eql(.{ .cp = 'f', .mod = .{ .alt = true } }) or key.eql(.{ .cp = input.Right, .mod = .{ .ctrl = true } }) or key.eql(.{ .cp = input.KpRight, .mod = .{ .ctrl = true } })) {
                                var non_whitespace = false;
                                while (this.cursor_offset > 0) {
                                    if (non_whitespace and this.input.items[this.input.items.len - this.cursor_offset - 1] == ' ') {
                                        this.cursor_offset += 1; // correct cursor position back again to make sure the cursor is not on the whitespace, but at the end of the jumped word
                                        break;
                                    }

                                    // see backspace
                                    this.cursor_offset -= 1;
                                    const next = this.input.items[this.input.items.len - this.cursor_offset - 1];
                                    if (next != ' ') non_whitespace = true;
                                }
                            }

                            // usual input keys
                            if (key.isAscii()) try this.input.insert(this.input.items.len - this.cursor_offset, key.cp);

                            if (key.eql(.{ .cp = input.Backspace })) {
                                if (this.cursor_offset < this.input.items.len) {
                                    _ = if (this.cursor_offset == 0) this.input.pop() else this.input.orderedRemove(this.input.items.len - this.cursor_offset - 1);
                                }
                            }

                            if (key.eql(.{ .cp = input.Delete }) or key.eql(.{ .cp = input.KpDelete })) {
                                if (this.cursor_offset > 0) {
                                    _ = this.input.orderedRemove(this.input.items.len - this.cursor_offset);
                                    this.cursor_offset -= 1;
                                }
                            }

                            // TODO enter to accept?
                            // - shift+enter is not recognized by the input reader of `zterm`, so currently it is not possible to add newlines into the text box?
                            if (key.eql(.{ .cp = input.Enter }) or key.eql(.{ .cp = input.KpEnter })) {
                                switch (event_type) {
                                    .ascii => {
                                        // NOTE convert unicode characters to ascii characters; if non ascii characters are found this is will fail!
                                        var slice = try this.input.allocator.alloc(u8, this.input.items.len);
                                        for (0.., this.input.items) |i, c| slice[i] = @intCast(c);
                                        this.input.clearAndFree();
                                        this.queue.push(@unionInit(
                                            Event,
                                            @tagName(accept_event),
                                            slice,
                                        ));
                                    },
                                    .utf8 => this.queue.push(@unionInit(
                                        Event,
                                        @tagName(accept_event),
                                        try this.input.toOwnedSlice(),
                                    )),
                                }
                                this.cursor_offset = 0;
                            }
                        },
                        else => {},
                    }
                }

                fn content(ctx: *anyopaque, cells: []Cell, size: Point) !void {
                    const this: *@This() = @ptrCast(@alignCast(ctx));
                    assert(cells.len == @as(usize, size.x) * @as(usize, size.y));

                    const offset = if (this.input.items.len - this.cursor_offset + 1 >= cells.len) this.input.items.len + 1 - cells.len else 0;
                    for (this.input.items[offset..], 0..) |cp, idx| {
                        cells[idx].style.fg = this.configuration.color;
                        cells[idx].cp = cp;
                        // display ellipse at the beginning
                        if (offset > 0 and idx == 0) cells[idx].cp = '…';

                        // NOTE do not write over the contents of this `Container`'s `Size`
                        if (idx == cells.len - 1) {
                            // display ellipse at the end
                            if (this.input.items.len >= cells.len and this.cursor_offset > 0) cells[idx].cp = '…';
                            break;
                        }
                    }
                    if (this.input.items.len < cells.len)
                        cells[this.input.items.len - this.cursor_offset].style.cursor = true
                    else
                        cells[this.input.items.len - offset - this.cursor_offset].style.cursor = true;
                }
            };
        }
    };
    return input_struct.input_fn;
}

pub fn Button(Event: type, Queue: type) fn (meta.FieldEnum(Event)) type {
    // NOTE the struct is necessary, as otherwise I cannot point to the function I want to return
    const button_struct = struct {
        pub fn button_fn(accept_event: meta.FieldEnum(Event)) type {
            { // check for type correctness and the associated type to use for the passed `accept_event`
                const err_msg = "Unexpected type for the associated input completion event to trigger. Only `void` is allowed.";
                switch (@typeInfo(@FieldType(Event, @tagName(accept_event)))) {
                    .void => |_| {},
                    else => @compileError(err_msg),
                }
            }
            return struct {
                queue: *Queue,
                configuration: Configuration,

                /// Configuration for InputField's.
                pub const Configuration = struct {
                    color: Color,
                    text: []const u8,

                    pub fn init(color: Color, text: []const u8) @This() {
                        return .{
                            .color = color,
                            .text = text,
                        };
                    }
                };

                pub fn init(queue: *Queue, configuration: Configuration) @This() {
                    return .{
                        .queue = queue,
                        .configuration = configuration,
                    };
                }

                pub fn element(this: *@This()) Element(Event) {
                    return .{
                        .ptr = this,
                        .vtable = &.{
                            .handle = handle,
                            .content = content,
                        },
                    };
                }

                fn handle(ctx: *anyopaque, event: Event) !void {
                    const this: *@This() = @ptrCast(@alignCast(ctx));
                    switch (event) {
                        // TODO should this also support key presses to accept?
                        .mouse => |mouse| if (mouse.button == .left and mouse.kind == .release) this.queue.push(accept_event),
                        else => {},
                    }
                }

                fn content(ctx: *anyopaque, cells: []Cell, size: Point) !void {
                    const this: *@This() = @ptrCast(@alignCast(ctx));
                    assert(cells.len == @as(usize, size.x) * @as(usize, size.y));

                    // NOTE center text in the middle of the available cell slice
                    const row = size.y / 2 -| (this.configuration.text.len / 2);
                    const col = size.x / 2 -| (this.configuration.text.len / 2);
                    const anchor = (row * size.x) + col;

                    for (0.., this.configuration.text) |idx, cp| {
                        cells[anchor + idx].style.fg = this.configuration.color;
                        cells[anchor + idx].style.emphasis = &.{.bold};
                        cells[anchor + idx].cp = cp;

                        // NOTE do not write over the contents of this `Container`'s `Size`
                        if (anchor + idx == cells.len - 1) break;
                    }
                }
            };
        }
    };
    return button_struct.button_fn;
}

pub fn Progress(Event: type, Queue: type) fn (meta.FieldEnum(Event)) type {
    // NOTE the struct is necessary, as otherwise I cannot point to the function I want to return
    const progress_struct = struct {
        pub fn progress_fn(progress_event: meta.FieldEnum(Event)) type {
            { // check for type correctness and the associated type to use for the passed `progress_event`
                const err_msg = "Unexpected type for the associated input completion event to trigger. Only `u8` is allowed.";
                switch (@typeInfo(@FieldType(Event, @tagName(progress_event)))) {
                    .int => |num| {
                        if (num.signedness != .unsigned) @compileError(err_msg);
                        switch (num.bits) {
                            8 => {},
                            else => @compileError(err_msg),
                        }
                    },
                    else => @compileError(err_msg),
                }
            }
            return struct {
                configuration: Configuration,
                progress: u8 = 0,
                queue: *Queue,

                pub const Configuration = packed struct {
                    /// Control whether the percentage of the progress be rendered.
                    percent: packed struct {
                        enabled: bool = false,
                        alignment: enum(u2) { left, middle, right } = .middle,
                    } = .{},
                    /// Foreground color to use for the progress bar.
                    fg: Color,
                    /// Background color to use for the progress bar.
                    bg: Color,
                    /// Code point to use for rendering the progress bar with.
                    cp: u21 = '━',
                };

                pub fn init(queue: *Queue, configuration: Configuration) @This() {
                    return .{
                        .configuration = configuration,
                        .queue = queue,
                    };
                }

                pub fn element(this: *@This()) Element(Event) {
                    return .{
                        .ptr = this,
                        .vtable = &.{
                            .handle = handle,
                            .content = content,
                        },
                    };
                }

                fn handle(ctx: *anyopaque, event: Event) !void {
                    const this: *@This() = @ptrCast(@alignCast(ctx));
                    // TODO should this `Element` trigger a completion event? (I don't think that this is useful?)
                    switch (event) {
                        progress_event => |value| {
                            assert(value >= 0 and value <= 100);
                            this.progress = value;
                        },
                        else => {},
                    }
                }

                fn content(ctx: *anyopaque, cells: []Cell, size: Point) !void {
                    const this: *@This() = @ptrCast(@alignCast(ctx));
                    assert(cells.len == @as(usize, size.x) * @as(usize, size.y));

                    const ratio: f32 = @as(f32, @floatFromInt(size.x)) / 100.0;
                    const scrollbar_end_pos: usize = @intFromFloat(ratio * @as(f32, @floatFromInt(this.progress)));

                    // NOTE remain `undefined` in case percentage rendering is not enabled
                    var percent_buf: [6]u8 = undefined;
                    var percent_buf_len: usize = undefined;
                    if (this.configuration.percent.enabled) percent_buf_len = (try std.fmt.bufPrint(&percent_buf, "[{d: >3}%]", .{this.progress})).len;

                    for (0..size.x) |idx| {
                        // NOTE the progress bar is rendered at the bottom row of the `Container` taking its entire columns
                        cells[((size.y - 1) * size.x) + idx] = .{
                            .style = .{
                                .fg = if (scrollbar_end_pos > 0 and idx <= scrollbar_end_pos) this.configuration.fg else this.configuration.bg,
                                .emphasis = &.{},
                            },
                            .cp = if (this.configuration.percent.enabled) switch (this.configuration.percent.alignment) {
                                .left => if (idx < percent_buf_len) percent_buf[idx] else this.configuration.cp,
                                .middle => if (idx >= ((size.x - percent_buf_len) / 2) and idx < ((size.x - percent_buf_len) / 2) + percent_buf_len) percent_buf[percent_buf_len - (((size.x - percent_buf_len) / 2) + percent_buf_len - idx - 1) - 1] else this.configuration.cp,
                                .right => if (idx >= size.x - percent_buf_len) percent_buf[percent_buf_len - ((size.x - idx + percent_buf_len - 1) % percent_buf_len) - 1] else this.configuration.cp,
                            } else this.configuration.cp,
                        };
                        // NOTE do not write over the contents of this `Container`'s `Size`
                        if (idx == cells.len - 1) break;
                    }
                }
            };
        }
    };
    return progress_struct.progress_fn;
}

const std = @import("std");
const assert = std.debug.assert;
const meta = std.meta;
const build_options = @import("build_options");
const input = @import("input.zig");
const Container = @import("container.zig").Container;
const Cell = @import("cell.zig");
const Color = @import("color.zig").Color;
const Mouse = input.Mouse;
const Point = @import("point.zig").Point;

// TODO nested scrollable `Container`s?'

test "scrollable vertical" {
    const event = @import("event.zig");
    const testing = @import("testing.zig");

    const allocator = std.testing.allocator;
    const size: Point = .{
        .x = 30,
        .y = 20,
    };

    var box: Container(event.SystemEvent) = try .init(allocator, .{
        .border = .{
            .sides = .all,
            .color = .red,
        },
        .layout = .{
            .separator = .{
                .enabled = true,
                .color = .red,
            },
            .direction = .vertical,
            .padding = .all(1),
        },
        .size = .{
            .dim = .{ .y = size.y + 15 },
        },
    }, .{});
    try box.append(try .init(allocator, .{
        .rectangle = .{ .fill = .grey },
    }, .{}));
    try box.append(try .init(allocator, .{
        .rectangle = .{ .fill = .grey },
    }, .{}));
    defer box.deinit();

    var scrollable: Scrollable(event.SystemEvent) = .init(box, .disabled);

    var container: Container(event.SystemEvent) = try .init(allocator, .{
        .border = .{
            .color = .green,
            .sides = .vertical,
        },
    }, scrollable.element());
    defer container.deinit();

    var renderer: testing.Renderer = .init(allocator, size);
    defer renderer.deinit();

    container.resize(size);
    container.reposition(.{});
    try renderer.render(Container(event.SystemEvent), &container);
    try testing.expectEqualCells(.{}, renderer.size, @import("test/element/scrollable.vertical.top.zon"), renderer.screen);

    // scroll down 15 times (exactly to the end)
    for (0..15) |_| try container.handle(.{
        .mouse = .{
            .button = .wheel_down,
            .kind = .press,
            .x = 5,
            .y = 5,
        },
    });
    try renderer.render(Container(event.SystemEvent), &container);
    try testing.expectEqualCells(.{}, renderer.size, @import("test/element/scrollable.vertical.bottom.zon"), renderer.screen);

    // further scrolling down will not change anything
    try container.handle(.{
        .mouse = .{
            .button = .wheel_down,
            .kind = .press,
            .x = 5,
            .y = 5,
        },
    });
    try renderer.render(Container(event.SystemEvent), &container);
    try testing.expectEqualCells(.{}, renderer.size, @import("test/element/scrollable.vertical.bottom.zon"), renderer.screen);
}

test "scrollable vertical with scrollbar" {
    const event = @import("event.zig");
    const testing = @import("testing.zig");

    const allocator = std.testing.allocator;
    const size: Point = .{
        .x = 30,
        .y = 20,
    };

    var box: Container(event.SystemEvent) = try .init(allocator, .{
        .border = .{
            .sides = .all,
            .color = .red,
        },
        .layout = .{
            .separator = .{
                .enabled = true,
                .color = .red,
            },
            .direction = .vertical,
            .padding = .all(1),
        },
        .size = .{
            .dim = .{ .y = size.y + 15 },
        },
    }, .{});
    try box.append(try .init(allocator, .{
        .rectangle = .{ .fill = .grey },
    }, .{}));
    try box.append(try .init(allocator, .{
        .rectangle = .{ .fill = .grey },
    }, .{}));
    defer box.deinit();

    var scrollable: Scrollable(event.SystemEvent) = .init(box, .enabled(.white));

    var container: Container(event.SystemEvent) = try .init(allocator, .{
        .border = .{
            .color = .green,
            .sides = .vertical,
        },
    }, scrollable.element());
    defer container.deinit();

    var renderer: testing.Renderer = .init(allocator, size);
    defer renderer.deinit();

    container.resize(size);
    container.reposition(.{});
    try renderer.render(Container(event.SystemEvent), &container);
    try testing.expectEqualCells(.{}, renderer.size, @import("test/element/scrollable.vertical.scrollbar.top.zon"), renderer.screen);

    // scroll down 15 times (exactly to the end)
    for (0..15) |_| try container.handle(.{
        .mouse = .{
            .button = .wheel_down,
            .kind = .press,
            .x = 5,
            .y = 5,
        },
    });
    try renderer.render(Container(event.SystemEvent), &container);
    try testing.expectEqualCells(.{}, renderer.size, @import("test/element/scrollable.vertical.scrollbar.bottom.zon"), renderer.screen);

    // further scrolling down will not change anything
    try container.handle(.{
        .mouse = .{
            .button = .wheel_down,
            .kind = .press,
            .x = 5,
            .y = 5,
        },
    });
    try renderer.render(Container(event.SystemEvent), &container);
    try testing.expectEqualCells(.{}, renderer.size, @import("test/element/scrollable.vertical.scrollbar.bottom.zon"), renderer.screen);
}

test "scrollable horizontal" {
    const event = @import("event.zig");
    const testing = @import("testing.zig");

    const allocator = std.testing.allocator;
    const size: Point = .{
        .x = 30,
        .y = 20,
    };

    var box: Container(event.SystemEvent) = try .init(allocator, .{
        .border = .{
            .sides = .all,
            .color = .red,
        },
        .layout = .{
            .separator = .{
                .enabled = true,
                .color = .red,
            },
            .direction = .horizontal,
            .padding = .all(1),
        },
        .size = .{
            .dim = .{ .x = size.x + 15 },
        },
    }, .{});
    try box.append(try .init(allocator, .{
        .rectangle = .{ .fill = .grey },
    }, .{}));
    try box.append(try .init(allocator, .{
        .rectangle = .{ .fill = .grey },
    }, .{}));
    defer box.deinit();

    var scrollable: Scrollable(event.SystemEvent) = .init(box, .disabled);

    var container: Container(event.SystemEvent) = try .init(allocator, .{
        .border = .{
            .color = .green,
            .sides = .horizontal,
        },
    }, scrollable.element());
    defer container.deinit();

    var renderer: testing.Renderer = .init(allocator, size);
    defer renderer.deinit();

    container.resize(size);
    container.reposition(.{});
    try renderer.render(Container(event.SystemEvent), &container);
    try testing.expectEqualCells(.{}, renderer.size, @import("test/element/scrollable.horizontal.left.zon"), renderer.screen);

    // scroll right 15 times (exactly to the end)
    for (0..15) |_| try container.handle(.{
        .mouse = .{
            .button = .wheel_right,
            .kind = .press,
            .x = 5,
            .y = 5,
        },
    });
    try renderer.render(Container(event.SystemEvent), &container);
    try testing.expectEqualCells(.{}, renderer.size, @import("test/element/scrollable.horizontal.right.zon"), renderer.screen);

    // further scrolling right will not change anything
    try container.handle(.{
        .mouse = .{
            .button = .wheel_right,
            .kind = .press,
            .x = 5,
            .y = 5,
        },
    });
    try renderer.render(Container(event.SystemEvent), &container);
    try testing.expectEqualCells(.{}, renderer.size, @import("test/element/scrollable.horizontal.right.zon"), renderer.screen);
}

test "scrollable horizontal with scrollbar" {
    const event = @import("event.zig");
    const testing = @import("testing.zig");

    const allocator = std.testing.allocator;
    const size: Point = .{
        .x = 30,
        .y = 20,
    };

    var box: Container(event.SystemEvent) = try .init(allocator, .{
        .border = .{
            .sides = .all,
            .color = .red,
        },
        .layout = .{
            .separator = .{
                .enabled = true,
                .color = .red,
            },
            .direction = .horizontal,
            .padding = .all(1),
        },
        .size = .{
            .dim = .{ .x = size.x + 15 },
        },
    }, .{});
    try box.append(try .init(allocator, .{
        .rectangle = .{ .fill = .grey },
    }, .{}));
    try box.append(try .init(allocator, .{
        .rectangle = .{ .fill = .grey },
    }, .{}));
    defer box.deinit();

    var scrollable: Scrollable(event.SystemEvent) = .init(box, .enabled(.white));

    var container: Container(event.SystemEvent) = try .init(allocator, .{
        .border = .{
            .color = .green,
            .sides = .horizontal,
        },
    }, scrollable.element());
    defer container.deinit();

    var renderer: testing.Renderer = .init(allocator, size);
    defer renderer.deinit();

    container.resize(size);
    container.reposition(.{});
    try renderer.render(Container(event.SystemEvent), &container);
    try testing.expectEqualCells(.{}, renderer.size, @import("test/element/scrollable.horizontal.scrollbar.left.zon"), renderer.screen);

    // scroll right 15 times (exactly to the end)
    for (0..15) |_| try container.handle(.{
        .mouse = .{
            .button = .wheel_right,
            .kind = .press,
            .x = 5,
            .y = 5,
        },
    });
    try renderer.render(Container(event.SystemEvent), &container);
    try testing.expectEqualCells(.{}, renderer.size, @import("test/element/scrollable.horizontal.scrollbar.right.zon"), renderer.screen);

    // further scrolling right will not change anything
    try container.handle(.{
        .mouse = .{
            .button = .wheel_right,
            .kind = .press,
            .x = 5,
            .y = 5,
        },
    });
    try renderer.render(Container(event.SystemEvent), &container);
    try testing.expectEqualCells(.{}, renderer.size, @import("test/element/scrollable.horizontal.scrollbar.right.zon"), renderer.screen);
}

test "alignment center" {
    const allocator = std.testing.allocator;
    const event = @import("event.zig");
    const testing = @import("testing.zig");

    var container: Container(event.SystemEvent) = try .init(allocator, .{}, .{});
    defer container.deinit();

    const aligned_container: Container(event.SystemEvent) = try .init(allocator, .{
        .rectangle = .{ .fill = .green },
        .size = .{
            .dim = .{ .x = 12, .y = 5 },
            .grow = .fixed,
        },
    }, .{});
    var alignment: Alignment(event.SystemEvent) = .init(aligned_container, .center);
    try container.append(try .init(allocator, .{}, alignment.element()));

    try testing.expectContainerScreen(.{
        .x = 30,
        .y = 20,
    }, &container, @import("test/element/alignment.center.zon"));
}

test "alignment left" {
    const allocator = std.testing.allocator;
    const event = @import("event.zig");
    const testing = @import("testing.zig");

    var container: Container(event.SystemEvent) = try .init(allocator, .{}, .{});
    defer container.deinit();

    const aligned_container: Container(event.SystemEvent) = try .init(allocator, .{
        .rectangle = .{ .fill = .green },
        .size = .{
            .dim = .{ .x = 12, .y = 5 },
            .grow = .fixed,
        },
    }, .{});
    var alignment: Alignment(event.SystemEvent) = .init(aligned_container, .{
        .h = .start,
        .v = .center,
    });
    try container.append(try .init(allocator, .{}, alignment.element()));

    try testing.expectContainerScreen(.{
        .x = 30,
        .y = 20,
    }, &container, @import("test/element/alignment.left.zon"));
}

test "alignment right" {
    const allocator = std.testing.allocator;
    const event = @import("event.zig");
    const testing = @import("testing.zig");

    var container: Container(event.SystemEvent) = try .init(allocator, .{}, .{});
    defer container.deinit();

    const aligned_container: Container(event.SystemEvent) = try .init(allocator, .{
        .rectangle = .{ .fill = .green },
        .size = .{
            .dim = .{ .x = 12, .y = 5 },
            .grow = .fixed,
        },
    }, .{});
    var alignment: Alignment(event.SystemEvent) = .init(aligned_container, .{
        .h = .end,
        .v = .center,
    });
    try container.append(try .init(allocator, .{}, alignment.element()));

    try testing.expectContainerScreen(.{
        .x = 30,
        .y = 20,
    }, &container, @import("test/element/alignment.right.zon"));
}

test "alignment top" {
    const allocator = std.testing.allocator;
    const event = @import("event.zig");
    const testing = @import("testing.zig");

    var container: Container(event.SystemEvent) = try .init(allocator, .{}, .{});
    defer container.deinit();

    const aligned_container: Container(event.SystemEvent) = try .init(allocator, .{
        .rectangle = .{ .fill = .green },
        .size = .{
            .dim = .{ .x = 12, .y = 5 },
            .grow = .fixed,
        },
    }, .{});
    var alignment: Alignment(event.SystemEvent) = .init(aligned_container, .{
        .h = .center,
        .v = .start,
    });
    try container.append(try .init(allocator, .{}, alignment.element()));

    try testing.expectContainerScreen(.{
        .x = 30,
        .y = 20,
    }, &container, @import("test/element/alignment.top.zon"));
}

test "alignment bottom" {
    const allocator = std.testing.allocator;
    const event = @import("event.zig");
    const testing = @import("testing.zig");

    var container: Container(event.SystemEvent) = try .init(allocator, .{}, .{});
    defer container.deinit();

    const aligned_container: Container(event.SystemEvent) = try .init(allocator, .{
        .rectangle = .{ .fill = .green },
        .size = .{
            .dim = .{ .x = 12, .y = 5 },
            .grow = .fixed,
        },
    }, .{});
    var alignment: Alignment(event.SystemEvent) = .init(aligned_container, .{
        .h = .center,
        .v = .end,
    });
    try container.append(try .init(allocator, .{}, alignment.element()));

    try testing.expectContainerScreen(.{
        .x = 30,
        .y = 20,
    }, &container, @import("test/element/alignment.bottom.zon"));
}

test "input element" {
    // FIX correctly generate the `.zon` files for the cell equivalence test (see below)
    const allocator = std.testing.allocator;
    const event = @import("event.zig");
    const Event = event.mergeTaggedUnions(event.SystemEvent, union(enum) {
        accept: []u21,
    });
    const testing = @import("testing.zig");
    const Queue = @import("queue").Queue(Event, 256);

    var container: Container(Event) = try .init(allocator, .{}, .{});
    defer container.deinit();

    const size: Point = .{
        .x = 30,
        .y = 20,
    };
    var queue: Queue = .{};

    const input_container: Container(Event) = try .init(allocator, .{
        .rectangle = .{ .fill = .green },
        .size = .{
            .dim = .{ .x = 12, .y = 2 },
            .grow = .fixed,
        },
    }, .{});
    var input_element: Input(Event, Queue)(.accept) = .init(input_container, &queue, .{.black});
    defer input_element.deinit();

    try container.append(try .init(allocator, .{}, input_element.element()));

    var renderer: testing.Renderer = .init(allocator, size);
    defer renderer.deinit();

    container.resize(size);
    container.reposition(.{});
    try renderer.render(Container(event.SystemEvent), &container);
    // try testing.expectEqualCells(.{}, renderer.size, @import("test/element/input.without.text.zon"), renderer.screen);

    // press 'a' 15 times
    for (0..15) |_| try container.handle(.{
        .key = .{ .cp = 'a' },
    });
    try renderer.render(Container(event.SystemEvent), &container);
    // try testing.expectEqualCells(.{}, renderer.size, @import("test/element/input.with.text.zon"), renderer.screen);

    // press 'a' 15 times
    for (0..15) |_| try container.handle(.{
        .key = .{ .cp = 'a' },
    });
    try renderer.render(Container(event.SystemEvent), &container);
    // try testing.expectEqualCells(.{}, renderer.size, @import("test/element/input.with.text.overflow.zon"), renderer.screen);

    // test the accepting of the `Element`
    try container.handle(.{
        .key = .{ .cp = input.Enter },
    });
    const accept_event = queue.pop();
    try std.testing.expectEqual(.accept, std.meta.activeTag(accept_event));
    try std.testing.expectEqual(30, switch (accept_event) {
        .accept => |input_content| input_content.len,
        else => unreachable,
    });

    // free allocated resources
    switch (accept_event) {
        .accept => |slice| allocator.free(slice),
        else => unreachable,
    }
}

test "button" {
    const allocator = std.testing.allocator;
    const event = @import("event.zig");
    const Event = event.mergeTaggedUnions(event.SystemEvent, union(enum) {
        accept,
    });
    const testing = @import("testing.zig");
    const Queue = @import("queue").Queue(Event, 256);

    const size: Point = .{
        .x = 30,
        .y = 20,
    };
    var queue: Queue = .{};

    var container: Container(Event) = try .init(allocator, .{}, .{});
    defer container.deinit();

    var button: Button(Event, Queue)(.accept) = .init(&queue, .init(.default, "Button"));
    const button_container: Container(Event) = try .init(allocator, .{
        .rectangle = .{ .fill = .blue },
    }, button.element());
    try container.append(button_container);

    var renderer: testing.Renderer = .init(allocator, size);
    defer renderer.deinit();

    container.resize(size);
    container.reposition(.{});
    try renderer.render(Container(Event), &container);
    // try testing.expectEqualCells(.{}, renderer.size, @import("test/element/button.zon"), renderer.screen);

    // test the accepting of the `Element`
    try container.handle(.{
        .mouse = .{
            .x = 5,
            .y = 3,
            .button = .left,
            .kind = .release,
        },
    });
    try std.testing.expect(switch (queue.pop()) {
        .accept => true,
        else => false,
    });
}

test "progress" {
    const allocator = std.testing.allocator;
    const event = @import("event.zig");
    const Event = event.mergeTaggedUnions(event.SystemEvent, union(enum) {
        progress: u8,
    });
    const testing = @import("testing.zig");
    const Queue = @import("queue").Queue(Event, 256);

    const size: Point = .{
        .x = 30,
        .y = 20,
    };

    var container: Container(Event) = try .init(allocator, .{
        .layout = .{
            .padding = .all(1),
        },
        .rectangle = .{ .fill = .white },
    }, .{});
    defer container.deinit();

    var progress: Progress(Event, Queue)(.progress) = .init(&.{}, .{
        .percent = .{ .enabled = true },
        .fg = .green,
        .bg = .grey,
    });
    const progress_container: Container(Event) = try .init(allocator, .{}, progress.element());
    try container.append(progress_container);

    var renderer: testing.Renderer = .init(allocator, size);
    defer renderer.deinit();

    container.resize(size);
    container.reposition(.{});
    try renderer.render(Container(Event), &container);
    // try testing.expectEqualCells(.{}, renderer.size, @import("test/element/progress_zero.zon"), renderer.screen);

    // test the progress of the `Element`
    try container.handle(.{
        .progress = 25,
    });
    container.resize(size);
    container.reposition(.{});
    try renderer.render(Container(Event), &container);
    // try testing.expectEqualCells(.{}, renderer.size, @import("test/element/progress_one_quarter.zon"), renderer.screen);

    // test the progress of the `Element`
    try container.handle(.{
        .progress = 50,
    });
    container.resize(size);
    container.reposition(.{});
    try renderer.render(Container(Event), &container);
    // try testing.expectEqualCells(.{}, renderer.size, @import("test/element/progress_half.zon"), renderer.screen);

    // test the progress of the `Element`
    try container.handle(.{
        .progress = 75,
    });
    container.resize(size);
    container.reposition(.{});
    try renderer.render(Container(Event), &container);
    // try testing.expectEqualCells(.{}, renderer.size, @import("test/element/progress_three_quarter.zon"), renderer.screen);

    // test the progress of the `Element`
    try container.handle(.{
        .progress = 100,
    });
    container.resize(size);
    container.reposition(.{});
    try renderer.render(Container(Event), &container);
    // try testing.expectEqualCells(.{}, renderer.size, @import("test/element/progress_one_hundred.zon"), renderer.screen);
}