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

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

    const component = render(<AtomDisplay {...props} />);
    const element = component.getByText(props.text);
    expect(element).toBeTruthy();
  });
  it("Render component size xlarge", () => {
    const props = {
      size: "xlarge",
      align: "center",
      text: "Text",
      color: "secondary500",
      weight: "thin",
      styles: {},
    } as const;

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

    expect(element.props.style[0].fontSize).toEqual(48);
    expect(element.props.style[0].fontFamily).toEqual("Outfit-Thin");
  });
  it("Render component size large", () => {
    const props = {
      size: "large",
      align: "center",
      text: "Text",
      color: "secondary500",
      weight: "thin",
      styles: {},
    } as const;

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

    expect(element.props.style[0].fontSize).toEqual(46);
    expect(element.props.style[0].fontFamily).toEqual("Outfit-Thin");
  });
  it("Render component size medium", () => {
    const props = {
      size: "medium",
      align: "center",
      text: "Text",
      color: "secondary500",
      weight: "thin",
      styles: {},
    } as const;

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

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

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

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

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

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

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

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

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

    expect(element.props.style[0].fontSize).toEqual(46);
    expect(element.props.style[0].fontFamily).toEqual("Outfit-Thin");
    expect(element.props.style[0].color).toEqual("#132730");
  });
  it("Render component size xlarge with no color provided", () => {
    const props = {
      size: "xlarge",
      text: "Text",
      weight: "thin",
      styles: {},
    } as const;

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

    expect(element.props.style[0].color).toEqual("#132730");
    expect(element.props.style[0].fontFamily).toEqual("Outfit-Thin");
  });
  it("Render component size large with no color provided", () => {
    const props = {
      size: "large",
      text: "Text",
      weight: "thin",
      styles: {},
    } as const;

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

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

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

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

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

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

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

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

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

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

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