import React from "react";
import "jest-styled-components/native";
import { act, fireEvent, render } from "@testing-library/react-native";
import { AtomTooltip } from "./index";
import { AtomCaption } from "native/atoms/Typography/Caption/index";
import { AtomIcon } from "native/atoms/Icon/index";

describe("[Native] AtomTooltip", () => {
  it("Render component with basic props", async () => {
    // const component = render(
    //     <AtomTooltip
    //         text='Tooltip Text'
    //         show={true}
    //     >
    //         <AtomCaption align='center' size={'xlarge'} text={'Hover here for tooltip'} />
    //     </AtomTooltip>
    // );
    // const tooltip = await component.findByTestId('tooltip')
    // const arrow = await component.findByTestId('tooltip-arrow')
    // act(async () => {
    //     await fireEvent(tooltip, 'layout', {
    //         nativeEvent: {
    //             layout: {
    //                 width: 73,
    //                 height: 29
    //             }
    //         }
    //     })
    // });
    // expect(tooltip).not.toBeNull()
    // expect(arrow).not.toBeNull()
  });

  it("Render component without arrow", () => {
    const component = render(
      <AtomTooltip placement="top" text="Tooltip Text" show={true} removeArrow>
        <AtomCaption
          align="center"
          size={"xlarge"}
          text={"Hover here for tooltip"}
        />
      </AtomTooltip>
    );
    const tooltip = component.getByTestId("tooltip");
    expect(tooltip).toHaveStyleRule("top", -5);
    expect(tooltip).toHaveStyleRule("left", "50%");
  });

  it("Render component with different margin and arrow size", () => {
    const component = render(
      <AtomTooltip
        placement="top"
        text="Tooltip Text"
        show={true}
        tooltipMargin={15}
        arrowSize={10}
      >
        <AtomCaption
          align="center"
          size={"xlarge"}
          text={"Hover here for tooltip"}
        />
      </AtomTooltip>
    );
    const tooltip = component.getByTestId("tooltip");
    expect(tooltip).toHaveStyleRule("top", -25); // tooltipMargin + arrowSize
    expect(tooltip).toHaveStyleRule("left", "50%");
  });

  it("Render component on Top", () => {
    const component = render(
      <AtomTooltip placement="top" text="Tooltip Text" show={true}>
        <AtomCaption
          align="center"
          size={"xlarge"}
          text={"Hover here for tooltip"}
        />
      </AtomTooltip>
    );
    const tooltip = component.getByTestId("tooltip");
    expect(tooltip).toHaveStyleRule("top", -11);
    expect(tooltip).toHaveStyleRule("left", "50%");
  });

  it("Render component on bottom", () => {
    const component = render(
      <AtomTooltip placement="bottom" text="Tooltip Text" show={true}>
        <AtomCaption
          align="center"
          size={"xlarge"}
          text={"Hover here for tooltip"}
        />
      </AtomTooltip>
    );
    const tooltip = component.getByTestId("tooltip");
    expect(tooltip).toHaveStyleRule("bottom", -11);
    expect(tooltip).toHaveStyleRule("left", "50%");
  });

  it("Render component on right", () => {
    const component = render(
      <AtomTooltip placement="right" text="Tooltip Text" show={true}>
        <AtomCaption
          align="center"
          size={"xlarge"}
          text={"Hover here for tooltip"}
        />
      </AtomTooltip>
    );

    const tooltip = component.getByTestId("tooltip");
    expect(tooltip).toHaveStyleRule("right", -11);
    expect(tooltip).toHaveStyleRule("top", "50%");
  });

  it("Render component on left", () => {
    const component = render(
      <AtomTooltip placement="left" text="Tooltip Text" show={true}>
        <AtomCaption
          align="center"
          size={"xlarge"}
          text={"Hover here for tooltip"}
        />
      </AtomTooltip>
    );

    const tooltip = component.getByTestId("tooltip");
    expect(tooltip).toHaveStyleRule("left", -11);
    expect(tooltip).toHaveStyleRule("top", "50%");
  });

  it("Render component on left no arrow", () => {
    const component = render(
      <AtomTooltip placement="left" text="Tooltip Text" show={true} removeArrow>
        <AtomCaption
          align="center"
          size={"xlarge"}
          text={"Hover here for tooltip"}
        />
      </AtomTooltip>
    );

    const tooltip = component.getByTestId("tooltip");
    expect(tooltip).toHaveStyleRule("left", -5);
    expect(tooltip).toHaveStyleRule("top", "50%");
  });

  it("Render component with custom content", () => {
    const component = render(
      <AtomTooltip
        placement="left"
        content={<AtomIcon name="earn_badges" size={30} />}
        show={true}
        removeArrow
      >
        <AtomCaption
          align="center"
          size={"xlarge"}
          text={"Hover here for tooltip"}
        />
      </AtomTooltip>
    );

    const tooltip = component.getByTestId("tooltip");
    expect(tooltip).toHaveStyleRule("left", -5);
    expect(tooltip).toHaveStyleRule("top", "50%");
  });
});
