import React from "react";
import "jest-styled-components/native";
import { AtomCaption } from "./index";
import { ITypographyProps } from "native/atoms/Typography/TypographyProps";
import { theme } from "data/dataMx";
import { render } from "@testing-library/react-native";

describe("[Native] AtomCaption", () => {
  it("render component", () => {
    const body: ITypographyProps = {
      text: "caption Text",
      color: "neutral700",
      size: "large",
      align: "left",
    };
    const component = render(<AtomCaption {...body} />);
    component.getByText(body.text);

    expect(component).toBeDefined();
  });
  it("render component without color and align", () => {
    const body = {
      text: "caption Text",
    };
    const component = render(<AtomCaption size={"medium"} {...body} />);
    const caption = component.getByText(body.text);
    expect(caption).toHaveStyleRule("color", theme.neutral700);
  });
  it("Render component color", () => {
    const props: ITypographyProps = {
      text: "testText",
      size: "xlarge",
      color: "neutral700",
    };
    const component = render(<AtomCaption {...props} />);

    const element = component.getByText(props.text);

    expect(element.props.style[0].color).toEqual("#132730");
  });

  it("Render component align left", () => {
    const props: ITypographyProps = {
      text: "testText",
      size: "xlarge",
      align: "left",
      styles: {},
    };
    const component = render(<AtomCaption {...props} />);

    const element = component.getByText(props.text);

    expect(element.props.style[0].textAlign).toEqual("left");
  });

  it("Render component align center", () => {
    const props: ITypographyProps = {
      text: "testText",
      size: "xlarge",
      align: "center",
      styles: {},
    };
    const component = render(<AtomCaption {...props} />);

    const element = component.getByText(props.text);

    expect(element.props.style[0].textAlign).toEqual("center");
  });

  it("Render component align right", () => {
    const props: ITypographyProps = {
      text: "testText",
      size: "xlarge",
      align: "right",
      styles: {},
    };
    const component = render(<AtomCaption {...props} />);

    const element = component.getByText(props.text);

    expect(element.props.style[0].textAlign).toEqual("right");
  });

  it("Render component weight light", () => {
    const props: ITypographyProps = {
      text: "testText",
      size: "xlarge",
      weight: "light",
    };
    const component = render(<AtomCaption {...props} />);

    const element = component.getByText(props.text);

    expect(element.props.style[0].fontFamily).toEqual("Outfit-Light");
  });

  it("Render component weight medium", () => {
    const props: ITypographyProps = {
      text: "testText",
      size: "xlarge",
      weight: "medium",
    };
    const component = render(<AtomCaption {...props} />);

    const element = component.getByText(props.text);

    expect(element.props.style[0].fontFamily).toEqual("Outfit-Medium");
  });

  it("Render component weight thin", () => {
    const props: ITypographyProps = {
      text: "testText",
      size: "xlarge",
      weight: "thin",
    };
    const component = render(<AtomCaption {...props} />);

    const element = component.getByText(props.text);

    expect(element.props.style[0].fontFamily).toEqual("Outfit-Thin");
  });

  it("Render component weight extralight", () => {
    const props: ITypographyProps = {
      text: "testText",
      size: "xlarge",
      weight: "extralight",
    };
    const component = render(<AtomCaption {...props} />);

    const element = component.getByText(props.text);

    expect(element.props.style[0].fontFamily).toEqual("Outfit-ExtraLight");
  });

  it("Render component weight regular", () => {
    const props: ITypographyProps = {
      text: "testText",
      size: "xlarge",
      weight: "regular",
    };
    const component = render(<AtomCaption {...props} />);

    const element = component.getByText(props.text);

    expect(element.props.style[0].fontFamily).toEqual("Outfit-Regular");
  });

  it("Render component weight semibold", () => {
    const props: ITypographyProps = {
      text: "testText",
      size: "xlarge",
      weight: "semibold",
    };
    const component = render(<AtomCaption {...props} />);

    const element = component.getByText(props.text);

    expect(element.props.style[0].fontFamily).toEqual("Outfit-SemiBold");
  });

  it("Render component weight bold", () => {
    const props: ITypographyProps = {
      text: "testText",
      size: "xlarge",
      weight: "bold",
    };
    const component = render(<AtomCaption {...props} />);

    const element = component.getByText(props.text);

    expect(element.props.style[0].fontFamily).toEqual("Outfit-Bold");
  });

  it("Render component weight extrabold", () => {
    const props: ITypographyProps = {
      text: "testText",
      size: "xlarge",
      weight: "extrabold",
    };
    const component = render(<AtomCaption {...props} />);

    const element = component.getByText(props.text);

    expect(element.props.style[0].fontFamily).toEqual("Outfit-ExtraBold");
  });

  it("Render component weight black", () => {
    const props: ITypographyProps = {
      text: "testText",
      size: "xlarge",
      weight: "black",
    };
    const component = render(<AtomCaption {...props} />);

    const element = component.getByText(props.text);

    expect(element.props.style[0].fontFamily).toEqual("Outfit-Black");
  });

  it("Render component align center ignoring style align left", () => {
    const props: ITypographyProps = {
      text: "testText",
      size: "xlarge",
      align: "center",
      styles: {},
    };
    const component = render(<AtomCaption {...props} />);

    const element = component.getByText(props.text);

    expect(element.props.style[0].textAlign).toEqual("center");
  });
  it("Render component style textDecorationLine underline", () => {
    const props: ITypographyProps = {
      text: "testText",
      size: "xlarge",
      styles: { textDecorationLine: "underline" },
    };
    const component = render(<AtomCaption {...props} />);

    const element = component.getByText(props.text);

    expect(element.props.style[0].textDecorationLine).toEqual("underline");
  });
});
