import React from 'react';
import { render, fireEvent } from '@testing-library/react-native';
import { act } from 'react-dom/test-utils';
import { AtomToggle } from './index';

describe('[Native] AtomToggle', () => {
  test('Render Toggle', async () => {
    // const props = {
    //   isChecked: false,
    //   disabled: false,
    //   size: 'xs',
    //   onToggle: jest.fn()
    // } as const;

    // await act(async () => {
    //   const component = await render(<AtomToggle {...props} />);

    //   await act(async () => {
    //     await component.rerender(
    //       <AtomToggle {...props} />
    //     );
    //   });

    //   expect(component).toBeTruthy();
    // })
  });
  // test('Render 2xs Toggle', () => {
  //   const props = {
  //     isChecked: false,
  //     disabled: false,
  //     onText: 'On',
  //     offText: 'Off',
  //     size: '2xs',
  //     onToggle: jest.fn()
  //   } as const;

  //   let component = render(<AtomToggle {...props} />);

  //   let toggleSwitch = component.getByTestId('toggle-switch');
  //   let spanText = component.getByText(props.offText);

  //   expect(toggleSwitch.props.style.width).toEqual(32);
  //   expect(spanText.props.children).toEqual(props.offText);
  // });
  // test('Render Toggle no size provided', () => {
  //   const props = {
  //     isChecked: false,
  //     disabled: false,
  //     onText: 'On',
  //     offText: 'Off',
  //     onToggle: jest.fn()
  //   } as const;

  //   let component = render(<AtomToggle {...props} />);

  //   let toggleSwitch = component.getByTestId('toggle-switch');
  //   expect(toggleSwitch.props.style.width).toEqual(48);
  // });
  // test('Render Toggle checked', () => {
  //   const mockPress = jest.fn();
  //   const props = {
  //     isChecked: true,
  //     onText: 'On',
  //     offText: 'Off',
  //     disabled: true,
  //     onToggle: mockPress
  //   } as const;

  //   let component = render(<AtomToggle {...props} />);
  //   let toggleSwitch = component.getByTestId('toggle-switch');

  //   fireEvent.press(toggleSwitch);
  //   expect(mockPress).toHaveBeenCalledTimes(0);
  //   expect(toggleSwitch.props.style.backgroundColor).toEqual('#F3F8FA');
  // });
  // test('Render Toggle unchecked', () => {
  //   const mockPress = jest.fn();
  //   const props = {
  //     isChecked: false,
  //     onToggle: mockPress
  //   } as const;

  //   const component = render(<AtomToggle {...props} />);
  //   let toggleSwitch = component.getByTestId('toggle-switch');
  //   fireEvent.press(toggleSwitch);

  //   expect(mockPress).toHaveBeenCalledTimes(1);
  //   expect(toggleSwitch.props.style.backgroundColor).toEqual('#046786');
  // });
  // test('Render Toggle no isChecked prop', () => {
  //   const props = {
  //     onToggle: jest.fn()
  //   } as const;

  //   let component = render(<AtomToggle {...props} />);
  //   let toggleSwitch = component.getByTestId('toggle-switch');

  //   expect(toggleSwitch.props.style.backgroundColor).toEqual('#FFFFFF');
  // });
  // test('Render Toggle no checked with text', () => {
  //   const props = {
  //     isChecked: false,
  //     offText: 'Off',
  //     onToggle: () => { }
  //   } as const;

  //   let component = render(<AtomToggle {...props} />);
  //   let spanText = component.getByText(props.offText);

  //   expect(spanText.props.children).toEqual(props.offText);
  // });
  // test('Render Toggle checked with text', () => {
  //   const props = {
  //     isChecked: true,
  //     onText: 'On',
  //     onToggle: () => { }
  //   } as const;

  //   let component = render(<AtomToggle {...props} />);

  //   let spanText = component.getByText(props.onText);

  //   expect(spanText.props.children).toEqual(props.onText);
  // });
  // test('Render Toggle xs no checked with text', () => {
  //   const props = {
  //     isChecked: false,
  //     offText: 'Off',
  //     size: 'xs',
  //     onToggle: () => { }
  //   } as const;

  //   let component = render(<AtomToggle {...props} />);
  //   let spanText = component.getByText(props.offText);

  //   expect(spanText.props.children).toEqual(props.offText);
  // });
  // test('Render Toggle xs checked with text', () => {
  //   const props = {
  //     isChecked: true,
  //     onText: 'On',
  //     size: 'xs',
  //     onToggle: () => { }
  //   } as const;

  //   let component = render(<AtomToggle {...props} />);
  //   let spanText = component.getByText(props.onText);

  //   expect(spanText.props.children).toEqual(props.onText);
  // });

  // test('Render Toggle onToggle function xs', () => {
  //   const mockPress = jest.fn();

  //   const props = {
  //     size: 'xs',
  //     disabled: false,
  //     onToggle: mockPress,
  //   } as const;

  //   let component = render(<AtomToggle {...props} />);
  //   let toggleSwitch = component.getByTestId('toggle-switch');

  //   fireEvent.press(toggleSwitch);
  //   expect(mockPress).toHaveBeenCalledTimes(1);
  // });
  // test('Render Toggle onToggle function 2xs', () => {
  //   const mockPress = jest.fn();

  //   const props = {
  //     size: '2xs',
  //     disabled: false,
  //     onToggle: mockPress,
  //   } as const;

  //   let component = render(<AtomToggle {...props} />);
  //   let toggleSwitch = component.getByTestId('toggle-switch');

  //   fireEvent.press(toggleSwitch);
  //   expect(mockPress).toHaveBeenCalledTimes(1);
  // });
  // test('Render Toggle onToggle function no-size', () => {
  //   const mockPress = jest.fn();

  //   const props = {
  //     disabled: false,
  //     onToggle: mockPress,
  //   } as const;

  //   let component = render(<AtomToggle {...props} />);
  //   let toggleSwitch = component.getByTestId('toggle-switch');

  //   fireEvent.press(toggleSwitch);
  //   expect(mockPress).toHaveBeenCalledTimes(1);
  // });
});