import React from 'react';
import { render } from '@testing-library/react-native';
import { AtomTag } from '.';
import { theme } from 'data/dataMx';

describe('[Native] AtomTag', () => {
  test('Render Tag', () => {
    const body = {
      text: 'Accept',
    } as const;

    let component = render(<AtomTag {...body} />);
    component.getByText(body.text);
  });
  test('Render Tag with width', () => {
    const body = {
      text: 'Accept',
      width: '130px',
    } as const;

    let component = render(<AtomTag {...body} />);
    component.getByText(body.text);
  });
  test('Render Tag with background color and color', () => {
    const body = {
      text: 'Accept',
      backgroundColor: 'neutral700',
      color: 'neutral100',
    } as const;

    let component = render(<AtomTag {...body} />);
    const element = component.getByTestId('tag-container');
    expect(element.props.style[0].color).toEqual(theme.neutral100);
    expect(element.props.style[0].backgroundColor).toEqual(theme.neutral700);
  });
  test('Render Tag small', () => {
    const body = {
      text: 'Accept',
      backgroundColor: 'neutral700',
      color: 'neutral100',
      size: 'small',
    } as const;

    let component = render(<AtomTag {...body} />);
    const element = component.getByTestId('tag-container');
    expect(element.props.style[0].height).toEqual(8);
  });
  test('Render Tag medium', () => {
    const body = {
      text: 'Accept',
      backgroundColor: 'neutral700',
      color: 'neutral100',
      size: 'medium',
    } as const;

    let component = render(<AtomTag {...body} />);
    const element = component.getByTestId('tag-container');
    expect(element.props.style[0].height).toEqual(36);
  });
  test('Render Tag large', () => {
    const body = {
      text: 'Accept',
      backgroundColor: 'neutral700',
      color: 'neutral100',
      size: 'large',
    } as const;

    let component = render(<AtomTag {...body} />);
    const element = component.getByTestId('tag-container');
    expect(element.props.style[0].height).toEqual(40);
  });
  test('Render Tag with icon', () => {
    const body = {
      text: 'Accept',
      backgroundColor: 'neutral700',
      color: 'neutral100',
      size: 'large',
      iconLeft: 'diamond',
      displayIconLeft: true,
    } as const;

    let component = render(<AtomTag {...body} />);
    const iconElement = component.getByTestId('icon') as SVGSVGElement;
    expect(iconElement).toBeTruthy();
  });
  test('Render Tag with double icons', () => {
    const body = {
      text: 'Accept',
      backgroundColor: 'neutral700',
      color: 'neutral100',
      size: 'large',
      iconLeft: 'diamond',
      iconRight: 'diamond',
      displayIconLeft: true,
      displayIconRight: true,
    } as const;

    let component = render(<AtomTag {...body} />);
    const iconElement = component.getAllByTestId('icon') as SVGSVGElement[];
    expect(iconElement).toHaveLength(2);
  });
});
