import { render } from '@testing-library/vue';
import userEvent from '@testing-library/user-event';
import { describe, expect, test, vi } from 'vitest';
import { defineComponent, h } from 'vue';
import UiResizableHandle from '../UiResizableHandle.vue';

vi.mock('@/components/core/resizable', () => ({
  ResizableHandle: defineComponent({
    name: 'ResizableHandleMock',
    props: {
      disabled: Boolean,
      id: {
        type: String,
        default: undefined,
      },
      withHandle: Boolean,
    },
    emits: ['dragging'],
    setup(props, { attrs, emit, slots }) {
      return () =>
        h(
          'button',
          {
            ...attrs,
            'data-disabled': String(props.disabled),
            'data-id': props.id,
            'data-testid': 'resizable-handle',
            'data-with-handle': String(props.withHandle),
            type: 'button',
            onClick: () => emit('dragging', true),
          },
          slots.default?.(),
        );
    },
  }),
}));

describe('UiResizableHandle', () => {
  test('renders default slot and forwards handle props', () => {
    const { getByTestId, getByText } = render(UiResizableHandle, {
      props: {
        disabled: true,
        id: 'resize-sidebar',
        withHandle: true,
      },
      slots: { default: '<span>Grip</span>' },
    });

    const handle = getByTestId('resizable-handle');
    expect(handle).toHaveAttribute('data-disabled', 'true');
    expect(handle).toHaveAttribute('data-id', 'resize-sidebar');
    expect(handle).toHaveAttribute('data-with-handle', 'true');
    expect(getByText('Grip')).toBeInTheDocument();
  });

  test('re-emits dragging changes', async () => {
    const user = userEvent.setup();
    const { emitted, getByTestId } = render(UiResizableHandle);

    await user.click(getByTestId('resizable-handle'));

    expect(emitted('dragging')?.[0]).toEqual([true]);
  });
});
