import type { Meta, Story } from '@storybook/react';
import { Accordion, AccordionProps } from '../../../react/src/components/Accordion';
import { ArrowRight, PlusCircle, MinusCircle } from 'phosphor-react';

export default {
    title: 'Components/Accordion',
    component: Accordion,
    argTypes: {
        title: {
            description: 'The title of the accordion',
            control: {
                type: 'text',
            },
        },
        type: {
            description: 'The type of accordion',
            options: ['default', 'plus-minus', 'custom', 'arrow', 'custom-icon'],
            control: {
                type: 'select',
            },
        },
        isOpenByDefault: {
            description: 'Specifies if the accordion should be open by default',
            control: {
                type: 'boolean',
            },
        },
    },
} as Meta<AccordionProps>;

export const Default: Story<AccordionProps> = args => (
    <Accordion {...args}>
        <p>
            "At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis praesentium voluptatum deleniti atque corrupti quos dolores et quas molestias excepturi sint occaecati cupiditate non provident, similique sunt in culpa qui officia deserunt mollitia animi, id est laborum et dolorum fuga. Et harum quidem rerum facilis est et expedita distinctio. Nam libero tempore, cum soluta nobis est eligendi optio cumque nihil impedit quo."
        </p>
    </Accordion>
);
Default.args = {
    title: 'Accordion Title',
    type: 'default',
    isOpenByDefault: false,
};

export const PlusMinus: Story<AccordionProps> = args => (
    <Accordion {...args}>
        <p>
            "At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis praesentium voluptatum deleniti atque corrupti quos dolores et quas molestias excepturi sint occaecati cupiditate non provident, similique sunt in culpa qui officia deserunt mollitia animi, id est laborum et dolorum fuga. Et harum quidem rerum facilis est et expedita distinctio. Nam libero tempore, cum soluta nobis est eligendi optio cumque nihil impedit quo."
        </p>
    </Accordion>
);
PlusMinus.args = {
    title: 'Accordion Title',
    type: 'plus-minus',
    isOpenByDefault: false,
};

export const CustomIcon: Story<AccordionProps> = args => (
    <Accordion {...args}>
        <p>
            "At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis praesentium voluptatum deleniti atque corrupti quos dolores et quas molestias excepturi sint occaecati cupiditate non provident, similique sunt in culpa qui officia deserunt mollitia animi, id est laborum et dolorum fuga. Et harum quidem rerum facilis est et expedita distinctio. Nam libero tempore, cum soluta nobis est eligendi optio cumque nihil impedit quo."
        </p>
    </Accordion>
);
CustomIcon.args = {
    title: 'Accordion Title',
    type: 'custom-icon',
    isOpenByDefault: false,
    customIcon: (
        <>
            <PlusCircle weight="bold" size={100} style={{ marginRight: '8px' }} />
            Title
        </>
    ),
};

export const ArrowIcon: Story<AccordionProps> = args => (
    <Accordion {...args}>
        <p>
            "At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis praesentium voluptatum deleniti atque corrupti quos dolores et quas molestias excepturi sint occaecati cupiditate non provident, similique sunt in culpa qui officia deserunt mollitia animi, id est laborum et dolorum fuga. Et harum quidem rerum facilis est et expedita distinctio. Nam libero tempore, cum soluta nobis est eligendi optio cumque nihil impedit quo."
        </p>
    </Accordion>
);
ArrowIcon.args = {
    title: 'Accordion Title',
    type: 'arrow',
    isOpenByDefault: false,
    customIcon: <ArrowRight weight="bold" size={24} style={{ marginRight: '8px' }} />,
};

export const CustomAccordion: Story<AccordionProps> = args => (
    <Accordion {...args}>
        <p>
            "At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis praesentium voluptatum deleniti atque corrupti quos dolores et quas molestias excepturi sint occaecati cupiditate non provident, similique sunt in culpa qui officia deserunt mollitia animi, id est laborum et dolorum fuga. Et harum quidem rerum facilis est et expedita distinctio. Nam libero tempore, cum soluta nobis est eligendi optio cumque nihil impedit quo."
        </p>
    </Accordion>
);
CustomAccordion.args = {
    title: 'Accordion Title',
    type: 'custom',
    isOpenByDefault: false,
    customIcon: (
        <>
            <PlusCircle weight="bold" size={100} style={{ marginRight: '8px' }} />
            {' '}
            Title
        </>
    ),
};