import { fireEvent, render } from "@testing-library/react";

import { BlockActionControl } from "../BlockActionControl";
import { Context } from "../Context";

describe("rendering BlockActionControl", () => {
  let isIndicating;
  const setIsIndicating = vi.fn((val) => (isIndicating = val));
  let isActive;
  const setIsActive = vi.fn((val) => (isActive = val));
  describe("passed props", () => {
    it("renders children", () => {
      const { container } = render(
        <BlockActionControl>
          <p>test</p>
        </BlockActionControl>,
      );
      expect(container.querySelector("p")).toBeInTheDocument();
    });
    it("BlockActionControl passes props to child", () => {
      const { getByTestId } = render(
        <BlockActionControl data-testid="test-id">
          <p>test</p>
        </BlockActionControl>,
      );
      expect(getByTestId("test-id").tagName).toBe("P");
    });
    it("BlockActionControl passes class block-action__control", () => {
      const { container } = render(
        <BlockActionControl>
          <p>test</p>
        </BlockActionControl>,
      );
      expect(container.querySelector("p")).toBeInTheDocument();
      expect(container.querySelector("p")).toHaveClass("block-action__control");
    });
    it("isActive is set to true after mouseClick if its original value was false", () => {
      isActive = false;
      const { container } = render(
        <Context.Provider
          value={{
            setIsActive: setIsActive,
            isActive: isActive,
          }}
        >
          <BlockActionControl>
            <p>test</p>
          </BlockActionControl>
        </Context.Provider>,
      );
      expect(container.querySelector("p")).toBeInTheDocument();
      fireEvent.click(container.querySelector("p"));
      expect(isActive).toBe(true);
    });
    it("isActive is set to false after mouseClick if its original value was true", () => {
      isActive = true;
      const { container } = render(
        <Context.Provider
          value={{
            setIsActive: setIsActive,
            isActive: isActive,
          }}
        >
          <BlockActionControl>
            <p>test</p>
          </BlockActionControl>
        </Context.Provider>,
      );
      expect(container.querySelector("p")).toBeInTheDocument();
      fireEvent.click(container.querySelector("p"));
      expect(isActive).toBe(false);
    });
    it("isIndicating is set to true after mounseEnter", () => {
      isIndicating = false;
      const { container } = render(
        <Context.Provider
          value={{
            setIsIndicating: setIsIndicating,
            isIndicating: isIndicating,
          }}
        >
          <BlockActionControl>
            <p>test</p>
          </BlockActionControl>
        </Context.Provider>,
      );
      expect(container.querySelector("p")).toBeInTheDocument();
      fireEvent.mouseEnter(container.querySelector("p"));
      expect(isIndicating).toBe(true);
    });
    it("isIndicating is set to true after focus event", () => {
      isIndicating = false;
      const { container } = render(
        <Context.Provider
          value={{
            setIsIndicating: setIsIndicating,
            isIndicating: isIndicating,
          }}
        >
          <BlockActionControl>
            <p>test</p>
          </BlockActionControl>
        </Context.Provider>,
      );
      expect(container.querySelector("p")).toBeInTheDocument();
      fireEvent.focus(container.querySelector("p"));
      expect(isIndicating).toBe(true);
    });
    it("isIndicating is set to false after blur event", () => {
      isIndicating = true;
      const { container } = render(
        <Context.Provider
          value={{
            setIsIndicating: setIsIndicating,
            isIndicating: isIndicating,
          }}
        >
          <BlockActionControl>
            <p>test</p>
          </BlockActionControl>
        </Context.Provider>,
      );
      expect(container.querySelector("p")).toBeInTheDocument();
      fireEvent.blur(container.querySelector("p"));
      expect(isIndicating).toBe(false);
    });
    it("isIndicating is set to false after mouseLeave", () => {
      isIndicating = true;
      const { container } = render(
        <Context.Provider
          value={{
            setIsIndicating: setIsIndicating,
            isIndicating: isIndicating,
          }}
        >
          <BlockActionControl>
            <p>test</p>
          </BlockActionControl>
        </Context.Provider>,
      );
      expect(container.querySelector("p")).toBeInTheDocument();
      fireEvent.mouseLeave(container.querySelector("p"));
      expect(isIndicating).toBe(false);
    });
  });
});