import React from "react";
import "jest-styled-components/native";
import { render } from "@testing-library/react-native";
import { OrganismsList, IListProps } from ".";
import {
  MoleculeHistoryCard,
  IHistoryCardProps,
} from "native/molecules/HistoryCard";

describe("[Native] Organism List", () => {
  it("Render Vertical List", () => {
    const props: IListProps<IHistoryCardProps> = {
      listData: [
        {
          sectionTitle: "Vertical List",
          customTitleStyle: {
            size: "xlarge",
            color: "secondary",
            weight: "bold",
            styles: {
              margin: "20px 0px",
            },
          },
          listConfig: {
            renderComponent: MoleculeHistoryCard,
          },
          data: [
            {
              cardWidth: "500px",
              cardHeight: "70px",
              iconName: "earn_badges",
              iconSize: 45,
              iconCaptionText: "Rewards",
              iconCaptionColor: "neutral700",
            },
            {
              cardWidth: "500px",
              cardHeight: "70px",
              iconName: "earn_scan",
              iconSize: 45,
              iconCaptionText: "Scan",
              iconCaptionColor: "neutral700",
            },
          ],
        },
      ],
    };
    const component = render(<OrganismsList {...props} />);
    expect(component).toBeTruthy();
  });

  it("Render Horizontal List Component", () => {
    const props: IListProps<IHistoryCardProps> = {
      listWidth: "750%",
      listData: [
        {
          sectionTitle: "Horizontal List",
          customTitleStyle: {
            size: "xlarge",
            color: "secondary",
            weight: "bold",
            styles: {
              margin: "20px 0px",
            },
          },
          listConfig: {
            renderComponent: MoleculeHistoryCard,
            orientation: "horizontal",
          },
          data: [
            {
              cardWidth: "500px",
              cardHeight: "70px",
              iconName: "earn_badges",
              iconSize: 45,
              iconCaptionText: "Rewards",
              iconCaptionColor: "neutral700",
            },
            {
              cardWidth: "500px",
              cardHeight: "70px",
              iconName: "earn_scan",
              iconSize: 45,
              iconCaptionText: "Scan",
              iconCaptionColor: "neutral700",
            },
            {
              cardWidth: "500px",
              cardHeight: "70px",
              iconName: "earn_scan",
              iconSize: 45,
              iconCaptionText: "Scan",
              iconCaptionColor: "neutral700",
            },
          ],
        },
      ],
    };
    const component = render(<OrganismsList {...props} />);
    expect(component).toBeTruthy();
  });

  it("Render Vertical List with columns", () => {
    const props: IListProps<IHistoryCardProps> = {
      listData: [
        {
          sectionTitle: "Vertical List",
          customTitleStyle: {
            size: "xlarge",
            color: "secondary",
            weight: "bold",
            styles: {
              margin: "20px 0px",
            },
          },
          listConfig: {
            renderComponent: MoleculeHistoryCard,
            numberOfColumns: 3,
          },
          data: [
            {
              cardWidth: "500px",
              cardHeight: "70px",
              iconName: "earn_badges",
              iconSize: 45,
              iconCaptionText: "Rewards",
              iconCaptionColor: "neutral700",
            },
            {
              cardWidth: "500px",
              cardHeight: "70px",
              iconName: "earn_scan",
              iconSize: 45,
              iconCaptionText: "Scan",
              iconCaptionColor: "neutral700",
            },
            {
              cardWidth: "500px",
              cardHeight: "70px",
              iconName: "earn_scan",
              iconSize: 45,
              iconCaptionText: "Scan",
              iconCaptionColor: "neutral700",
            },
          ],
        },
      ],
    };
    const component = render(<OrganismsList {...props} />);
    expect(component).toBeTruthy();
  });

  it("Render Empty Custom List", () => {
    const props: IListProps<IHistoryCardProps> = {
      listData: [
        {
          sectionTitle: "Vertical List",
          customTitleStyle: {
            size: "xlarge",
            color: "secondary",
            weight: "bold",
            styles: {
              margin: "20px 0px",
            },
          },
          listConfig: {
            renderComponent: MoleculeHistoryCard,
          },
          data: [],
        },
      ],
      emptyDataProps: {
        iconName: "empty-beer",
        titleText: "Hey Beer Lover!",
        bodyText: "New Offers comming soon, please stay tune for more",
      },
    };
    const component = render(<OrganismsList {...props} />);
    expect(component).toBeTruthy();
  });

  it("Render Empty default List", () => {
    const props: IListProps<IHistoryCardProps> = {
      listData: [
        {
          sectionTitle: "Vertical List",
          customTitleStyle: {
            size: "xlarge",
            color: "secondary",
            weight: "bold",
            styles: {
              margin: "20px 0px",
            },
          },
          listConfig: {
            renderComponent: MoleculeHistoryCard,
          },
          data: [],
        },
      ],
      emptyDataProps: {
        iconName: "",
        titleText: "",
        bodyText: "",
      },
    };
    const component = render(<OrganismsList {...props} />);
    expect(component).toBeTruthy();
  });
});
