import { Typography } from '@mui/material';
import { type Meta, type StoryObj } from '@storybook/react-vite';

import CardContainer from '.';

const meta: Meta<typeof CardContainer> = {
  component: CardContainer,
  title: 'Design System/Cards/CardContainer',
  tags: ['autodocs'],
  args: {
    badge: {
      label: 'Badge',
      type: 'success',
      hasIcon: true,
    },
    children: (
      <Typography variant="body1">
        This is an example of content inside the CardContainer.
      </Typography>
    ),
  },
};

export default meta;

type Story = StoryObj<typeof CardContainer>;

export const Default: Story = {
  args: {
    badge: undefined,
    children: (
      <Typography variant="body1">
        This is a default CardContainer with no badge or footer.
      </Typography>
    ),
  },
};

export const WithOnClick: Story = {
  args: {
    badge: undefined,
    children: (
      <Typography variant="body1">
        You can click me! But this is also a default CardContainer with no badge
        or footer.
      </Typography>
    ),
    onClick: () => alert('Default clicking'),
  },
};

export const WithOnClickNoAction: Story = {
  args: {
    badge: undefined,
    noHover: true,
    children: (
      <Typography variant="body1">
        You can click me! But this is also a default CardContainer with no badge
        or footer.
      </Typography>
    ),
    onClick: () => alert('Default clicking'),
  },
};

export const WithBadge: Story = {
  args: {
    badge: {
      label: 'Info Badge',
      type: 'info',
      hasIcon: true,
    },
  },
};

export const WithBadgeNoIcon: Story = {
  args: {
    badge: {
      label: 'Info Badge No Icon',
      type: 'info',
      hasIcon: false,
    },
  },
};

export const Error: Story = {
  args: {
    badge: {
      label: 'Error Badge',
      type: 'error',
      hasIcon: true,
    },
    children: (
      <Typography variant="body1">Container with an error badge.</Typography>
    ),
  },
};

export const Success: Story = {
  args: {
    badge: {
      label: 'Success Badge',
      type: 'success',
      hasIcon: true,
    },
    children: (
      <Typography variant="body1">Container with a success badge.</Typography>
    ),
  },
};

export const Warning: Story = {
  args: {
    badge: {
      label: 'Warning Badge',
      type: 'warning',
      hasIcon: true,
    },
    children: (
      <Typography variant="body1">Container with a warning badge.</Typography>
    ),
  },
};

export const Info: Story = {
  args: {
    badge: {
      label: 'Info Badge',
      type: 'info',
      hasIcon: true,
    },
    children: (
      <Typography variant="body1">Container with an info badge.</Typography>
    ),
  },
};

export const Highlight: Story = {
  args: {
    badge: {
      label: 'Highlight Badge',
      type: 'highlight',
      hasIcon: true,
    },
    children: (
      <Typography variant="body1">Container with a highlight badge.</Typography>
    ),
  },
};

export const FullWidth: Story = {
  args: {
    badge: {
      label: 'Info Badge',
      type: 'info',
      hasIcon: true,
    },
    fullWidth: true,
    children: (
      <Typography variant="body1">Container with an info badge.</Typography>
    ),
  },
};

export const WithFooterSingleAction: Story = {
  args: {
    badge: undefined,
    footer: {
      action1: {
        title: 'Learn More',
        onClick: () => alert('Learn More clicked'),
      },
      text: 'This is footer text.',
    },
  },
};

export const WithFooterSingleActionAndNoHelper: Story = {
  args: {
    badge: undefined,
    footer: {
      action1: {
        title: 'Learn More',
        onClick: () => alert('Learn More clicked'),
      },
    },
  },
};

export const WithFooterDoubleAction: Story = {
  args: {
    badge: undefined,
    footer: {
      action1: {
        title: 'Accept',
        onClick: () => alert('Accept clicked'),
      },
      action2: {
        title: 'Decline',
        onClick: () => alert('Decline clicked'),
      },
    },
  },
};

export const WithBadgeAndFooter: Story = {
  args: {
    badge: {
      label: 'Success Badge',
      type: 'success',
      hasIcon: true,
    },
    footer: {
      action1: {
        title: 'Accept',
        onClick: () => alert('Accept clicked'),
      },
      action2: {
        title: 'Decline',
        onClick: () => alert('Decline clicked'),
      },
    },
  },
};

export const EventPropagation: Story = {
  args: {
    fullWidth: true,
    onClick: () => {
      alert('Clicked card!');
    },
    footer: {
      action1: {
        title: 'Accept',
        onClick: e => {
          e?.stopPropagation();
          alert('Accept clicked');
        },
      },
      action2: {
        title: 'Decline',
        onClick: () => alert('Decline clicked'),
      },
    },
  },
};

export const WithColorGrey: Story = {
  args: {
    color: 'grey',
  },
};

export const WithShadow: Story = {
  args: {
    hasShadow: true,
  },
};

export const WithImg: Story = {
  args: {
    badge: undefined,
    footer: {
      action1: {
        title: 'Accept',
        onClick: () => alert('Accept clicked'),
      },
      action2: {
        title: 'Decline',
        onClick: () => alert('Decline clicked'),
      },
    },
    img: 'https://external-content.duckduckgo.com/iu/?u=https%3A%2F%2Fimagenes.20minutos.es%2Fuploads%2Fimagenes%2F2024%2F05%2F15%2Funa-imagen-creada-por-la-herramienta-imagen-3-de-google.jpeg&f=1&nofb=1&ipt=14a3f0f9f5cd7a85de34990d17d6ec5d2ddb9d80c483c2dc984d1a4d2a9e181c',
  },
};