import { action } from 'storybook/actions';
import { Assets } from '@wise/art';
import { createSandboxStory, globalScope } from '../../.storybook/components/sandbox/SandboxEditor';

import { Nudge } from '..';

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

export const Sandbox = createSandboxStory({
  code: `<Nudge
  mediaName="globe"
  title="Get special rewards when you spend from a new balance"
  link="Add balance"
  href="#"
  action={{
    'aria-label': 'Learn more about rewards',
    text: 'Learn more',
    href: '#',
  }}
  onDismiss={() => console.log('dismissed')}
/>`,
  scope: globalScope,
});

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')}
      />
      <Nudge
        mediaName={Assets.DOCUMENTS}
        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>
  );
};
