import { action } from 'storybook/actions';
import { Assets } from '@wise/art';

import { Nudge } from '..';

export default {
  component: Nudge,
  title: 'Prompts/Nudge',
};

export const Default = () => {
  return (
    <div className="d-flex flex-column">
      <Nudge
        mediaName="globe"
        className="m-b-2"
        title="Text that is no longer than two lines."
        link="Link"
        href="#"
        onClick={action('action clicked')}
        onDismiss={action('dismissed')}
      />
      <Nudge
        mediaName="lock"
        className="m-b-2"
        title="Text that is no longer than two lines."
        link="Link"
        href="#"
        onClick={action('action clicked')}
        onDismiss={action('dismissed')}
      />
      <Nudge
        mediaName="wallet"
        className="m-b-2"
        title="Text that is no longer than two lines."
        link="Link"
        href="#"
        onClick={action('action clicked')}
        onDismiss={action('dismissed')}
      />
      <Nudge
        mediaName="gear"
        className="m-b-2"
        title="Text that is no longer than two lines."
        link="Link"
        href="#"
        onClick={action('action clicked')}
        onDismiss={action('dismissed')}
      />
      <Nudge
        mediaName="invite-letter"
        className="m-b-2"
        title="Text that is no longer than two lines."
        link="Link"
        href="#"
        onClick={action('action clicked')}
        onDismiss={action('dismissed')}
      />
      <Nudge
        mediaName="personal-card"
        className="m-b-2"
        title="Text that is no longer than two lines."
        link="Link"
        href="#"
        onClick={action('action clicked')}
        onDismiss={action('dismissed')}
      />
      <Nudge
        mediaName="business-card"
        className="m-b-2"
        title="Text that is no longer than two lines."
        link="Link"
        href="#"
        onClick={action('action clicked')}
        onDismiss={action('dismissed')}
      />
      <Nudge
        mediaName={Assets.HEART}
        className="m-b-2"
        title="Text that is no longer than two lines."
        link="Link"
        href="#"
        onClick={action('action clicked')}
        onDismiss={action('dismissed')}
      />
      <Nudge
        mediaName={Assets.MULTI_CURRENCY}
        className="m-b-2"
        title="Text that is no longer than two lines."
        link="Link"
        href="#"
        onClick={action('action clicked')}
        onDismiss={action('dismissed')}
      />
      <Nudge
        mediaName={Assets.SHOPPING_BAG}
        className="m-b-2"
        title="Text that is no longer than two lines."
        link="Link"
        href="#"
        onClick={action('action clicked')}
        onDismiss={action('dismissed')}
      />
      <Nudge
        mediaName={Assets.FLOWER}
        className="m-b-2"
        title="Text that is no longer than two lines."
        link="Link"
        href="#"
        onClick={action('action clicked')}
        onDismiss={action('dismissed')}
      />
      <Nudge
        mediaName={Assets.BACKPACK}
        className="m-b-2"
        title="Text that is no longer than two lines."
        link="Link"
        href="#"
        onClick={action('action clicked')}
        onDismiss={action('dismissed')}
      />
      <Nudge
        mediaName={Assets.GIFT_BOX}
        className="m-b-2"
        title="Text that is no longer than two lines."
        link="Link"
        href="#"
        onClick={action('action clicked')}
        onDismiss={action('dismissed')}
      />
    </div>
  );
};

export const DefaultWithPersist = () => {
  return (
    <div>
      <Nudge
        mediaName="globe"
        title="Text that is no longer than two lines."
        id="NEPTUNE_TEST_COMPONENT"
        className="m-y-2"
        persistDismissal
        isPreviouslyDismissed={action('is previously dismissed first alert')}
        onClick={action('action clicked')}
        onDismiss={action('dismissed')}
      />

      <Nudge
        mediaName="globe"
        title="Text that is no longer than two lines2."
        id="NEPTUNE_TEST_COMPONENT_2"
        className="m-y-2"
        persistDismissal
        isPreviouslyDismissed={action('is previously dismissed second alert')}
        onClick={action('action clicked')}
        onDismiss={action('dismissed')}
      />
    </div>
  );
};

export const WithAction = () => {
  return (
    <div>
      <Nudge
        mediaName="globe"
        title="Text that is no longer than two lines."
        id="NEPTUNE_TEST_COMPONENT"
        className="m-y-2"
        persistDismissal
        isPreviouslyDismissed={action('is previously dismissed first alert')}
        action={{
          href: '#',
          text: 'Learn more',
        }}
        onDismiss={action('dismissed')}
      />

      <Nudge
        mediaName="globe"
        title="Text that is no longer than two lines2."
        id="NEPTUNE_TEST_COMPONENT_2"
        className="m-y-2"
        persistDismissal
        isPreviouslyDismissed={action('is previously dismissed second alert')}
        action={{
          onClick: action('action click'),
          text: 'Perform action',
        }}
        onDismiss={action('dismissed')}
      />
    </div>
  );
};