import { useState } from 'react';
import { Meta, StoryObj } from '@storybook/react';
import { action } from '@storybook/addon-actions';
import { ClockBorderless } from '@transferwise/icons';

import { Sentiment } from '../common';
import { Button } from '..';
import Alert, { AlertArrowPosition } from './Alert';

export default {
  component: Alert,
  title: 'Feedback/Alert',
  args: {
    type: Sentiment.POSITIVE,
    active: true,
    message:
      'Payments sent to your bank details **today** might not arrive in time for the holidays.',
  },
  argTypes: {
    arrow: {
      name: 'arrow (deprecated)',
      type: {
        name: 'enum',
        value: Object.keys(AlertArrowPosition),
      },
    },
    type: {
      type: {
        name: 'enum',
        value: [
          Sentiment.POSITIVE,
          Sentiment.NEGATIVE,
          Sentiment.NEUTRAL,
          Sentiment.WARNING,
          Sentiment.PENDING,
        ],
      },
    },
  },
  tags: ['autodocs'],
} satisfies Meta<typeof Alert>;

type Story = StoryObj<typeof Alert>;

export const Basic: Story = {};

export const WithLinkAction: Story = {
  args: {
    action: {
      href: '/',
      text: 'Read more',
    },
    onDismiss: () => {},
  },
};

export const WithButtonAction: Story = {
  args: {
    action: {
      onClick: action('alert action clicked'),
      text: 'Open',
    },
    onDismiss: () => {},
  },
};

export const WithArrow: Story = {
  args: {
    arrow: AlertArrowPosition.TOP_LEFT,
    onDismiss: () => {},
  },
};

const CustomIcon = () => {
  return (
    <div
      style={{
        width: '100%',
        height: '100%',
        color: '#ffffff',
        backgroundColor: '#454745',
        display: 'flex',
        alignItems: 'center',
        borderRadius: '50%',
        justifyContent: 'center',
      }}
    >
      <ClockBorderless size="32" />
    </div>
  );
};

export const WithCustomIcon: Story = {
  args: {
    icon: <CustomIcon />,
    onDismiss: () => {},
  },
};

export const WithTitle: Story = {
  args: {
    type: Sentiment.NEUTRAL,
    title: 'We’re reviewing your information.',
    onDismiss: () => {},
  },
};

/**
 * For ARIA live region to function correctly with screen readers,
 * the container with an appropriate ARIA role (in the case of this
 * component, it's `status` or `alert`) must be rendered first.
 * Once present in the accessibility tree, its dynamic contents
 * will be announced correctly.
 *
 * Because of that, using logical AND (&&) operator is discouraged
 * and, instead, engineers should toggle the `active` prop which
 * provides that logic internally.
 */
export const ConditionallyRendered: Story = {
  render: function Render(args) {
    const [isActive, setIsActive] = useState(false);

    return (
      <>
        <Button htmlType="button" onClick={() => setIsActive((value) => !value)}>
          Trigger Alert
        </Button>

        <Alert {...args} active={isActive} className="m-t-5" />
      </>
    );
  },
  parameters: {
    docs: {
      source: {
        code: `
function Render (args) {
  const [isActive, setIsActive] = useState(false);

  return (
    <>
      <Button htmlType="button" onClick={() => setIsActive(value => !value)}>
        Trigger Alert
      </Button>

      <Alert {...args} active={isActive} className="m-t-5" />
    </>
  )
}`,
      },
    },
  },
};
