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

// Modules
import { HttpClientModule } from '@angular/common/http';
import { AngularSvgIconModule, SvgIconRegistryService } from 'angular-svg-icon';
import { ITooltipList } from './models';

// Components
import { CaTooltipListComponent } from './ca-tooltip-list.component';


const meta: Meta<CaTooltipListComponent> = {
  title: 'Example/TooltipList',
  component: CaTooltipListComponent,
  tags: ['autodocs'],
  decorators: [
    applicationConfig({
      providers: [
        SvgIconRegistryService,
        importProvidersFrom(HttpClientModule, AngularSvgIconModule.forRoot()),
      ],
    }),
  ],
  argTypes: {
    tooltipList: { control: 'object' },
  },
};

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

export const SingleItem: Story = {
  args: {
    tooltipList: {
      date: 'Decembar, 2024',
      showPercentage: false,
      selectedItems: [
        { label: 'Label with very long name is this one over here', value: 32482.84, isCurrency: true, color: '#ff6384' },
      ],
      otherItems: [
        { label: 'Price per Gallon', value: 342300, isCurrency: true, color: '#AAAAAA' },
        { label: 'Load Rate per Mile', value: 686900, isCurrency: true, color: '#DADADA' },
      ]
    } as ITooltipList,
  },
};

export const MultipleItems: Story = {
  args: {
    tooltipList: {
      date: 'Decembar, 2024',
      showPercentage: false,
      selectedItems: [
        { label: 'Net Gross', value: 342300, isCurrency: true, color: '#ff6384' },
        { label: 'Load', value: 2, color: '#36a2eb' },
        { label: 'Label with very long name is this one over here', value: 658.9, color: '#ffce56' },
      ],
      otherItems: [
        { label: 'Price per Gallon', value: 342300, isCurrency: true, color: '#AAAAAA' },
        { label: 'Load Rate per Mile', value: 686900, isCurrency: true, color: '#DADADA' },
      ]
    } as ITooltipList,
  },
};


export const NoItemSelectedPercentage: Story = {
  args: {
    tooltipList: {
      date: 'Decembar, 2024',
      showPercentage: true,
      otherItems: [
        { label: 'Price per Gallon', value: 342300, percentage: '35.45%', color: '#AAAAAA' },
        { label: 'Load Rate per Mile', value: 6869000, percentage: '35.45%', color: '#DADADA' },
      ]
    } as ITooltipList,
  },
};


export const LessThen3ItemsPercentage: Story = {
  args: {
    tooltipList: {
      date: 'Decembar, 2024',
      showPercentage: true,
      selectedItems: [
        { label: 'Net Gross', value: 3423000, percentage: '35.45%', color: '#ff6384' },
        { label: 'Load', value: 2, percentage: '27.35%', color: '#36a2eb' },
        { label: 'Label with very long name is this one over here', value: 658.5, percentage: '19.37%', color: '#ffce56' },
      ],
      otherItems: [
        { label: 'Price per Gallon', value: 3423000, isCurrency: true, percentage: '35.45%', color: '#AAAAAA' },
        { label: 'Label with very long name is this one over here', value: 6869000, isCurrency: true, percentage: '35.45%', color: '#DADADA' },
      ]
    } as ITooltipList,
  },
};

export const MultipleItemsPercentage: Story = {
  args: {
    tooltipList: {
      date: 'Decembar, 2024',
      showPercentage: true,
      selectedItems: [
        { label: 'Net Gross', value: 3423000, isCurrency: true, percentage: '35.45%', color: '#ff6384' },
        { label: 'Load', value: 2, percentage: '27.35%', color: '#36a2eb' },
        { label: 'Load Rate per Mile', value: 658.5, percentage: '19.37%', color: '#ffce56' },
        { label: 'Label with very long name is this one over here', value: 658.5, percentage: '19.37%', color: '#ffce09' },
      ],
      otherItems: [
        { label: 'Price per Gallon', value: 3423000, isCurrency: true, percentage: '35.45%', color: '#AAAAAA' },
        { label: 'Load Rate per Mile', value: 6869000, isCurrency: true, percentage: '35.45%', color: '#DADADA' },
      ]
    } as ITooltipList,
  },
};