import { Meta, StoryObj, applicationConfig } from '@storybook/angular';
import { importProvidersFrom } from '@angular/core';

// Modules
import { HttpClientModule } from '@angular/common/http';

// Components
import { CaChartComponent } from './ca-chart.component';

// Enums
import { ChartImagesStringEnum, eChartTypesString } from './enums';
import { CaChartSvgRoutes } from './utils/svg-routes';
import { AngularSvgIconModule, SvgIconRegistryService } from 'angular-svg-icon';

const meta: Meta<CaChartComponent> = {
    title: 'Example/CaChart',
    component: CaChartComponent,
    tags: ['autodocs'],
    decorators: [
        applicationConfig({
            providers: [
                SvgIconRegistryService,
                importProvidersFrom(
                    HttpClientModule,
                    AngularSvgIconModule.forRoot()
                ),
            ],
        }),
    ],
};

export default meta;
type Story = StoryObj<CaChartComponent>;

export const LineChart: Story = {
    args: {
        chartConfig: {
            chartType: eChartTypesString.LINE,
            chartData: {
                labels: [
                    '',
                    '',
                    '',
                    '',
                    '',
                    '',
                    '',
                    '',
                    '',
                    '',
                    '',
                    '',
                    '',
                    '',
                    '',
                    '',
                    '',
                    '',
                    '',
                    '',
                ],
                datasets: [
                    {
                        type: 'line',
                        label: 'Sales',
                        data: [
                            65, 59, 350, 100, 150, 60, 200, 0, 0, 2, 55, 400,
                            333, 200, 404, 500, 561, 700, 900, 100,
                        ],
                    },
                    {
                        type: 'line',
                        label: 'Income',
                        data: [
                            150, 300, 10, 50, 87, 250, 700, 0, 0, 0, 55, 400,
                            333, 450, 404, 500, 561, 700, 900, 100,
                        ],
                    },
                    {
                        type: 'line',
                        label: 'Outcome',
                        data: [
                            350000, 40000, 80, 237, 274, 243, 150000, 369, 24,
                            19, 55, 400, 333, 800, 404, 500, 561, 700, 900, 100,
                        ],
                    },
                    {
                        type: 'line',
                        label: 'Expenses',
                        data: [
                            310000, 150000, 200000, 100000, 274000, 10000,
                            150000, 369, 243, 19, 55000, 3444, 6050, 44444, 404,
                            500, 561, 700, 900, 100,
                        ],
                    },
                ],
            },
            height: 500,
            width: 100,
            noDataImage: ChartImagesStringEnum.CHART_NO_DATA_GREEN,
            chartOptions: {},
            showTooltipBackground: true,
        },
    },
};

export const NoDataChart: Story = {
    args: {
        chartConfig: {
            chartType: eChartTypesString.LINE,
            chartData: {
                labels: [],
                datasets: [],
            },
            height: 500,
            width: 100,
            noDataImage: CaChartSvgRoutes.chartNoDataGreenSvgRoute,
            chartOptions: {},
        },
    },
};