/**
 * @vitest-environment jsdom
 */

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

import { SocialButton } from "../";

describe("rendering SocialButton", () => {
  describe("initial state", () => {
    it("renders as button element by default", () => {
      const { getByRole } = render(<SocialButton name="x" />);
      const button = getByRole("button");
      expect(button).toBeInTheDocument();
      expect(button.tagName).toBe("BUTTON");
    });

    it("has default class social-button", () => {
      const { getByRole } = render(<SocialButton name="x" />);
      expect(getByRole("button")).toHaveClass("social-button");
    });

    it("has social platform class", () => {
      const { getByRole } = render(<SocialButton name="x" />);
      expect(getByRole("button")).toHaveClass("social-button--x");
    });

    it("renders Icon component", () => {
      const { getByRole } = render(<SocialButton name="x" />);
      const icon = getByRole("button").querySelector("svg");
      expect(icon).toBeInTheDocument();
    });
  });

  describe("passed props - button", () => {
    it("renders different social platform classes", () => {
      const platforms = [
        "x",
        "facebook-2",
        "linkedin",
        "instagram-2",
        "pinterest",
        "snapchat",
        "tiktok",
        "whatsapp",
        "youtube",
        "email",
      ];

      platforms.forEach((platform) => {
        const { getByRole, unmount } = render(<SocialButton name={platform} />);
        expect(getByRole("button")).toHaveClass(`social-button--${platform}`);
        unmount();
      });
    });

    it("adds custom className", () => {
      const { getByRole } = render(
        <SocialButton name="x" className="custom-class" />,
      );
      expect(getByRole("button")).toHaveClass("custom-class");
      expect(getByRole("button")).toHaveClass("social-button");
    });

    it("passes onClick handler", () => {
      const onClick = vi.fn();
      const { getByRole } = render(<SocialButton name="x" onClick={onClick} />);
      getByRole("button").click();
      expect(onClick).toHaveBeenCalled();
    });

    it("passes data-testid attribute", () => {
      const { getByTestId } = render(
        <SocialButton name="x" data-testid="social-btn" />,
      );
      expect(getByTestId("social-btn")).toBeInTheDocument();
    });

    it("accepts aria-label attribute", () => {
      const { getByRole } = render(
        <SocialButton name="x" aria-label="Follow us on X" />,
      );
      expect(
        getByRole("button", { name: "Follow us on X" }),
      ).toBeInTheDocument();
    });
  });

  describe("passed props - anchor", () => {
    it("renders as anchor element when href is provided", () => {
      const { getByRole } = render(
        <SocialButton name="x" href="https://x.com" />,
      );
      const link = getByRole("link");
      expect(link).toBeInTheDocument();
      expect(link.tagName).toBe("A");
    });

    it("has href attribute", () => {
      const { getByRole } = render(
        <SocialButton name="x" href="https://x.com" />,
      );
      expect(getByRole("link")).toHaveAttribute("href", "https://x.com");
    });

    it("has social platform class as anchor", () => {
      const { getByRole } = render(
        <SocialButton name="facebook-2" href="https://facebook.com" />,
      );
      expect(getByRole("link")).toHaveClass("social-button--facebook-2");
    });

    it("passes target attribute", () => {
      const { getByRole } = render(
        <SocialButton name="x" href="https://x.com" target="_blank" />,
      );
      expect(getByRole("link")).toHaveAttribute("target", "_blank");
    });

    it("passes rel attribute", () => {
      const { getByRole } = render(
        <SocialButton
          name="x"
          href="https://x.com"
          rel="noopener noreferrer"
        />,
      );
      expect(getByRole("link")).toHaveAttribute("rel", "noopener noreferrer");
    });

    it("adds custom className to anchor", () => {
      const { getByRole } = render(
        <SocialButton name="x" href="https://x.com" className="custom-link" />,
      );
      expect(getByRole("link")).toHaveClass("custom-link");
      expect(getByRole("link")).toHaveClass("social-button");
    });

    it("renders Icon component in anchor", () => {
      const { getByRole } = render(
        <SocialButton name="x" href="https://x.com" />,
      );
      const icon = getByRole("link").querySelector("svg");
      expect(icon).toBeInTheDocument();
    });
  });

  describe("ref forwarding", () => {
    it("forwards ref to button element", () => {
      const ref = React.createRef();
      render(<SocialButton name="x" ref={ref} />);
      expect(ref.current).toBeInstanceOf(HTMLButtonElement);
    });

    it("forwards ref to anchor element", () => {
      const ref = React.createRef();
      render(<SocialButton name="x" href="https://x.com" ref={ref} />);
      expect(ref.current).toBeInstanceOf(HTMLAnchorElement);
    });
  });
});