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 UiResizablePanel from '../UiResizablePanel.vue';

vi.mock('@/components/core/resizable', () => ({
  ResizablePanel: defineComponent({
    name: 'ResizablePanelMock',
    props: {
      defaultSize: {
        type: Number,
        default: undefined,
      },
      minSize: {
        type: Number,
        default: undefined,
      },
    },
    emits: ['collapse', 'expand', 'resize'],
    setup(props, { attrs, emit, slots }) {
      return () =>
        h(
          'button',
          {
            ...attrs,
            'data-default-size': props.defaultSize,
            'data-min-size': props.minSize,
            'data-testid': 'resizable-panel',
            type: 'button',
            onClick: () => {
              emit('collapse');
              emit('expand');
              emit('resize', 40, 30);
            },
          },
          slots.default?.({ isCollapsed: false, isExpanded: true }),
        );
    },
  }),
}));

describe('UiResizablePanel', () => {
  test('renders default slot and forwards size props', () => {
    const { getByTestId, getByText } = render(UiResizablePanel, {
      props: {
        defaultSize: 60,
        minSize: 20,
      },
      slots: { default: '<span>Panel content</span>' },
    });

    const panel = getByTestId('resizable-panel');
    expect(panel).toHaveAttribute('data-default-size', '60');
    expect(panel).toHaveAttribute('data-min-size', '20');
    expect(getByText('Panel content')).toBeInTheDocument();
  });

  test('passes slot props through from the core panel', () => {
    const { getByText } = render({
      components: { UiResizablePanel },
      template: `
        <UiResizablePanel :default-size="50" v-slot="{ isCollapsed, isExpanded }">
          Collapsed: {{ isCollapsed }}, expanded: {{ isExpanded }}
        </UiResizablePanel>
      `,
    });

    expect(getByText('Collapsed: false, expanded: true')).toBeInTheDocument();
  });

  test('re-emits panel lifecycle events', async () => {
    const user = userEvent.setup();
    const { emitted, getByTestId } = render(UiResizablePanel);

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

    expect(emitted('collapse')?.[0]).toEqual([]);
    expect(emitted('expand')?.[0]).toEqual([]);
    expect(emitted('resize')?.[0]).toEqual([40, 30]);
  });
});
