import { Meta } from "@storybook/react";
import { TaskBoardProps } from "./TaskBoardProps";
import TaskBoard from "./TaskBoard";

import {
  TaskBoardToolbar as KendoTaskBoardToolbar,
  TaskBoardChangeEvent as KendoTaskBoardChangeEvent,
  TaskBoardColumnModel as KendoTaskBoardColumnModel,
  TaskBoardTaskModel as KendoTaskBoardTaskModel,
  TaskBoardPriority as KendoTaskBoardPriority,
} from "@progress/kendo-react-taskboard";
import { Input, InputChangeEvent } from "@progress/kendo-react-inputs";
import {
  CompositeFilterDescriptor as KendoCompositeFilterDescriptor,
  filterBy as KendoFilterBy,
} from "@progress/kendo-data-query";
import { Column } from "./SubComponent/Column";
import { Card } from "./SubComponent/Card";
import { cards } from "./mockData/cards";
import React from "react";
import Button from "../Buttons/Button/Button";

const tasks: KendoTaskBoardTaskModel[] = cards.map((c) => ({
  id: c.id,
  title: c.title,
  description: c.description,
  status: c.status,
  priority: c.priority,
}));

const columns: KendoTaskBoardColumnModel[] = [
  { id: 1, title: "To-Do", status: "todo" },
  { id: 2, title: "In Progress", status: "inProgress" },
  { id: 3, title: "Done", status: "done" },
];

const priorities: KendoTaskBoardPriority[] = [
  { priority: "Low Priority", color: "green" },
  { priority: "High Priority", color: "blue" },
  { priority: "Urgent", color: "orange" },
];

export default {
  title: "Design System/TaskBoard",
  component: TaskBoard,
  tags: ["autodocs"],
  parameters: {
    docs: {
      description: {
        component:
          'The TaskBoard provides a clean and user-friendly interface for managing tasks, notes, projects, people, or other kinds of items. \n\n```javascript\nimport { TaskBoard } from "@renault-ui-library"\n```',
      },
    },
  },
  argTypes: {
    dataTestId: {
      control: { type: "text" },
      description: "Specifies the data-test-id attribute for testing purposes.",
    },
    card: {
      control: { type: "object" },
      description: "Represents the TaskBoardCard component.",
    },
    children: {
      control: { type: "object" },
      description:
        "The React elements that will be rendered inside the toolbar of the TaskBoard.",
    },
    className: {
      control: { type: "text" },
      description:
        "Specifies a list of CSS classes that will be added to the TaskBoard element.",
    },
    column: {
      control: { type: "object" },
      description: "Represents the TaskBoardColumn component.",
    },
    columnData: {
      control: { type: "object" },
      description: "Specifies the column data from type TaskBoardColumnModel.",
    },
    id: {
      control: { type: "text" },
      description:
        "Specifies the id that will be added to the TaskBoard element.",
    },
    priorities: {
      control: { type: "object" },
      description: "Specifies the priorities of the task board.",
    },
    style: {
      control: { type: "object" },
      description: "Represents the styles that are applied to the TaskBoard.",
    },
    tabIndex: {
      control: { type: "number" },
      description:
        "Specifies the tabIndex that will be added to the TaskBoard Column and Card elements.",
    },
    taskData: {
      control: { type: "object" },
      description: "Represents the task data from type TaskBoardTaskModel.",
    },
    onChange: {
      control: { type: "function" },
      description:
        "Represents the onChange event. Triggered after tasks changes.",
    },
  },
} as Meta;

export const Default = (args: TaskBoardProps): JSX.Element => {
  const [filter, setFilter] = React.useState<string>("");
  const [taskData, setTaskData] =
    React.useState<KendoTaskBoardTaskModel[]>(tasks);
  const [columnsData, setColumnsData] =
    React.useState<KendoTaskBoardColumnModel[]>(columns);

  const onSearchChange = React.useCallback((event: InputChangeEvent) => {
    setFilter(event.value);
  }, []);

  const resultTasks = React.useMemo(() => {
    const filterDesc: KendoCompositeFilterDescriptor = {
      logic: "and",
      filters: [{ field: "title", operator: "contains", value: filter }],
    };
    return filter ? KendoFilterBy(taskData, filterDesc) : taskData;
  }, [filter, taskData]);

  const onChangeHandler = React.useCallback(
    (event: KendoTaskBoardChangeEvent) => {
      if (event.type === "column") {
        setColumnsData(event.data as KendoTaskBoardColumnModel[]);
      } else {
        if (event.item && event.item.id === undefined) {
          event.item.id = event.data.length + 1;
        }
        setTaskData(event.data as KendoTaskBoardTaskModel[]);
      }
    },
    []
  );

  const onAddColumn = () => {
    const newColumn: KendoTaskBoardColumnModel = {
      id: columnsData.length + 1,
      title: "New Column",
      status: "new",
      edit: true,
    };
    setColumnsData([...columnsData, newColumn]);
  };

  return (
    <TaskBoard
      columnData={columnsData}
      taskData={resultTasks}
      priorities={priorities}
      onChange={onChangeHandler}
      column={Column}
      card={Card}
      style={{ height: "700px" }}
      tabIndex={0}
    >
      <KendoTaskBoardToolbar>
        <Button icon="add" onClick={onAddColumn}>
          Add Column
        </Button>
        <span className="k-spacer" />
        <Input
          placeholder="Search..."
          onChange={onSearchChange}
          value={filter}
        />
      </KendoTaskBoardToolbar>
    </TaskBoard>
  );
};