import * as React from 'react'
import type { StoryFn, Meta } from '@storybook/react-webpack5'
import type { Column } from '../types'
import { Grid } from '../grids'
import { useColumnHeader } from './use-column-header'
import { ArrowDown, ArrowUp, Info } from '@planview/pv-icons'
import { align, theme, spacingPx } from '@planview/pv-utilities'
import styled from 'styled-components'
import { Tooltip } from '@planview/pv-uikit'

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

const CustomHeaderWrap = styled.div`
    ${align.centerV};
    padding: 0 ${spacingPx.xsmall};
    color: ${theme.bloodOrange400};
`

export const CustomHeader: 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',
            },
        ],
        []
    )

    const columns: Column<User>[] = React.useMemo(
        () => [
            { id: 'firstName', label: 'First Name' },
            { id: 'lastName', label: 'Last Name' },
            {
                id: 'email',
                label: 'Email Address',
                width: 250,
                minWidth: 140,
                header: {
                    Renderer({ columnId }) {
                        const { sort, column } = useColumnHeader<User>(columnId)
                        const icon =
                            sort?.direction === 'asc' ? (
                                <ArrowDown color={theme.iconNormal} />
                            ) : (
                                <ArrowUp color={theme.iconNormal} />
                            )
                        return (
                            <CustomHeaderWrap>
                                {column.label}
                                <Tooltip text="User primary email">
                                    <Info />
                                </Tooltip>
                                {sort ? icon : null}
                            </CustomHeaderWrap>
                        )
                    },
                },
            },
        ],
        []
    )

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