<?php

namespace App\Components\WillsCase;

use App\Models\WillsCase\WillsCase;
use Illuminate\Support\Facades\Auth;
use Illuminate\Support\Facades\Cache;
use Livewire\Attributes\Lazy;
use Livewire\Component;

#[Lazy]
class View extends Component {
    public WillsCase $willsCase;
    public string $activeTab = 'overview';

    protected string $cacheKey;

    public function mount(WillsCase $willsCase): void {
        $this->willsCase = $willsCase;
        $this->cacheKey  = $this->makeCacheKey();
        $this->activeTab = Cache::remember(
            $this->cacheKey,
            now()->addMonth(),
            fn() => 'overview'
        );
    }

    protected function makeCacheKey(): string {
        return sprintf(
            'wills_case_tabs.user_%s.case_%s',
            Auth::id() ?? 'guest',
            $this->willsCase->getKey()
        );
    }

    public function setTab(string $tab): void {
        $this->activeTab = $tab;
        Cache::put($this->cacheKey ?? $this->makeCacheKey(), $tab, now()->addMonth());
    }

    public function render() {
        return view('components.wills-case.view');
    }

    public function placeholder() {
        return <<<HTML
<div>
    <div class="row">
        <div class="col-12 col-md-3">
            <div class="card shadow-sm p-3">
                <div class="placeholder-glow mb-2"><span class="placeholder col-8"></span></div>
                <div class="placeholder-glow"><span class="placeholder col-6"></span></div>
            </div>
        </div>
        <div class="col-12 col-md-9">
            <div class="card shadow-sm p-4">
                <div class="placeholder-glow mb-4">
                    <span class="placeholder col-3 me-2"></span>
                    <span class="placeholder col-3 me-2"></span>
                    <span class="placeholder col-3"></span>
                </div>
                <div class="placeholder-glow mb-2"><span class="placeholder col-12"></span></div>
                <div class="placeholder-glow mb-2"><span class="placeholder col-10"></span></div>
            </div>
        </div>
    </div>
</div>
HTML;
    }
}
