<?php

namespace App\Filament\Widgets;

use Carbon\Carbon;
use Filament\Forms\Components\Select;
use Illuminate\Support\Facades\DB;
use Leandrocfe\FilamentApexCharts\Widgets\ApexChartWidget;


class TotalMembersChart extends ApexChartWidget
{
 
    protected static string $chartId = 'totalMembersChart';
    protected static ?string $heading = 'Total Members Chart';
    protected function getFilters(): ?array
    {
        $day = now();
        $years_list = [];
        for ($i = 0; $i < 5; $i++) {
            $years_list[$day->format('Y')] = $day->format('Y');
            $day->subYear();
        }
        return $years_list;
    }

    protected function getOptions(): array
    {
        return [
            'chart' => [
                'type' => 'bar',
                'height' => 300,
                'toolbar' => [
                    'show' => false,
                ],
            ],
            'bar'=>[
                'distributed'=> true
            ],
            'series' => [
                [
                    'name' => 'Total Members ',
                    'data' => [7, 20, 6, 10, 14, 7, 5, 9, 10, 15, 13, 18],
                ],
            ],
            'plotOptions'=>[
                'bar'=>[
                    'borderRadius' => 6,
                    'columnWidth'=>"14%",
                    'distributed'=> true,
                ]
            ],
            'xaxis' => [
                'categories' => ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'],
            ],
            "grid"=>[
                'show'=>false
            ],
            'legend'=>[
                'show'=>false
            ],
            'dataLabels'=>[
                'enabled'=>false
            ],
            'colors' => ['#101828',"#9B7B0A"],
            'fill' => [
                'type' => 'gradient',
                'gradient' => [
                    'shade'=> 'light',
                    'type' => 'vertical',
                    'shadeIntensity' => 0.1,
                    'opacityFrom' => 0.7,
                    'opacityTo' => 1,
                    'stops' => [0,50, 100],
                ],
            ],
            // 'responsive' => [
            //     [
            //         'breakpoint' => 1014,
            //         'plotOptions'=>[
            //             'bar'=>[
            //                 'borderRadius' => 2,
            //                 'columnWidth'=>"18%",
            //                 'distributed'=> true,
            //             ]
        
            //         ],
            //     ],
            //     [
            //         'breakpoint' => 614,
            //         'plotOptions'=>[
            //             'bar'=>[
            //                 'borderRadius' => 1,
            //                 'columnWidth'=>"10%",
            //                 'distributed'=> true,
            //             ]
        
            //         ],
            //     ]
            // ]
        ];
    }

    public function getColumnSpan(): int | string | array
    {
        return 2;
    }
}