import React from 'react'
import { renderHook } from '@testing-library/react'
import type { GridFocusArea, Store } from '../state'
import { createStore } from '../state'
import { useColumnBorders } from './use-column-borders'
import { GridProvider } from '../context/grid-context'

describe('useColumnBorders', () => {
    let store: Store

    beforeEach(() => {
        store = createStore()
        jest.spyOn(store.selectors, 'selectBorderLayout').mockReturnValue(
            new Map([
                [
                    '1',
                    {
                        header: { left: true, right: true },
                        body: { left: false, right: false },
                        footer: { left: false, right: false },
                    },
                ],
                [
                    '3',
                    {
                        header: { left: true, right: true },
                        body: { left: false, right: true },
                        footer: { left: false, right: false },
                    },
                ],
            ])
        )
    })

    it.each([
        ['header', { showLeftBorder: true, showRightBorder: true }],
        ['body', { showLeftBorder: false, showRightBorder: false }],
        ['footer', { showLeftBorder: false, showRightBorder: false }],
    ])(
        'should return border values if configured for %s',
        (section, expected) => {
            const { result } = renderHook(
                () => useColumnBorders('1', section as GridFocusArea),
                {
                    wrapper: ({ children }) => (
                        <GridProvider
                            {...store}
                            events={{} as any}
                            api={{} as any}
                        >
                            {children}
                        </GridProvider>
                    ),
                }
            )

            expect(result.current).toEqual(expected)
        }
    )

    it('should return values combined from two columns when requested', () => {
        const { result } = renderHook(
            () => useColumnBorders(['1', '3'], 'body'),
            {
                wrapper: ({ children }) => (
                    <GridProvider {...store} events={{} as any} api={{} as any}>
                        {children}
                    </GridProvider>
                ),
            }
        )

        expect(result.current).toEqual({
            showLeftBorder: false,
            showRightBorder: true,
        })
    })

    it('should return false border values if not configured', () => {
        const { result } = renderHook(() => useColumnBorders('2', 'header'), {
            wrapper: ({ children }) => (
                <GridProvider {...store} events={{} as any} api={{} as any}>
                    {children}
                </GridProvider>
            ),
        })

        expect(result.current).toEqual({
            showLeftBorder: false,
            showRightBorder: false,
        })
    })
})