/* eslint-disable jsx-a11y/click-events-have-key-events */
import * as React from 'react'
import type { StoryFn, Meta } from '@storybook/react-webpack5'
import type { Column } from '../'
import { Grid, useSubNavigation, GridCellBase } from '../'

export default {
    title: 'pv-grid/hooks/useColumnHeader',
    tags: ['hidden'],
    parameters: {
        controls: { disabled: true, hideNoControlsWarning: true },
    },
} satisfies Meta<any>

import { theme } from '@planview/pv-utilities'
import { Chip } from '@planview/pv-uikit'

type Tag = {
    label: string
    color: string
}

export type Team = {
    id: string
    name: string
    description?: string
    privacy: 'public' | 'private'
    createdOn: Date
    tags: Tag[]
}

export const UseSubNavigation: StoryFn<any> = () => {
    const teams: Team[] = [
        {
            id: '123',
            name: 'Everyone',
            description: 'Everyone in your organization',
            privacy: 'public',
            createdOn: new Date(2020, 0, 5),
            tags: [
                { label: '#Everyone', color: theme.red200 },
                { label: '#Team', color: theme.blue200 },
                { label: '#InThisTogether', color: theme.yellow200 },
            ],
        },
        {
            id: '234',
            name: 'External',
            description: 'Everyone outside your organization',
            privacy: 'public',
            createdOn: new Date(2020, 0, 5),
            tags: [],
        },
        {
            id: '345',
            name: 'Engineering',
            privacy: 'private',
            createdOn: new Date(2022, 7, 19),
            tags: [
                { label: '#WeBuildTogether', color: theme.navy600 },
                { label: '#Team', color: theme.blue200 },
            ],
        },
        {
            id: '3451',
            name: 'Design',
            privacy: 'private',
            createdOn: new Date(2023, 2, 10),
            tags: [
                { label: '#Team', color: theme.blue200 },
                { label: '#DesignLove', color: theme.purple500 },
                { label: '#DesignSystem', color: theme.purple500 },
            ],
        },
    ]
    const columns: Column<Team>[] = [
        {
            id: 'name',
            label: 'Team Name',
            width: 300,
        },

        {
            id: 'tags',
            label: 'Tags',
            width: 400,
            cell: {
                Renderer({ value, tabIndex }) {
                    const tags = value as Team['tags']
                    const cellNavigationEnabled = !!tags.length

                    const { currentSubFocusIndex, setCurrentSubFocusIndex } =
                        useSubNavigation({
                            indexes: tags.length,
                            inlineFocusStylingEnabled: cellNavigationEnabled,
                        })

                    return (
                        <GridCellBase tabIndex={tabIndex}>
                            {tags.map((tag, i) => (
                                <div
                                    role="button"
                                    key={tag.label}
                                    onClick={() => setCurrentSubFocusIndex(i)}
                                    tabIndex={
                                        currentSubFocusIndex === i ? 0 : -1
                                    }
                                >
                                    <Chip
                                        label={tag.label}
                                        color={tag.color}
                                        focusable
                                    />
                                </div>
                            ))}
                        </GridCellBase>
                    )
                },
            },
        },
    ]
    return <Grid columns={columns} rows={teams} selectionMode="none" />
}