import type { Args } from '@storybook/react-webpack5';
import { Illustration } from '@wise/art';
import { createSandboxStory, globalScope } from '../../.storybook/components/sandbox/SandboxEditor';

import Display from '../display';

import Carousel, { type CarouselCard } from './Carousel';

export default {
  component: Carousel,
  title: 'Navigation/Carousel',
};

const carouselCards: CarouselCard[] = [
  {
    id: 'YOUR_INVOICE',
    type: 'button',
    onClick: () => {
      console.log('Clicked on button');
    },
    content: (
      <div className="d-flex p-a-1 p-t-0 flex-column align-items-center">
        <div style={{ position: 'absolute' }}>
          <Illustration disablePadding name="globe" size="small" alt="" />
        </div>
        <div style={{ position: 'absolute', zIndex: '2', bottom: '8px', left: '16px' }}>
          <Display type="display-small">Here there, everywhere</Display>
        </div>
      </div>
    ),
  },
  {
    id: 'YOUR_WEBSITE',
    type: 'promo',
    onClick: () => {
      console.log('hi');
    },
    href: 'http://wise.com',
    title: 'Wise',
    description: 'The best way to move money internationally',
  },
  {
    id: 'SHOP_OR_STALL',
    type: 'anchor',
    href: 'https://wise.com',
    hrefTarget: '_blank',
    onClick: () => {},
    styles: {
      backgroundImage:
        'url(https://wise.com/public-resources/assets/team-page/tapestry/team_member_tapestry_01.jpg)',
      backgroundSize: 'cover',
    },
    content: <Display type="display-small">Get Quick Pay</Display>,
  },
];

export const Sandbox = createSandboxStory({
  code: `const App = () => {
  const cards = [
    {
      id: 'card-1',
      type: 'button',
      onClick: console.log,
      content: (
        <div className="d-flex p-a-1 flex-column align-items-center">
          <Illustration disablePadding name="globe" size="small" alt="" />
        </div>
      ),
    },
    {
      id: 'card-2',
      type: 'promo',
      href: '#',
      title: 'Wise',
      description: 'The best way to move money internationally',
    },
    {
      id: 'card-3',
      type: 'anchor',
      href: '#',
      hrefTarget: '_blank',
      content: <Display type="display-small">Get Quick Pay</Display>,
    },
  ];

  return <Carousel header="Carousel heading" cards={cards} />;
};`,
  scope: globalScope,
});

export const CarouselDefault = {
  render: (args: Args) => {
    return <Carousel header="Pretty nifty stuff" cards={carouselCards} {...args} />;
  },
  args: {},
};
