import { Meta } from "@storybook/react";
import { ScrollViewProps } from "./ScrollViewProps";
import ScrollView from "./ScrollView";
import Image from "next/image";

export default {
  title: "Design System/ScrollView",
  component: ScrollView,
  tags: ["autodocs"],
  parameters: {
    docs: {
      description: {
        component:
          'The KendoReact ScrollView represents a horizontal collection of content or image views with built-in navigation between them.The ScrollView is built from the ground up and specifically for React, so that you get a high-performance control which delivers lightning-fast performance, integrates tightly with your application and with the rest of the KendoReact components, and is highly customizable. \n\n```javascript\nimport { ScrollView } from "@renault-ui-library"\n```',
      },
    },
  },
  argTypes: {
    dataTestId: {
      control: { type: "text" },
      description: "Specifies the data-test-id attribute for testing purposes.",
    },
    id: {
      control: { type: "text" },
      description: "Prop desc",
    },
    activeView: {
      control: { type: "number" },
      description: "Represents the current active view. Defaults to 1.",
    },
    arrows: {
      control: { type: "boolean" },
      description:
        "Enables or disables the built-in navigation arrows. Defaults to true.",
    },
    automaticViewChange: {
      control: { type: "boolean" },
      description:
        "Allows the ScrollView to switch the next page automatically after a short delay. Defaults to true.",
    },
    automaticViewChangeInterval: {
      control: { type: "number" },
      description:
        "Defines the automatic page change delay in milliseconds. Defaults to 5000.",
    },
    children: {
      control: { type: "text" },
      description: "Sets the ScrollView children elements.",
    },
    className: {
      control: { type: "text" },
      description:
        "Specifies a list of CSS classes that will be added to the ScrollView.",
    },
    dir: {
      control: { type: "text" },
      description:
        "Represents the dir HTML attribute. This is used to switch from LTR to RTL.",
    },
    endless: {
      control: { type: "boolean" },
      description:
        "Toggles the endless scrolling mode in which the data items are endlessly looped. Defaults to false.",
    },
    pageable: {
      control: { type: "boolean" },
      description: "Toggles the built-in pager. Defaults to true.",
    },
    pagerOverlay: {
      control: { type: "select", options: ["none", "dark", "light"] },
      description:
        "Sets the pager overlay. The possible values are: none, dark, light.",
    },
    style: {
      control: { type: "object" },
      description: "Sets additional CSS styles to the ScrollView.",
    },
  },
} as Meta;

const items: any[] = [
  {
    position: 1,
    url: "https://demos.telerik.com/blazor-ui/images/photos/1.jpg",
  },
  {
    position: 2,
    url: "https://demos.telerik.com/blazor-ui/images/photos/2.jpg",
  },
  {
    position: 3,
    url: "https://demos.telerik.com/blazor-ui/images/photos/3.jpg",
  },
  {
    position: 4,
    url: "https://demos.telerik.com/blazor-ui/images/photos/4.jpg",
  },
  {
    position: 5,
    url: "https://demos.telerik.com/blazor-ui/images/photos/5.jpg",
  },
];

export const Default = (args: ScrollViewProps): JSX.Element => (
  <ScrollView style={{ width: "512px", height: "384px" }} {...args}>
    {items.map((item, index) => (
      <div key={index}>
        <p>
          Showing image {item.position} of {items.length}.
        </p>
        <Image
          src={item.url}
          alt={`KendoReact ScrollView Photo ${item.position}`}
          width={512}
          height={384}
          draggable={false}
        />
      </div>
    ))}
  </ScrollView>
);

Default.args = {
  dataTestId: "scrollview-data-testid",
  endless: false,
};