<?php

namespace App\Filament\Widgets;

use App\Filament\Widgets\Data\HelperStatisticType;
use App\Filament\Widgets\Data\LoadEvents;
// use Filament\Support\RawJs;
use Filament\Widgets\ChartWidget;
use Filament\Widgets\Concerns\InteractsWithPageFilters;

class ChartPunctualEvent extends ChartWidget
{
    use InteractsWithPageFilters;

    protected ?string $pollingInterval = null;

    public ?string $header;

    protected ?array $options = [
        'plugins' => [
            'legend' => [
                'display' => false,
            ],
        ],
        'interaction' => [
            'intersect' => false,
        ],
        // 'scales' => [
        //     'xAxes' => [
        //         'type' => 'time',
        //         'time' => [
        //             'tooltipFormat' => 'MM/DD/YYYY',
        //             'displayFormats' => 'HH:mm:ss',
        //         ],

        //     ],
        // ],
    ];

    public function getDescription(): ?string
    {
        return 'Events Punctual';
    }

    protected function getData(): array
    {
        $this->heading = HelperStatisticType::get($this->filters);

        $data = LoadEvents::load($this->filters);

        return $data;
    }

    protected function getType(): string
    {
        return 'line';
    }

    // protected function getOptions(): RawJs|array
    // {
    //     return RawJs::make(<<<'JS'
    //     {
    //         plugins: {
    //             legend: {
    //                 display: false
    //             },
    //             datalabels: {
    //                 backgroundColor: function(context) {
    //                     return context.active ? context.dataset.backgroundColor : 'white';
    //                 },
    //                 borderColor: function(context) {
    //                     return context.dataset.backgroundColor;
    //                 },
    //                 borderRadius: function(context) {
    //                     return context.active ? 0 : 32;
    //                 },
    //                 borderWidth: 3,
    //                 color: function(context) {
    //                     return context.active ? 'white' : context.dataset.backgroundColor;
    //                 },
    //                 font: {
    //                     weight: 'bold'
    //                 },
    //                 formatter: function(value, context) {
    //                     value = Math.round(value * 100) / 100;
    //                     return context.active
    //                         ? context.dataset.label + '\n' + value + '%'
    //                         : Math.round(value);
    //                 },
    //                 offset: 8,
    //                 padding: 5,
    //                 textAlign: 'center'
    //             }
    //         },
    //         // Core options
    //         aspectRatio: 5 / 3,
    //         layout: {
    //             padding: {
    //                 bottom: 16,
    //                 right: 40,
    //                 left: 8,
    //                 top: 40
    //             }
    //         },
    //         hover: {
    //             mode: 'index',
    //             intersect: false
    //         },
    //         elements: {
    //             line: {
    //                 fill: false,
    //                 tension: 0.4
    //             }
    //         },
    //         scales: {
    //             y: {
    //                 stacked: true
    //             }
    //         }
    //     }
    //     JS);
    // }
}