import { CaProgressBarV2Component } from './ca-progress-bar-v2.component';
import type { Meta, StoryObj } from '@storybook/angular';

const meta: Meta<CaProgressBarV2Component> = {
    title: 'Example/Progress-Bar-V2',
    component: CaProgressBarV2Component,
    tags: ['autodocs'],
    argTypes: {
        progressPercentage: {
            control: { type: 'number' },
        },
        text: {
            control: { type: 'text' },
        },
        tooltipText: {
            control: { type: 'text' },
        },
        customText: {
            control: { type: 'text' },
        },
        customTextPrice: {
            control: { type: 'text' },
        },
        isTableColumn: {
            control: { type: 'boolean' },
        },
        isFocused: {
            control: { type: 'boolean' },
            description: 'Indicates if the progress bar is focused, changing its text and background color.',
            table: {
                type: {
                    summary: 'boolean',
                    detail: 'If true, the text color and background changes.',
                },
            },
        },
        colorConfig: {
            control: false,
            description: 'Optional object to override the progress bar colors.',
            table: {
                type: {
                    summary: '{ backColor: string; frontColor: string; }',
                    detail: `{
  backColor: string;  // Background color of the progress bar line
  frontColor: string; // Foreground color (filled part) of the progress bar line
}`,
                },
            },
        },
    },
    args: {
        progressPercentage: 50,
        text: 'Progress',
        customText: 'Monthly Rent - ',
        customTextPrice: '$540',
        tooltipText: 'This is a tooltip',
        isTableColumn: false,
    },
};

export default meta;

type Story = StoryObj<CaProgressBarV2Component>;

export const IsTableColumn: Story = {
    args: {
        progressPercentage: 13,
        text: 'In Column',
        tooltipText: 'Tooltip text',
        isTableColumn: true,
    },
};

export const IsTableColumnFocused: Story = {
    args: {
        progressPercentage: 13,
        text: 'In Column',
        tooltipText: 'Tooltip text',
        isTableColumn: true,
        isFocused: true,
    },
};

export const IsTableColumnCustomColors: Story = {
    args: {
        progressPercentage: 78,
        text: 'In Column',
        tooltipText: 'Tooltip text',
        isTableColumn: true,
        colorConfig: {
            backColor: '#e907cbff',
            frontColor: '#4caf50',
        },
    },
    parameters: {
        docs: {
            description: {
                story: 'This version uses a custom `colorConfig` to override the progress bar colors.',
            },
        },
    },
};

export const IsFullWidth: Story = {
    args: {
        progressPercentage: 34,
        text: 'Is full width',
        tooltipText: 'Tooltip text',
        isTableColumn: false,
    },
};

export const IsFullWidthCustomColors: Story = {
    args: {
        progressPercentage: 14,
        text: 'Is full width',
        tooltipText: 'Tooltip text',
        isTableColumn: false,
        colorConfig: {
            backColor: '#ff0000ff',
            frontColor: '#3906f0ff',
        },
    },
    parameters: {
        docs: {
            description: {
                story: 'This version uses a custom `colorConfig` to override the progress bar colors.',
            },
        },
    },
};