import React from "react";
import { MaterialIcon } from "./index";

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

import "@testing-library/jest-dom";

describe("MaterialIcon", () => {
  describe("Rendering", () => {
    it("renders the icon name as text content", () => {
      render(<MaterialIcon name="home" />);
      expect(screen.getByText("home")).toBeInTheDocument();
    });

    it("has correct displayName", () => {
      expect(MaterialIcon.displayName).toBe("MaterialIcon");
    });

    it("renders as a span element", () => {
      render(<MaterialIcon name="search" />);
      expect(screen.getByText("search").tagName).toBe("SPAN");
    });

    it("applies material-symbols-rounded class", () => {
      render(<MaterialIcon name="settings" />);
      expect(screen.getByText("settings").className).toContain(
        "material-symbols-rounded"
      );
    });
  });

  describe("Font variation settings", () => {
    it("sets default font variation settings", () => {
      render(<MaterialIcon name="home" />);
      const el = screen.getByText("home");
      expect(el.style.fontVariationSettings).toContain("'FILL' 0");
      expect(el.style.fontVariationSettings).toContain("'wght' 200");
      expect(el.style.fontVariationSettings).toContain("'GRAD' 145");
      expect(el.style.fontVariationSettings).toContain("'opsz' 48");
    });

    it("sets fill when provided", () => {
      render(<MaterialIcon name="star" fill={1} />);
      const el = screen.getByText("star");
      expect(el.style.fontVariationSettings).toContain("'FILL' 1");
    });

    it("sets custom weight", () => {
      render(<MaterialIcon name="star" weight="400" />);
      const el = screen.getByText("star");
      expect(el.style.fontVariationSettings).toContain("'wght' 400");
    });

    it("sets custom optical size", () => {
      render(<MaterialIcon name="star" opticalSize="24dp" />);
      const el = screen.getByText("star");
      expect(el.style.fontVariationSettings).toContain("'opsz' 24");
    });

    it("sets custom emphasis (GRAD)", () => {
      render(<MaterialIcon name="star" emphasis={200} />);
      const el = screen.getByText("star");
      expect(el.style.fontVariationSettings).toContain("'GRAD' 200");
    });
  });

  describe("Size", () => {
    it("applies default font size of 24px", () => {
      render(<MaterialIcon name="home" />);
      const el = screen.getByText("home");
      expect(el.style.fontSize).toBe("24px");
    });

    it("applies custom size", () => {
      render(<MaterialIcon name="home" size={48} />);
      const el = screen.getByText("home");
      expect(el.style.fontSize).toBe("48px");
    });
  });

  describe("Color", () => {
    it("uses currentColor by default", () => {
      render(<MaterialIcon name="home" />);
      const el = screen.getByText("home");
      expect(el.style.color).toBe("currentColor");
    });

    it("applies custom color", () => {
      render(<MaterialIcon name="home" color="red" />);
      const el = screen.getByText("home");
      expect(el.style.color).toBe("red");
    });
  });

  describe("Custom props", () => {
    it("applies custom className", () => {
      render(<MaterialIcon name="home" className="custom-icon" />);
      const el = screen.getByText("home");
      expect(el.className).toContain("custom-icon");
    });

    it("applies custom inline style", () => {
      render(<MaterialIcon name="home" style={{ opacity: 0.5 }} />);
      const el = screen.getByText("home");
      expect(el.style.opacity).toBe("0.5");
    });

    it("applies data-testid", () => {
      render(<MaterialIcon name="home" dataTestId="my-icon" />);
      expect(screen.getByTestId("my-icon")).toBeInTheDocument();
    });
  });

  describe("Event handling", () => {
    it("calls onClick when clicked", () => {
      const onClick = jest.fn();
      render(<MaterialIcon name="home" onClick={onClick} />);
      fireEvent.click(screen.getByText("home"));
      expect(onClick).toHaveBeenCalledTimes(1);
    });
  });

  describe("Font family", () => {
    it("sets Material Symbols Rounded font family", () => {
      render(<MaterialIcon name="home" />);
      const el = screen.getByText("home");
      expect(el.style.fontFamily).toContain("Material Symbols Rounded");
    });
  });
});