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

describe("[Native] AtomHeadline", () => {
  it("Render component", () => {
    const props = {
      size: "xlarge",
      align: "center",
      text: "Text",
      color: "secondary500",
      weight: "thin",
    } as const;

    const component = render(<AtomHeadline {...props} />);

    expect(component).toBeTruthy();
  });
  it("Render component size medium", () => {
    const props = {
      size: "medium",
      align: "center",
      text: "Text",
      color: "secondary500",
      weight: "thin",
    } as const;

    const component = render(<AtomHeadline {...props} />);

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

    expect(element.props.style[0].fontSize).toEqual(22);
  });
  it("Render component size small", () => {
    const props = {
      size: "small",
      align: "center",
      text: "Text",
      color: "secondary500",
      weight: "thin",
    } as const;

    const component = render(<AtomHeadline {...props} />);

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

    expect(element.props.style[0].fontSize).toEqual(16);
  });
  it("Render component size xsmall", () => {
    const props = {
      size: "xsmall",
      align: "center",
      text: "Text",
      color: "secondary500",
      weight: "thin",
    } as const;

    const component = render(<AtomHeadline {...props} />);

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

    expect(element.props.style[0].fontSize).toEqual(14);
  });
  it("Render component no size, align, weight provided", () => {
    const props: ITypographyProps = {
      text: "Text",
      color: "secondary500",
      size: "large",
    } as const;

    const component = render(<AtomHeadline {...props} />);

    const element = component.getByText(props.text);
    expect(element.props.style[0].fontSize).toEqual(28);
    expect(element.props.style[0].justifyContent).toEqual("center");
    expect(element.props.style[0].fontFamily).toEqual("Outfit-Thin");
  });
  it("Render component size xlarge, no color provided", () => {
    const props = {
      size: "xlarge",
      align: "center",
      text: "Text",
      weight: "thin",
    } as const;

    const component = render(<AtomHeadline {...props} />);

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

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

  it("Render component size large, no color provided", () => {
    const props = {
      size: "large",
      align: "center",
      text: "Text",
      weight: "thin",
    } as const;

    const component = render(<AtomHeadline {...props} />);

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

    expect(element.props.style[0].color).toEqual("#132730");
  });
  it("Render component size medium, no color provided", () => {
    const props = {
      size: "medium",
      align: "center",
      text: "Text",
      weight: "thin",
    } as const;

    const component = render(<AtomHeadline {...props} />);

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

    expect(element.props.style[0].color).toEqual("#132730");
  });
  it("Render component size small, no color provided", () => {
    const props = {
      size: "small",
      align: "center",
      text: "Text",
      weight: "thin",
    } as const;

    const component = render(<AtomHeadline {...props} />);

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

    expect(element.props.style[0].color).toEqual("#132730");
  });
  it("Render component size xsmall, no color provided", () => {
    const props = {
      size: "xsmall",
      align: "center",
      text: "Text",
      weight: "thin",
    } as const;

    const component = render(<AtomHeadline {...props} />);

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

    expect(element.props.style[0].color).toEqual("#132730");
  });
  it("Render component no size & no color provided", () => {
    const props: ITypographyProps = {
      align: "center",
      text: "Text",
      weight: "thin",
      size: "large",
    } as const;

    const component = render(<AtomHeadline {...props} />);

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

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

  it("Render component weight light", () => {
    const props: ITypographyProps = {
      text: "testText",
      size: "xlarge",
      weight: "light",
    };
    const component = render(<AtomHeadline {...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(<AtomHeadline {...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(<AtomHeadline {...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(<AtomHeadline {...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(<AtomHeadline {...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(<AtomHeadline {...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(<AtomHeadline {...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(<AtomHeadline {...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(<AtomHeadline {...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: { justifyContent: "flex-start" },
    };
    const component = render(<AtomHeadline {...props} />);

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

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

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

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