import { render, fireEvent } from "@testing-library/react-native";
import React from "react";
import "@testing-library/jest-dom";
import { IButtonGroupProps, MoleculeButtonGroup } from ".";

describe("[Native] MoleculeButtonGroup", () => {
  const handlePress = jest.fn();
  const body: IButtonGroupProps = {
    data: [
      {
        id: 1,
        disabled: false,
        onPress: jest.fn(),
        color: "primary",
        text: "Button 1",
        type: "default",
      },
      {
        id: 2,
        disabled: false,
        onPress: jest.fn(),
        color: "secondary",
        text: "Button 2",
        type: "ghost",
      },
      {
        id: 3,
        disabled: false,
        onPress: jest.fn(),
        color: "primary",
        text: "Button 3",
        type: "outline",
      },
      {
        id: 4,
        disabled: false,
        onPress: handlePress,
        color: "custom",
        text: "Button 4",
        type: "icon",
        customColor: "quinary",
        icon: "beer",
        typeButtonIcon: "ghost",
      },
    ],
    directionFlex: "row",
  };

  it("Render ButtonGroup component", () => {
    const component = render(<MoleculeButtonGroup {...body} />);
    expect(component).toBeTruthy();
  });

  it("Render ButtonGroup different values", () => {
    body.data[3].icon = undefined;
    body.data[3].iconAlign = "left";
    body.data[3].typeButtonIcon = "ghost";
    body.directionFlex = "column";
    const component = render(<MoleculeButtonGroup {...body} />);
    expect(component).toBeTruthy();
  });

  it("Render ButtonGroup initial values", () => {
    body.data[3].iconAlign = "right";
    body.data[3].typeButtonIcon = undefined;
    const component = render(<MoleculeButtonGroup {...body} />);
    expect(component).toBeTruthy();
  });

  it("Handle toggle", () => {
    body.data = [
      {
        id: 1,
        disabled: false,
        onPress: jest.fn(),
        color: "primary",
        text: "Button 1",
        type: "default",
      },
    ];
    body.groupStyle = "toggle";
    const component = render(<MoleculeButtonGroup {...body} />);
    const button = component.getByText(body.data[0].text);
    fireEvent.press(button);

    expect(component).toBeTruthy();
  });
});
