import type { Meta } from '@storybook/react-webpack5'
import React from 'react'
import { Grid } from '.'
import { GridCellDefault } from '../../components'
import type { Column, ColumnGroup } from '../../types'
import { ColumnGroupConfig } from './__columns'

export default {
    title: 'pv-grid/Components/Grid/ColumnGroup',
    tags: ['hidden'],
    component: ColumnGroupConfig,
} satisfies Meta<typeof ColumnGroupConfig>

export const ColumnGroupStory = {}

type Row = {
    id: string
    title: string
    author: string
    yearPublished: number
    price: number
    discount: number
}

const rows: Row[] = [
    {
        id: '1001',
        title: 'Journey to the Center of the Earth',
        author: 'Jules Verne',
        yearPublished: 1864,
        price: 11.99,
        discount: 1.99,
    },
    {
        id: '1002',
        title: 'Twenty Thousand Leagues Under the Sea',
        author: 'Jules Verne',
        yearPublished: 1870,
        price: 35.65,
        discount: 0,
    },
    {
        id: '1003',
        title: 'Around the World In Eighty Days',
        author: 'Jules Verne',
        yearPublished: 1872,
        price: 29.98,
        discount: 2.99,
    },
]

const currencyFormatter = new Intl.NumberFormat(undefined, {
    style: 'currency',
    currency: 'USD',
})

const columns: Column<Row>[] = [
    {
        id: 'title',
        label: 'Title',
        width: 300,
    },
    {
        id: 'author',
        label: 'Author',
        width: 100,
    },
    {
        id: 'yearPublished',
        label: 'Year',
        width: 100,
        header: {
            align: 'right',
        },
        cell: {
            Renderer: ({ label, tabIndex }) => (
                <GridCellDefault numeric tabIndex={tabIndex} label={label} />
            ),
        },
    },
    {
        id: 'price',
        label: 'Price',
        width: 100,
        header: {
            align: 'right',
        },
        cell: {
            label: ({ value }: { value: number }) =>
                currencyFormatter.format(value),
            Renderer: ({ label, tabIndex }) => (
                <GridCellDefault numeric tabIndex={tabIndex} label={label} />
            ),
        },
    },
    {
        id: 'discount',
        label: 'Discount',
        width: 100,
        header: {
            align: 'right',
        },
        cell: {
            label: ({ value }: { value: number }) =>
                currencyFormatter.format(value),
            Renderer: ({ label, tabIndex }) => (
                <GridCellDefault numeric tabIndex={tabIndex} label={label} />
            ),
        },
    },
]

export const ColumnGrouping = () => {
    const columnGroups = React.useMemo(
        () => [
            {
                id: 'details',
                label: 'Information',
                children: ['author', 'yearPublished'],
            },
            {
                id: 'pricing',
                label: 'Pricing',
                children: ['price', 'discount'],
            },
        ],
        []
    )

    return <Grid rows={rows} columns={columns} columnGroups={columnGroups} />
}

export const ColumnGroupingMultiple = () => {
    const columnGroups: ColumnGroup<Row>[] = React.useMemo(
        () => [
            {
                id: 'top-group',
                label: 'Book Details',
                children: ['title', 'details', 'pricing'],
            },
            {
                id: 'details',
                label: 'Information',
                children: ['author', 'yearPublished'],
            },
            {
                id: 'pricing',
                label: 'Pricing',
                children: ['price', 'discount'],
            },
        ],
        []
    )

    return <Grid rows={rows} columns={columns} columnGroups={columnGroups} />
}

export const ColumnGroupingWithBorder = () => {
    const columnGroups = React.useMemo(
        () =>
            [
                {
                    id: 'details',
                    label: 'Information',
                    children: ['author', 'yearPublished'],
                    border: 'both',
                },
                {
                    id: 'pricing',
                    label: 'Pricing',
                    children: ['price', 'discount'],
                    border: 'both',
                },
            ] satisfies ColumnGroup<Row>[],
        []
    )

    return <Grid rows={rows} columns={columns} columnGroups={columnGroups} />
}