use lib 'lib';
use Selkie::Test::Snapshot;
use Selkie::Widget::TabBar;
use Selkie::Layout::VBox;
use Selkie::Widget::Text;
use Selkie::Sizing;

# TabPill drops the [ ] decorators and marks the active tab with a
# filled background instead. Two assertions, hence :capture-styles:
#
#   * the glyph block pins the geometry — the active tab is padded to
#     exactly the width its brackets occupied, so switching styles never
#     shifts the strip (compare 11-tabbar-active-inactive column for
#     column: same tabs, same columns, no brackets);
#   * the legend pins the fill — and pins that a pill stays lit on the
#     UNFOCUSED bar too, because the fill is the only "this tab is
#     current" marker a pill has.

my $vbox = Selkie::Layout::VBox.new(sizing => Sizing.flex);

my $focused = Selkie::Widget::TabBar.new(
    sizing       => Sizing.fixed(1),
    active-style => TabPill,
);
$focused.add-tab(name => 'identity', label => 'Identity');
$focused.add-tab(name => 'behavior', label => 'Behavior', badge => 2);
$focused.add-tab(name => 'dialogue', label => 'Dialogue');
$focused.select-index(1);
$focused.set-focused(True);
$vbox.add($focused);

$vbox.add: Selkie::Widget::Text.new(text => '', sizing => Sizing.fixed(1));

my $unfocused = Selkie::Widget::TabBar.new(
    sizing       => Sizing.fixed(1),
    active-style => TabPill,
);
$unfocused.add-tab(name => 'identity', label => 'Identity');
$unfocused.add-tab(name => 'behavior', label => 'Behavior', badge => 2);
$unfocused.add-tab(name => 'dialogue', label => 'Dialogue');
$unfocused.select-index(1);
$vbox.add($unfocused);

print render-to-string($vbox, rows => 3, cols => 44, :capture-styles);
