<?php

namespace App\Gui;

use JumPHP\Gui\Theme;
use JumPHP\Gui\Widget;
use JumPHP\Renderer\Renderer;

/**
 * The dark title over the tabs: the icon and the name of the selected object, and where it is ("on 'xcp-ng-01'").
 *
 * @property string $text
 * @property string $detail
 * @property string $icon
 */
final class Banner extends Widget
{
    public const DEFAULTS = ['text' => '', 'detail' => '', 'icon' => 'xencenter', 'width' => 'fill'];

    protected function content(Theme $t, float $maxWidth, string $breakpoint): array
    {
        return [$maxWidth, $t->px(52)];
    }

    public function render(Renderer $r, Theme $t): void
    {
        $steps = 16;
        for ($i = 0; $i < $steps; $i++) {
            $k = $i / ($steps - 1);
            $c = sprintf('#%02x%02x%02x', (int)(0x1b + 0x14 * $k), (int)(0x33 + 0x22 * $k), (int)(0x5a + 0x30 * $k));
            $r->fillRect($this->x + $this->w * $i / $steps, $this->y, $this->w / $steps + 1, $this->h, $c);
        }
        $icon = $t->px(24);
        $ix = $this->x + $t->px(16);
        $iy = $this->y + ($this->h - $icon) / 2;
        $t->box($r, $ix - $t->px(5), $iy - $t->px(5), $icon + $t->px(10), $icon + $t->px(10), [255, 255, 255, 34], $t->px(7));
        Icons::draw($r, (string)$this->props['icon'], $ix, $iy, $icon);
        $font = $t->font($t->fontSize * 1.3, true);
        $text = \JumPHP\Util\Lang::t((string)$this->props['text']);
        $tx = $ix + $icon + $t->px(16);
        $font->draw($r, Canvas::fit($font, $text, $this->w - $t->px(80)), $tx, $this->y + ($this->h - $font->height()) / 2, 1, '#ffffff');
        if ($this->props['detail'] !== '') {
            $small = $t->font();
            $dx = $tx + $font->width($text) + $t->px(12);
            if ($dx < $this->x + $this->w - $t->px(60)) {
                $small->draw($r, Canvas::fit($small, (string)$this->props['detail'], $this->x + $this->w - $dx - $t->px(16)), $dx,
                    $this->y + ($this->h - $small->height()) / 2 + $t->px(1), 1, '#b9cbe6');
            }
        }
    }
}