import React from "react";
import { render } from "@testing-library/react";
import "@testing-library/jest-dom";
import { WindowProps } from "../WindowProps";
import Window from "../Window";

const CustomCloseButton = () => <button>Close</button>;
const CustomMaximizeButton = () => <button>Maximize</button>;
const CustomMinimizeButton = () => <button>Minimize</button>;
const CustomRestoreButton = () => <button>Restore</button>;

describe("Window Component", () => {
  const props: WindowProps = {
    dataTestId: "test-id",
    appendTo: document.body,
    className: "custom-window",
    closeButton: CustomCloseButton,
    doubleClickStageChange: true,
    draggable: true,
    height: 300,
    initialHeight: 200,
    initialLeft: 100,
    initialTop: 50,
    initialWidth: 400,
    left: 150,
    maximizeButton: CustomMaximizeButton,
    minHeight: 100,
    minimizeButton: CustomMinimizeButton,
    minWidth: 150,
    modal: true,
    overlayStyle: { backgroundColor: "rgba(0, 0, 0, 0.5)" },
    resizable: true,
    restoreButton: CustomRestoreButton,
    shouldUpdateOnDrag: true,
    stage: "DEFAULT",
    style: { border: "1px solid black" },
    themeColor: "primary",
    title: "Window Title",
    top: 100,
    width: 500,
  };

  it("renders all props correctly", () => {
    render(<Window {...props} />);
  });

  it("matches the snapshot", () => {
    const { asFragment } = render(<Window {...props} />);
    expect(asFragment()).toMatchSnapshot();
  });
});