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

describe("[Native] AtomBody", () => {
  it("render component", () => {
    const props = {
      size: "xlarge",
      text: "otrotexto",
      color: "secondary500",
    } as const;

    const component = render(<AtomBody {...props} />);
    component.getByText(props.text);

    expect(component).toBeTruthy();
  });
  it("Render component xlarge", () => {
    const props = {
      size: "xlarge",
      text: "testText",
    } as const;
    let component = render(
      //
      <AtomBody {...props} />
      //
    );

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

    expect(element.props.style[0].fontSize).toEqual(18);
  });
  it("Render component large", () => {
    const props = {
      size: "large",
      text: "testText",
    } as const;
    let component = render(
      //
      <AtomBody {...props} />
      //
    );

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

    expect(element.props.style[0].fontSize).toEqual(16);
  });
  it("Render component medium", () => {
    const props = {
      size: "medium",
      text: "testText",
    } as const;
    let component = render(
      //
      <AtomBody {...props} />
      //
    );

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

    expect(element.props.style[0].fontSize).toEqual(14);
  });
  it("Render component small", () => {
    const props = {
      size: "small",
      text: "testText",
    } as const;
    let component = render(
      //
      <AtomBody {...props} />
      //
    );

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

    expect(element.props.style[0].fontSize).toEqual(12);
  });
  it("Render component xsmall", () => {
    const props = {
      size: "xsmall",
      text: "testText",
    } as const;
    let component = render(
      //
      <AtomBody {...props} />
      //
    );

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

    expect(element.props.style[0].fontSize).toEqual(11);
  });
  it("Render component color", () => {
    const props: ITypographyProps = {
      text: "testText",
      size: "xlarge",
      color: "neutral700",
    };
    let component = render(
      //
      <AtomBody {...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: {},
    };
    let component = render(
      //
      <AtomBody {...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: {},
    };
    let component = render(
      //
      <AtomBody {...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: {},
    };
    let component = render(
      //
      <AtomBody {...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",
    };
    let component = render(
      //
      <AtomBody {...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",
    };
    let component = render(
      //
      <AtomBody {...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",
    };
    let component = render(
      //
      <AtomBody {...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",
    };
    let component = render(
      //
      <AtomBody {...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",
    };
    let component = render(
      //
      <AtomBody {...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",
    };
    let component = render(
      //
      <AtomBody {...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",
    };
    let component = render(
      //
      <AtomBody {...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",
    };
    let component = render(
      //
      <AtomBody {...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",
    };
    let component = render(
      //
      <AtomBody {...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: {},
    };
    let component = render(
      //
      <AtomBody {...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" },
    };
    let component = render(
      //
      <AtomBody {...props} />
      //
    );

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

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