import * as React from 'react'
import type { StoryFn, Meta } from '@storybook/react-webpack5'
import type { Column } from '..'
import { Grid, GridCellDefault } from '..'

export default {
    title: 'pv-grid/Examples/Basic Grid',
    tags: ['hidden'],
} satisfies Meta<any>

export const BasicGrid: StoryFn<any> = () => {
    type User = {
        id: number
        firstName: string
        lastName: string
        email: string
    }

    const rows = React.useMemo<User[]>(
        () => [
            {
                id: 9030,
                firstName: 'Carmela',
                lastName: 'Lubowitz',
                email: 'carmela.lubowitz@planview.com',
            },
            {
                id: 9031,
                firstName: 'Hailee',
                lastName: 'Homenick',
                email: 'hailee.homenick@planview.com',
            },
            {
                id: 9032,
                firstName: 'Alden',
                lastName: 'Hodkiewicz',
                email: 'alden.hodkiewicz@planview.com',
            },
            {
                id: 9033,
                firstName: 'Charlotte',
                lastName: "O'Conner",
                email: "charlotte.o'conner@planview.com",
            },
            {
                id: 9034,
                firstName: 'Derick',
                lastName: 'Bechtelar',
                email: 'derick.bechtelar@planview.com',
            },
            {
                id: 9035,
                firstName: 'Antonina',
                lastName: 'Cremin',
                email: 'antonina.cremin@planview.com',
            },
            {
                id: 9036,
                firstName: 'Lon',
                lastName: 'Emmerich',
                email: 'lon.emmerich@planview.com',
            },
        ],
        []
    )

    const columns: Column<User>[] = React.useMemo(
        () => [
            { id: 'firstName', label: 'First Name' },
            { id: 'lastName', label: 'Last Name' },
            {
                id: 'email',
                label: 'Email Address',
                width: 250,
                cell: {
                    Renderer: ({ label, tabIndex }) => (
                        <GridCellDefault
                            label={label}
                            tabIndex={tabIndex}
                            href={`mailto:${label}`}
                        />
                    ),
                },
            },
        ],
        []
    )

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