import { Meta, StoryObj } from '@storybook/react-webpack5';
import AvatarView from '../avatarView';
import { ProfileType } from '../common';
import Logo from '../logo';
import { allModes } from '../../.storybook/modes';

import FlowNavigation, { FlowNavigationProps } from './FlowNavigation';

const noop = () => {};

const baseProps: FlowNavigationProps = {
  steps: [],
  activeStep: 0,
  avatar: <AvatarView profileType={ProfileType.PERSONAL} />,
  logo: <Logo />,
  onClose: noop,
  onGoBack: noop,
};

const meta: Meta<typeof FlowNavigation> = {
  component: FlowNavigation,
  title: 'Navigation/FlowNavigation/Tests',
  tags: ['!autodocs', '!manifest'],
  parameters: {
    padding: '0',
  },
};
export default meta;

type Story = StoryObj<typeof FlowNavigation>;

export const EmptySteps: Story = {
  parameters: {
    chromatic: {
      modes: {
        tablet: allModes.tablet,
      },
    },
  },
  globals: {
    viewport: 'tablet',
  },
  render: () => <FlowNavigation {...baseProps} />,
};

export const LongLabel: Story = {
  parameters: {
    chromatic: {
      viewports: [360],
    },
    viewport: {
      options: {
        narrow: {
          name: '360px',
          styles: { width: '360px', height: '600px' },
          type: 'mobile',
        },
      },
    },
  },
  globals: {
    viewport: 'narrow',
  },
  render: () => (
    <FlowNavigation
      {...baseProps}
      steps={[
        { label: 'Amount', hoverLabel: '100 GBP', onClick: noop },
        { label: 'You', hoverLabel: 'Elena Durante', onClick: noop },
        { label: 'Kedvezményezett', hoverLabel: 'Daniele Tomboro', onClick: noop },
        { label: 'Review', hoverLabel: 'Antonio Dozortevo', onClick: noop },
        { label: 'Pay', hoverLabel: 'Enrico Gusso', onClick: noop },
      ]}
      activeStep={2}
    />
  ),
};
