import React, {ComponentProps} from 'react';
import {Meta, StoryObj} from '@storybook/react';
import Slot from '@components/_HuGo/Slot';

import {BadgeVariant, CardContainer} from './index';

type CardContainerStoryArgs = ComponentProps<typeof CardContainer> & {
  badgeVariant?: BadgeVariant;
  hasIcon?: boolean;
  withImage?: boolean;
};

const meta: Meta<CardContainerStoryArgs> = {
  title: 'HuGo/CardContainer',
  component: CardContainer,
  argTypes: {
    elevation: {control: 'boolean'},
    withImage: {control: 'boolean'},
  },
  render: ({
    badgeVariant,
    footer,
    hasIcon,
    withImage,
    ...args
  }: CardContainerStoryArgs) => {
    const badge = badgeVariant && {
      variant: badgeVariant,
      text: 'Dato extra',
      hasIcon,
    };
    const customFooter = footer && {
      primaryText: footer?.primaryText || '',
      primaryVariant: footer?.primaryVariant || 'primary',
      onPrimaryPress: footer?.onPrimaryPress,
      primaryButtonContainerStyle: footer?.primaryButtonContainerStyle,
      secondaryText: footer?.secondaryText || '',
      onSecondaryPress: footer?.onSecondaryPress,
    };
    return (
      <CardContainer
        {...args}
        badge={badge}
        footer={customFooter}
        imageUrl={
          withImage ? {uri: 'https://picsum.photos/200/300'} : undefined
        }>
        <Slot />
      </CardContainer>
    );
  },
};

type Story = StoryObj<CardContainerStoryArgs>;

export const CardContainerComponent: Story = {
  args: {},
};

export const CardContainerWithFooterComponent: Story = {
  argTypes: {
    footer: {
      control: 'object',
      description:
        "Define 'primaryText', 'primaryVariant', 'onPrimaryPress', 'secondaryText', 'secondaryVariant', 'onSecondaryPress' to see initial variant",
    },
  },
  args: {
    footer: {
      primaryText: 'Primary action',
      primaryVariant: 'primary',
      primaryButtonContainerStyle: {flex: 1},
    },
  },
};

export const CardContainerWithBothButtons: Story = {
  argTypes: {
    footer: {
      control: 'object',
      description: 'Shows both primary and secondary buttons',
    },
  },
  args: {
    footer: {
      primaryText: 'Primary action',
      primaryVariant: 'primary',
      secondaryText: 'Secondary action',
    },
  },
};

export const CardContainerWithClickableDescriptionComponent: Story = {
  argTypes: {
    footer: {
      control: 'object',
      description: 'Demonstrates the primary and secondary buttons',
    },
  },
  args: {
    footer: {
      primaryText: 'Primary action',
      primaryVariant: 'primary',
      secondaryText: 'Secondary action',
      onSecondaryPress: () => {},
    },
  },
};

export const CardContainerWithBadgeComponent: Story = {
  argTypes: {
    badgeVariant: {
      control: 'radio',
      options: ['neutral', 'error', 'info', 'success', 'warning', 'highlight'],
    },
    badge: {
      control: 'object',
      description: "Define 'variant', 'text' and 'show' to see initial variant",
    },
    hasIcon: {control: 'boolean'},
  },
  args: {
    badgeVariant: 'error',
    badge: {
      variant: 'error',
      text: 'Dato extra',
    },
  },
};

export const CardContainerBadgeAndFooterComponent: Story = {
  argTypes: {
    badgeVariant: {
      control: 'radio',
      options: ['neutral', 'error', 'info', 'success', 'warning', 'highlight'],
    },
    footer: {
      control: 'object',
      description:
        "Define 'primaryText', 'primaryVariant', 'onPrimaryPress', 'secondaryText', 'secondaryVariant', 'onSecondaryPress' to see initial variant",
    },
    badge: {
      control: 'object',
      description: "Define 'variant', 'text' and 'show' to see initial variant",
    },
    hasIcon: {control: 'boolean'},
  },
  args: {
    badgeVariant: 'error',
    footer: {
      primaryText: 'Primary action',
      primaryVariant: 'primary',
      onPrimaryPress: () => {},
      secondaryText: 'Secondary action',
      onSecondaryPress: () => {},
    },
    badge: {
      variant: 'error',
      text: 'Dato extra',
    },
  },
};

export default meta;