import React from "react";
import "jest-styled-components/native";
import { render } from "@testing-library/react-native";
import { theme } from "data/dataMx";
import { IChallengeProgressProps, OrganismChallengeProgress } from "./index";

describe("[Native] OrganismChallengeProgress", () => {
  const props: IChallengeProgressProps = {
    data: [
      { challengeStatus: false },
      { challengeStatus: true },
      { challengeStatus: false },
      { challengeStatus: false },
    ],
    textReward: "BUD LIGHT NFL VEND ZONE ACCESS",
    title: "COMPLETE CHALLENGES TO UNLOCK MORE POINTS",
    backgroundImage: "https://via.placeholder.com/150",
    backgroundColor: "primary",
    sizeIcon: 50,
    colorIcon: "neutral100",
  };

  it("Render component ChallengeProgress with required props", () => {
    const component = render(
      <OrganismChallengeProgress
        data={props.data}
        title={props.title}
        textReward={props.textReward}
      />
    );
    expect(component).toBeDefined();
  });

  it("Render component ChallengeProgress with background image", () => {
    const component = render(
      <OrganismChallengeProgress
        data={props.data}
        backgroundImage={props.backgroundImage}
        title={props.title}
        textReward={props.textReward}
      />
    );
    const container = component.getByTestId("chp-container");
    const backgroundImage = component.getAllByTestId("img-test-id")[0];
    expect(container.props.style[0].backgroundColor).toEqual(theme.transparent);
    expect(backgroundImage.props.source.uri).toBe(
      "https://via.placeholder.com/150"
    );
  });

  it("Render component ChallengeProgress with background color", () => {
    const component = render(
      <OrganismChallengeProgress
        data={props.data}
        backgroundColor={props.backgroundColor}
        title={props.title}
        textReward={props.textReward}
      />
    );
    const container = component.getByTestId("chp-container");
    expect(container.props.style[0].backgroundColor).toEqual(theme.primary);
  });

  it("Render component ChallengeProgress, icons has default color and height", () => {
    const component = render(
      <OrganismChallengeProgress
        data={props.data}
        title={props.title}
        textReward={props.textReward}
      />
    );
    const icon = component.getAllByTestId("icon")[0] as SVGSVGElement;
    expect(icon).not.toBeNull;
    expect(icon).toHaveStyleRule("height: 44");
  });

  it("Render component ChallengeProgress, icons has custom color and height", () => {
    const component = render(
      <OrganismChallengeProgress
        data={props.data}
        title={props.title}
        textReward={props.textReward}
        colorIcon={props.colorIcon}
        sizeIcon={props.sizeIcon}
      />
    );
    const icon = component.getAllByTestId("icon")[0] as SVGSVGElement;
    expect(icon).toHaveStyleRule("height: 50");
    expect(icon).toHaveStyleRule("fill: #FFFFFF");
  });
});
