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

vi.mock('@/components/core/resizable', () => ({
  ResizablePanelGroup: defineComponent({
    name: 'ResizablePanelGroupMock',
    props: {
      autoSaveId: {
        type: String,
        default: undefined,
      },
      direction: {
        type: String,
        default: undefined,
      },
    },
    emits: ['layout'],
    setup(props, { attrs, emit, slots }) {
      return () =>
        h(
          'div',
          {
            ...attrs,
            'data-auto-save-id': props.autoSaveId,
            'data-direction': props.direction,
            'data-testid': 'resizable-panel-group',
            onClick: () => emit('layout', [25, 75]),
          },
          slots.default?.({ layout: [25, 75] }),
        );
    },
  }),
}));

describe('UiResizablePanelGroup', () => {
  test('renders default slot and forwards props and classes', () => {
    const { getByTestId, getByText } = render(UiResizablePanelGroup, {
      props: {
        autoSaveId: 'main-layout',
        class: 'custom-panel-group',
        direction: 'horizontal',
      },
      slots: { default: '<span>Resizable panels</span>' },
    });

    const panelGroup = getByTestId('resizable-panel-group');
    expect(panelGroup).toHaveAttribute('data-auto-save-id', 'main-layout');
    expect(panelGroup).toHaveAttribute('data-direction', 'horizontal');
    expect(panelGroup).toHaveClass('custom-panel-group');
    expect(getByText('Resizable panels')).toBeInTheDocument();
  });

  test('passes slot props through from the core panel group', () => {
    const { getByText } = render({
      components: { UiResizablePanelGroup },
      template: `
        <UiResizablePanelGroup direction="horizontal" v-slot="{ layout }">
          Layout: {{ layout.join('/') }}
        </UiResizablePanelGroup>
      `,
    });

    expect(getByText('Layout: 25/75')).toBeInTheDocument();
  });

  test('re-emits layout changes', async () => {
    const user = userEvent.setup();
    const { emitted, getByTestId } = render(UiResizablePanelGroup, {
      props: { direction: 'horizontal' },
    });

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

    expect(emitted('layout')?.[0]).toEqual([[25, 75]]);
  });
});
