import { Stack } from '@mui/material';
import { type Meta, type StoryObj } from '@storybook/react-vite';
import { IconDeviceDesktopAnalytics } from '@tabler/icons-react';

import ImgAvatar1 from '../../../../static/avatar1.png';
import { defaultOptions } from '../../composed-components/MenuList/stories';
import { type PillsProps } from '../Pills/types';

import Accordion from '.';

const meta: Meta<typeof Accordion> = {
  component: Accordion,
  title: 'Design System/Accordion',
  tags: ['autodocs'],
  argTypes: {
    customDetail: {
      control: false,
    },
    avatar: {
      description: 'See AvatarProps',
    },
    pill: {
      description: 'See PillsProps',
    },
  },
  args: {},
  parameters: {
    backgrounds: {
      values: [
        { name: 'Dark', value: '#333' },
        { name: 'Light', value: '#F7F9F2' },
      ],
      default: 'Light',
    },
  },
};

export default meta;

type Story = StoryObj<typeof Accordion>;

export const AccordionWithCustomChildren: Story = {
  args: {
    elevation: 0,
    avatar: {
      src: ImgAvatar1,
      alt: '',
    },
    title: 'Title',
    caption: 'copetin',
    description: 'descripción',
    pill: {
      label: 'Info',
      type: 'success',
    },
    menuList: {
      options: defaultOptions,
    },
    customDetail: <>hola</>,
    hasPadding: true,
  },
};

export const AccordionWithTextDetail: Story = {
  args: {
    elevation: 0,
    title: '¿Como puedo hacer tal cosa?',
    textDetail: {
      description:
        'Este es un texto explicativo que responde a la pregunta. Lorem ipsum dolor sit amet consectetur. Consequat elementum eleifend eget erat dictumst adipiscing sed. Condimentum varius cum nibh sed quis sociis molestie. Amet dui eget sem curabitur sed risus eget. Est egestas lobortis auctor risus. Sit nunc luctus luctus urna quis id.',
      link: 'http://www2.',
      label: 'Más información',
    },
    hasPadding: true,
  },
};

export const AccordionList: Story = {
  render: () => {
    const accordinList = [
      {
        elevation: 0,
        avatar: {
          src: ImgAvatar1,
          alt: '',
        },
        title: 'Title1',
        caption: 'copetin',
        description: 'descripción',
        pill: {
          label: 'Info',
          type: 'warning',
        } as PillsProps,
        customDetail: <>hola</>,
      },
      {
        elevation: 0,
        avatar: {
          src: ImgAvatar1,
          alt: '',
        },
        title: 'Title1',
        caption: 'copetin',
        pill: {
          label: 'Info',
          type: 'warning',
        } as PillsProps,
        customDetail: <>hola</>,
      },
    ];

    return (
      <Stack sx={{ gap: 2 }}>
        {accordinList.map((elem, index) => (
          <Accordion
            disableGutters
            key={`${elem.title}-${index}`}
            {...elem}
          />
        ))}
      </Stack>
    );
  },
};

export const WithAvatarAndPill: Story = {
  args: {
    elevation: 0,
    title: 'Mesa de ayuda',
    textDetail: {
      description:
        'Este es un texto explicativo que responde a la pregunta. Lorem ipsum dolor sit amet consectetur. Consequat elementum eleifend eget erat dictumst adipiscing sed. Condimentum varius cum nibh sed quis sociis molestie. Amet dui eget sem curabitur sed risus eget. Est egestas lobortis auctor risus. Sit nunc luctus luctus urna quis id.',
      link: 'http://www2.',
      label: 'Más información',
    },
    description: '5 Colaboradores',
    avatar: {
      Icon: IconDeviceDesktopAnalytics,
      color: 'highlight',
    },
    pill: {
      label: 'Activo',
      type: 'success',
      hasIcon: false,
    } satisfies PillsProps,
    hasPadding: true,
  },
};
