import { fireEvent, render, screen } from '@testing-library/react';
import * as React from 'react';
import { expect, describe, it, vi } from 'vitest';
import { XPositionReference } from '../../Enums/XPositionReference';
import IProperties from '../../Interfaces/IProperties';
import { Properties } from './Properties';

describe.concurrent('Properties', () => {
  it('No properties', () => {
    render(<Properties
      properties={undefined}
      onChange={() => {}}
      onSubmit={() => {}}
    />);

    expect(screen.queryByText('id')).toBeNull();
    expect(screen.queryByText('parentId')).toBeNull();
    expect(screen.queryByText('x')).toBeNull();
    expect(screen.queryByText('y')).toBeNull();
  });

  it('Some properties, change values with dynamic input', () => {
    const prop: IProperties = {
      id: 'stuff',
      parentId: 'parentId',
      x: 1,
      y: 1,
      width: 1,
      height: 1,
      XPositionReference: XPositionReference.Left,
      isRigidBody: false,
      isAnchor: false
    };

    const handleChange = vi.fn((key, value) => {
      (prop as any)[key] = value;
    });

    const { container, rerender } = render(<Properties
      properties={prop}
      onChange={handleChange}
      onSubmit={() => {}}
    />);

    expect(screen.queryByText('id')).toBeDefined();
    expect(screen.queryByText('parentId')).toBeDefined();
    expect(screen.queryByText('x')).toBeDefined();
    expect(screen.queryByText('y')).toBeDefined();

    let propertyId = container.querySelector('#id');
    let propertyParentId = container.querySelector('#parentId');
    let propertyX = container.querySelector('#x');
    let propertyY = container.querySelector('#y');
    expect(propertyId).toBeDefined();
    expect((propertyId as HTMLInputElement).value).toBe('stuff');
    expect(propertyParentId).toBeDefined();
    expect((propertyParentId as HTMLInputElement).value).toBe('parentId');
    expect(propertyX).toBeDefined();
    expect((propertyX as HTMLInputElement).value).toBe('1');
    expect(propertyY).toBeDefined();
    expect((propertyY as HTMLInputElement).value).toBe('1');

    fireEvent.change(propertyId as Element, { target: { value: 'stuffed' } });
    fireEvent.change(propertyParentId as Element, { target: { value: 'parentedId' } });
    fireEvent.change(propertyX as Element, { target: { value: '2' } });
    fireEvent.change(propertyY as Element, { target: { value: '2' } });
    expect(handleChange).toBeCalledTimes(2);

    expect(prop.id).toBe('stuff');
    expect(prop.parentId).toBe('parentId');
    expect(prop.x).toBe(2);
    expect(prop.y).toBe(2);
    rerender(<Properties
      properties={Object.assign({}, prop)}
      onChange={handleChange}
      onSubmit={() => {}}
    />);

    propertyId = container.querySelector('#id');
    propertyParentId = container.querySelector('#parentId');
    propertyX = container.querySelector('#x');
    propertyY = container.querySelector('#y');
    expect(propertyId).toBeDefined();
    expect((propertyId as HTMLInputElement).value).toBe('stuff');
    expect(propertyParentId).toBeDefined();
    expect((propertyParentId as HTMLInputElement).value).toBe('parentId');
    expect(propertyX).toBeDefined();
    expect((propertyX as HTMLInputElement).value).toBe('2');
    expect(propertyY).toBeDefined();
    expect((propertyY as HTMLInputElement).value).toBe('2');
  });
});