import * as React from 'react'
import type { StoryFn, Meta } from '@storybook/react-webpack5'
import { GridHeaderCellDefault } from '.'
import { GridStoriesProvider } from '../utils/grid-stories-provider'
import { CellBoundsPreview } from '../../docs/helpers'

export default {
    title: 'pv-grid/Components/Cells/GridHeaderCellDefault',
    tags: ['autodocs'],
    component: GridHeaderCellDefault,
    parameters: {
        badges: ['intl'],
        docs: {
            source: {
                type: 'dynamic',
                excludeDecorators: true,
            },
        },
    },
    args: {
        columnId: '123',
        label: 'Column header',
        sortDirection: 'none' as any,
    },
    argTypes: {
        sortDirection: {
            control: { type: 'radio' },
            options: ['none', 'ascending', 'descending'],
            mapping: {
                none: undefined,
                ascending: 'asc',
                descending: 'desc',
            },
        },
    },
    decorators: [
        (Story) => (
            <GridStoriesProvider>
                <CellBoundsPreview>
                    <Story />
                </CellBoundsPreview>
            </GridStoriesProvider>
        ),
    ],
} satisfies Meta<typeof GridHeaderCellDefault>

export const Default: StoryFn<typeof GridHeaderCellDefault> = (props) => (
    <GridHeaderCellDefault {...props} />
)

export const MultiColumnSort: StoryFn<typeof GridHeaderCellDefault> = (
    props
) => <GridHeaderCellDefault {...props} />

MultiColumnSort.args = {
    sortDirection: 'ascending' as any,
    sortNumber: 2,
}

export const RightAlignedHeader: StoryFn<typeof GridHeaderCellDefault> = (
    props
) => <GridHeaderCellDefault {...props} />

RightAlignedHeader.args = {
    align: 'right',
    sortDirection: 'descending' as any,
}