import type { Meta, StoryFn } from '@storybook/react-webpack5'
import React from 'react'
import type { Column } from '../../types'
import { Grid } from '.'
import { GridCellDefault } from '../../components'
import { theme } from '@planview/pv-utilities'

export default {
    title: 'pv-grid/Components/Grid/Column spans',
    tags: ['hidden'],
    component: undefined,
} satisfies Meta

type UserWithSkill = {
    id: number
    firstName: string
    lastName: string
    age: number
    skill: string
    skillDetails?: string
}

const users: UserWithSkill[] = [
    {
        id: 1,
        firstName: 'John',
        lastName: 'Doe',
        age: 30,
        skill: 'Programming',
        skillDetails: 'JavaScript, TypeScript',
    },
    {
        id: 2,
        firstName: 'Jane',
        lastName: 'Smith',
        age: 28,
        skill: 'Design',
        skillDetails: 'UI/UX, Graphic Design',
    },
    {
        id: 3,
        firstName: 'Alice',
        lastName: 'Johnson',
        age: 35,
        skill: 'Marketing',
        skillDetails: 'SEO, Content Strategy',
    },
    {
        id: 4,
        firstName: 'Bob',
        lastName: 'Brown',
        age: 40,
        skill: 'None',
    },
    {
        id: 5,
        firstName: 'Charlie',
        lastName: 'Davis',
        age: 25,
        skill: 'Data Analysis',
        skillDetails: 'Python, SQL',
    },
]

export const BasicUsage: StoryFn = () => {
    const columns = React.useMemo(
        () =>
            [
                {
                    id: 'firstName',
                    label: 'First',
                    width: 70,
                    cell: {
                        /* Always merge cells */
                        colSpan: ['firstName', 'lastName'],

                        label({ row }) {
                            return [row.firstName, row.lastName].join(' ')
                        },
                        Renderer({ label, tabIndex }) {
                            return (
                                <GridCellDefault
                                    label={label}
                                    tabIndex={tabIndex}
                                    backgroundColor={theme.green50}
                                />
                            )
                        },
                    },
                },
                {
                    id: 'lastName',
                    label: 'Last',
                    width: 70,
                },
                {
                    id: 'age',
                    label: 'Age',
                },
                {
                    id: 'skill',
                    label: 'Skill',
                    cell: {
                        colSpan: ({ row }) => {
                            if (row.skill === 'None') {
                                /* Merge cells only if skill is none */
                                return ['skill', 'skillDetails']
                            }
                            return []
                        },
                        Renderer({ label, tabIndex }) {
                            return (
                                <GridCellDefault
                                    label={label}
                                    tabIndex={tabIndex}
                                    backgroundColor={
                                        label === 'None'
                                            ? theme.blue50
                                            : undefined
                                    }
                                />
                            )
                        },
                    },
                },
                {
                    id: 'skillDetails',
                    label: 'Skill Details',
                },
            ] satisfies Column<UserWithSkill>[],
        []
    )

    return <Grid selectionMode="none" rows={users} columns={columns} />
}

BasicUsage.parameters = {
    docs: {
        source: {
            code: `
type UserWithSkill = {
    id: number
    firstName: string
    lastName: string
    age: number
    skill: string
    skillDetails?: string
}

const users: UserWithSkill[] = [
    {
        id: 1,
        firstName: 'John',
        lastName: 'Doe',
        age: 30,
        skill: 'Programming',
        skillDetails: 'JavaScript, TypeScript',
    },
    {
        id: 2,
        firstName: 'Jane',
        lastName: 'Smith',
        age: 28,
        skill: 'Design',
        skillDetails: 'UI/UX, Graphic Design',
    },
    {
        id: 3,
        firstName: 'Alice',
        lastName: 'Johnson',
        age: 35,
        skill: 'Marketing',
        skillDetails: 'SEO, Content Strategy',
    },
    {
        id: 4,
        firstName: 'Bob',
        lastName: 'Brown',
        age: 40,
        skill: 'None',
    },
    {
        id: 5,
        firstName: 'Charlie',
        lastName: 'Davis',
        age: 25,
        skill: 'Data Analysis',
        skillDetails: 'Python, SQL',
    },
]

export const BasicUsage: StoryFn = () => {
    const columns = React.useMemo(
        () =>
            [
                {
                    id: 'firstName',
                    label: 'First',
                    width: 70,
                    cell: {
                        /* Always merge cells */
                        colSpan: ['firstName', 'lastName'],

                        label({ row }) {
                            return [row.firstName, row.lastName].join(' ')
                        },
                        Renderer({ label, tabIndex }) {
                            return (
                                <GridCellDefault
                                    label={label}
                                    tabIndex={tabIndex}
                                    backgroundColor={theme.green50}
                                />
                            )
                        },
                    },
                },
                {
                    id: 'lastName',
                    label: 'Last',
                    width: 70,
                },
                {
                    id: 'age',
                    label: 'Age',
                },
                {
                    id: 'skill',
                    label: 'Skill',
                    cell: {
                        colSpan: ({ row }) => {
                            if (row.skill === 'None') {
                                /* Merge cells only if skill is none */
                                return ['skill', 'skillDetails']
                            }
                            return []
                        },
                        Renderer({ label, tabIndex }) {
                            return (
                                <GridCellDefault
                                    label={label}
                                    tabIndex={tabIndex}
                                    backgroundColor={
                                        label === 'None'
                                            ? theme.blue50
                                            : undefined
                                    }
                                />
                            )
                        },
                    },
                },
                {
                    id: 'skillDetails',
                    label: 'Skill Details',
                },
            ] satisfies Column<UserWithSkill>[],
        []
    )

    return <Grid selectionMode="none" rows={users} columns={columns} />
}
            `,
        },
    },
}