import { Tag } from '@planview/pv-uikit'
import type { Meta } from '@storybook/react-webpack5'
import React from 'react'
import { Grid } from '.'
import { GridCellBase } from '../../components'
import type { Column } from '../../types'
import { Column as ColumnConfig } from './__columns'
import { theme } from '@planview/pv-utilities'

const sizingCategory = {
    control: {},
    table: {
        category: 'Sizing',
    },
}

const reorderingCategory = {
    control: {},
    table: {
        category: 'Reordering',
    },
}

const sortingCategory = {
    control: {},
    table: {
        category: 'Sorting',
    },
}

const visibilityCategory = {
    control: {},
    table: {
        category: 'Visibility',
    },
}

export default {
    title: 'pv-grid/Components/Grid/Columns',
    component: ColumnConfig,
    parameters: {
        badges: ['intl'],
    },
    argTypes: {
        width: { ...sizingCategory },
        minWidth: { ...sizingCategory },
        maxWidth: { ...sizingCategory },
        resizable: { ...sizingCategory },
        movable: { ...reorderingCategory },
        lockedLocation: { ...reorderingCategory },
        sticky: { ...reorderingCategory },
        sortable: { ...sortingCategory },
        sortStrategy: { ...sortingCategory },
        sortEmptyAs: { ...sortingCategory },
        hidden: { ...visibilityCategory },
        hideable: { ...visibilityCategory },
    },
} satisfies Meta<typeof ColumnConfig>

type Entry = {
    id: string
    date: Date
}

export const Default = () => (
    <Grid
        columns={React.useMemo<Column<Entry>[]>(
            () => [
                {
                    id: 'id',
                    label: 'Id',
                    sortable: false,
                    movable: false,
                    resizable: false,
                    lockedLocation: 'left',
                    width: 72,
                },
                {
                    id: 'minMax',
                    label: 'Min and max width',
                    width: 150,
                    minWidth: 150,
                    maxWidth: 300,
                    cell: {
                        label: () => 'N/A',
                    },
                },
                {
                    id: 'custom',
                    label: 'Custom cell',
                    cell: {
                        Renderer({ tabIndex }) {
                            return (
                                <GridCellBase tabIndex={tabIndex}>
                                    <Tag
                                        label="Example"
                                        color={theme.primary500}
                                    />
                                </GridCellBase>
                            )
                        },
                    },
                },
                {
                    id: 'date',
                    label: 'Format label',
                    cell: {
                        label({ value }: { value: Date }) {
                            return value.toDateString()
                        },
                    },
                },
            ],
            []
        )}
        rows={React.useMemo<Entry[]>(
            () => [
                { id: '123', date: new Date(2022, 0, 5) },
                { id: '234', date: new Date(2022, 10, 16) },
                { id: '345', date: new Date(2023, 2, 7) },
            ],
            []
        )}
        selectionMode="single"
    />
)

export const WithBorder = () => (
    <Grid
        columns={React.useMemo<Column<Entry>[]>(
            () => [
                {
                    id: 'id',
                    label: 'Id',
                    sortable: false,
                    movable: false,
                    resizable: false,
                    lockedLocation: 'left',
                    width: 72,
                    border: 'right',
                },
                {
                    id: 'minMax',
                    label: 'Min and max width',
                    width: 150,
                    minWidth: 150,
                    maxWidth: 300,
                    cell: {
                        label: () => 'N/A',
                    },
                },
                {
                    id: 'custom',
                    label: 'Custom cell',
                    cell: {
                        Renderer({ tabIndex }) {
                            return (
                                <GridCellBase tabIndex={tabIndex}>
                                    <Tag
                                        label="Example"
                                        color={theme.primary500}
                                    />
                                </GridCellBase>
                            )
                        },
                    },
                },
                {
                    id: 'date',
                    label: 'Format label',
                    cell: {
                        label({ value }: { value: Date }) {
                            return value.toDateString()
                        },
                    },
                },
            ],
            []
        )}
        rows={React.useMemo<Entry[]>(
            () => [
                { id: '123', date: new Date(2022, 0, 5) },
                { id: '234', date: new Date(2022, 10, 16) },
                { id: '345', date: new Date(2023, 2, 7) },
            ],
            []
        )}
        selectionMode="single"
    />
)