import type { Meta, StoryObj } from '@storybook/react-webpack5';
import React from 'react';
import Sticky from './Sticky';
import { allModes } from '../../.storybook/modes';

const meta: Meta<typeof Sticky> = {
  component: Sticky,
  title: 'Dialogs/Sticky',
  args: {
    open: true,
    position: 'bottom', // Default position
    children: (
      <div className="d-flex justify-content-start align-items-start flex-wrap p-x-4 p-y-4">
        <p className="m-b-0">Default text for Sticky component.</p>
      </div>
    ),
  },
  parameters: {
    chromatic: {
      // 🔶 Test each story for Sticky
      modes: {
        ltr: allModes.ltr,
        rtl: allModes.rtl,
        light: allModes.light,
        dark: allModes.dark,
        brightGreen: allModes.brightGreen,
        forestGreen: allModes.forestGreen,
        desktop: allModes.desktop,
        tablet: allModes.tablet,
        largeMobile: allModes.largeMobile,
        smallMobile: allModes.smallMobile,
        zoom400: allModes.zoom400,
      },
    },
    docs: {
      canvas: {
        layout: 'padded',
      },
    },
  },
};

export default meta;

// Represents a story object for the `Sticky` component.
type Story = StoryObj<typeof Sticky>;

export const Default: Story = {}; // Default story with no additional props

export const PositionTop: Story = {
  args: {
    position: 'top', // Set the position prop to 'top'
  },
};

export const WithLongContent: Story = {
  args: {
    children: (
      <div className="p-x-4 p-y-4">
        <p>
          Lorem ipsum dolor sit, amet consectetur adipisicing elit. Optio ipsa rem fugiat
          repellendus nisi dolorum, recusandae aperiam repudiandae natus quaerat, explicabo fugit!
          Odit illum vero eius quasi, error soluta veritatis.
        </p>
        <p>
          Recusandae a animi tenetur magni itaque optio in aut enim odio. Minima, veritatis error
          dicta expedita aliquam officiis deleniti repellat rerum nam ad quam dolorum reiciendis
          voluptas doloremque quis eveniet.
        </p>
        <p>
          Adipisci nulla quos magnam blanditiis minima nesciunt odio mollitia, fuga ullam aliquid
          qui iure delectus dolores corporis officiis autem iste quia at ea sint tempore,
          repudiandae amet? Error, praesentium eaque.
        </p>
      </div>
    ),
  },
};