import { Meta } from "@storybook/react";
import {
  SortableProps,
  SortableOnDragOverEvent,
  SortableOnNavigateEvent,
  SortableItemUIProps,
} from "./SortableProps";
import Sortable from "./Sortable";
import * as React from "react";

const getBaseItemStyle = (isActive: any) => ({
  height: 70,
  padding: "0 24px",
  lineHeight: "68px",
  fontSize: "16px",
  textAlign: "center",
  outline: "none",
  border: "1px solid",
  cursor: "move",
  display: "inline-block",
  background: isActive ? "#27aceb" : "#bfe7f9",
  color: isActive ? "#fff" : "#1494d0",
  borderColor: isActive ? "#27aceb" : "#fff",
});

const SortableItemUI: React.FC<SortableItemUIProps> = (props) => {
  const { isDisabled, isActive, style, attributes, dataItem, forwardRef } =
    props;
  const classNames = ["col-xs-6 col-sm-3"];

  if (isDisabled) {
    classNames.push("k-disabled");
  }

  return (
    <div
      ref={forwardRef}
      {...attributes}
      style={{
        ...getBaseItemStyle(isActive),
        ...style,
      }}
      className={classNames.join(" ")}
    >
      {dataItem.text}
    </div>
  );
};

export default {
  title: "Design System/Sortable",
  component: Sortable,
  tags: ["autodocs"],
  parameters: {
    docs: {
      description: {
        component:
          'The Sortable provides a sortable drag-and-drop functionality to elements within a list. \n\n```javascript\nimport { Sortable } from "@renault-ui-library"\n```',
      },
    },
  },
  argTypes: {
    dataTestId: {
      control: { type: "text" },
      description: "Specifies the data-test-id attribute for testing purposes.",
    },
    animation: {
      control: { type: "boolean" },
      description:
        "Enables or disables the reorder animation of the Sortable items. defaults to true.",
    },
    className: {
      control: { type: "text" },
      description:
        "Defines the CSS class which is applied to the Sortable element.",
    },
    data: {
      control: { type: "object" },
      description: "(Required) The data items of the Sortable.",
    },
    disabledField: {
      control: { type: "text" },
      description: "The field which enables or disables an item.",
    },
    emptyItemUI: {
      control: { type: "object" },
      description: "The component that is rendered when no data is available.",
    },
    idField: {
      control: { type: "text" },
      description:
        "(Required) The field which uniquely identifies the Sortable items.",
    },
    itemUI: {
      control: { type: "object" },
      description: "(Required) The Sortable items UI.",
    },
    navigation: {
      control: { type: "boolean" },
      description:
        "Enables or disables the keyboard navigation. Defaults to true.",
    },
    style: {
      control: { type: "object" },
      description:
        "Defines the CSS styles which are applied to the Sortable element.",
    },
    tabIndex: {
      control: { type: "number" },
      description: "Specifies the tab index of the Sortable items.",
    },
    onDragEnd: {
      control: { type: "action" },
      description: "Fires when the user stops dragging an item.",
    },
    onDragOver: {
      control: { type: "action" },
      description:
        "Fires when the user is dragging an item over another Sortable item.",
    },
    onDragStart: {
      control: { type: "action" },
      description:
        "Fires when the user starts dragging an item. This event is preventable.",
    },
    onNavigate: {
      control: { type: "action" },
      description:
        "Fires when the user is navigates within the Srotable by using the keyboard.",
    },
  },
} as Meta;

export const Default = (args: SortableProps): JSX.Element => {
  const [data, setData] = React.useState<Array<object>>([
    { id: 1, text: "item1" },
    { id: 2, text: "item2" },
    { id: 3, text: "item3" },
    { id: 4, text: "item4" },
    { id: 5, text: "item5" },
    { id: 6, text: "item6" },
    { id: 7, text: "item7" },
    { id: 8, text: "item8" },
  ]);

  const onDragOver = (event: SortableOnDragOverEvent) => {
    setData(event.newState);
  };

  const onNavigate = (event: SortableOnNavigateEvent) => {
    setData(event.newState);
  };

  return (
    <div className="container-fluid">
      <Sortable
        idField={"id"}
        disabledField={"disabled"}
        data={data}
        itemUI={SortableItemUI}
        onDragOver={onDragOver}
        onNavigate={onNavigate}
      />
    </div>
  );
};

Default.args = {
  dataTestId: "sortable-data-testid",
  idField: "id",
  data: [],
  itemUI: () => <div></div>,
};