import React from "react";
import { render } from "@testing-library/react";
import "@testing-library/jest-dom";
import {
  Gantt,
  GanttDayView,
  GanttWeekView,
  GanttMonthView,
} from "@progress/kendo-react-gantt";

export const tasks = [
  {
    id: 1,
    title: "Task 1",
    start: new Date("2023-01-01"),
    end: new Date("2023-01-05"),
    percentComplete: 0.5,
  },
  {
    id: 2,
    title: "Task 2",
    start: new Date("2023-01-03"),
    end: new Date("2023-01-10"),
    percentComplete: 0.3,
  },
];

export const dependencies = [{ id: 1, from: 1, to: 2, type: "Finish-Start" }];

describe("Gantt Component", () => {
  const columns = [
    {
      field: "id",
      title: "ID",
      width: 70,
    },
    {
      field: "title",
      title: "Title",
      width: 200,
      expandable: true,
    },
    {
      field: "start",
      title: "Start",
      width: 120,
      format: "{0:MM/dd/yyyy}",
    },
    {
      field: "end",
      title: "End",
      width: 120,
      format: "{0:MM/dd/yyyy}",
    },
  ];

  const taskModelFields = {
    id: "id",
    start: "start",
    end: "end",
    title: "title",
    percentComplete: "percentComplete",
    isRollup: "isRollup",
    isExpanded: "isExpanded",
    isInEdit: "isInEdit",
    children: "subtasks",
  };

  const props = {
    dataTestId: "test-id",
    style: {},
    taskData: tasks,
    taskModelFields,
    dependencyData: dependencies,
    columns,
  };

  it("renders all props correctly", () => {
    render(
      <Gantt {...props}>
        <GanttDayView />
        <GanttWeekView />
        <GanttMonthView />
      </Gantt>
    );
  });

  it("matches the snapshot", () => {
    const { asFragment } = render(
      <Gantt {...props}>
        <GanttDayView />
        <GanttWeekView />
        <GanttMonthView />
      </Gantt>
    );

    const fragment = asFragment();
    const cleanFragment = fragment.cloneNode(true) as HTMLElement;

    cleanFragment.querySelectorAll("[id]").forEach((el) => {
      el.removeAttribute("id");
    });

    expect(cleanFragment).toMatchSnapshot();
  });
});