import { ReactElement, useState } from 'react';
import { Meta, StoryObj } from '@storybook/react-webpack5';
import { fn } from 'storybook/test';
import { Bank } from '@transferwise/icons';
import { ActionPrompt } from './ActionPrompt';
import { lorem10 } from '../../test-utils';
import { withVariantConfig } from '../../../.storybook/helpers';

const meta: Meta<typeof ActionPrompt> = {
  title: 'Prompts/ActionPrompt',
  component: ActionPrompt,
  tags: ['new'],
};

export default meta;
type Story = StoryObj<typeof ActionPrompt>;

const withComponentGrid =
  ({ maxWidth = 'auto', gap = '1rem' } = {}) =>
  (Story: () => ReactElement) => (
    <div
      style={{
        width: '100%',
        display: 'flex',
        flexDirection: 'column',
        justifyContent: 'flex-start',
        alignItems: 'flex-start',
        alignContent: 'flex-start',
        gap,
        maxWidth,
      }}
    >
      <Story />
    </div>
  );

export const AllSentiments: Story = {
  render: () => {
    return (
      <>
        {(['negative', 'warning', 'neutral', 'success', 'proposition'] as const).map(
          (sentiment) => (
            <ActionPrompt
              key={sentiment}
              sentiment={sentiment}
              title="Title"
              description={lorem10}
              action={{ label: 'Primary', onClick: fn() }}
              actionSecondary={{ label: 'Secondary', onClick: fn() }}
              className="m-b-2"
              onDismiss={fn()}
            />
          ),
        )}
      </>
    );
  },
  decorators: [withComponentGrid()],
};

export const Mobile: Story = {
  ...AllSentiments,
  ...withVariantConfig(['mobile'], AllSentiments),
};

export const PrimaryActionOnly: Story = {
  args: {
    sentiment: 'proposition',
    title: 'Payment successful',
    description: 'Your money is on its way',
    action: { label: 'View details', onClick: fn() },
    onDismiss: fn(),
  },
};

export const WithoutDescription: Story = {
  render: () => {
    return (
      <>
        <ActionPrompt
          sentiment="warning"
          title="Session expiring soon"
          action={{ label: 'Stay logged in', onClick: fn() }}
          actionSecondary={{ label: 'Log out', onClick: fn() }}
          onDismiss={fn()}
        />
        <ActionPrompt
          sentiment="success"
          title="Session expiring soon"
          action={{ label: 'Stay logged in', onClick: fn() }}
        />
        <ActionPrompt
          title="Session expiring soon"
          action={{ label: 'Stay logged in', onClick: fn() }}
        />
      </>
    );
  },
  decorators: [withComponentGrid()],
};

export const Media: Story = {
  render: () => {
    return (
      <>
        <ActionPrompt
          sentiment="neutral"
          title="Custom image"
          description={lorem10}
          media={{ imgSrc: '../../wise-card.svg' }}
          action={{ label: 'Invite now', onClick: fn() }}
        />
        <ActionPrompt
          sentiment="neutral"
          title="Profile Image"
          description={lorem10}
          media={{ avatar: { imgSrc: '../../avatar-rectangle-fox.webp' } }}
          action={{ label: 'Invite now', onClick: fn() }}
        />
        <ActionPrompt
          sentiment="proposition"
          title="Business Profile"
          description={lorem10}
          media={{ avatar: { profileType: 'BUSINESS', badge: { flagCode: 'GB' } } }}
          action={{ label: 'Invite now', onClick: fn() }}
        />
        <ActionPrompt
          sentiment="negative"
          title="Personal Profile"
          description={lorem10}
          media={{ avatar: { profileType: 'PERSONAL', badge: { flagCode: 'EU' } } }}
          action={{ label: 'Invite now', onClick: fn() }}
        />
        <ActionPrompt
          sentiment="warning"
          title="Custom Icon"
          description={lorem10}
          media={{ avatar: { asset: <Bank /> } }}
          action={{ label: 'Invite now', onClick: fn() }}
        />
        <ActionPrompt
          sentiment="success"
          title="Initials"
          description={lorem10}
          media={{ avatar: { profileName: 'John Doe' } }}
          action={{ label: 'Invite now', onClick: fn() }}
          actionSecondary={{ label: 'Maybe later', onClick: fn() }}
        />
      </>
    );
  },
  decorators: [withComponentGrid()],
};

export const OnDismiss: Story = {
  render: () => {
    const [showNeutralPrompt, setShowNeutralPrompt] = useState(true);
    const [showSuccessPrompt, setShowSuccessPrompt] = useState(true);

    return (
      <>
        {showNeutralPrompt && (
          <ActionPrompt
            sentiment="proposition"
            title="Payment successful"
            description="Your money is on its way"
            action={{ label: 'View details', onClick: fn() }}
            className="m-b-2"
            onDismiss={() => setShowNeutralPrompt(false)}
          />
        )}
        {showSuccessPrompt && (
          <ActionPrompt
            sentiment="success"
            title="Payment successful"
            description="Your money is on its way"
            action={{ label: 'View details', onClick: fn() }}
            onDismiss={() => setShowSuccessPrompt(false)}
          />
        )}
      </>
    );
  },
};
