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

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

type PlanviewApplication = {
    id: number
    applicationName: string
    displayText: string
}

interface NotificationSummary {
    id: string
    dateTime: Date
    planviewUserId: string
    title: string
    sourceApp: string
    planviewApplication: PlanviewApplication
}

const notifications: NotificationSummary[] = [
    {
        id: 1001,
        dateTime: '2022-08-01 10:03:47',
        planviewUserId: '0c2e9a68-2874-11ed-a261-0242ac120002',
        title: 'Overdue Time Sheets',
        sourceApp: 'PPM Pro',
        planviewApplication: {
            id: 1,
            applicationName: 'PPMPRO',
            displayText: 'PPMPro',
        },
    },
    {
        id: 2001,
        dateTime: '2022-08-01 12:20:50',
        planviewUserId: '0c2e9a68-2874-11ed-a261-0242ac120002',
        title: 'Sara Jones has been assigned to a Card',
        sourceApp: 'AgilePlace',
        planviewApplication: {
            id: 1,
            applicationName: 'PPMPRO',
            displayText: 'PPMPro',
        },
    },
    {
        id: 3003,
        dateTime: '2022-08-01 14:15:03',
        planviewUserId: '0c2e9a68-2874-11ed-a261-0242ac120002',
        title: 'Bob Smith has been assigned to a Card',
        sourceApp: 'AgilePlace',
        planviewApplication: {
            id: 1,
            applicationName: 'PPMPRO',
            displayText: 'PPMPro',
        },
    },
    {
        id: 4001,
        dateTime: '2022-08-02 06:00:30',
        planviewUserId: '0c2e9a68-2874-11ed-a261-0242ac120002',
        title: 'Project health changes',
        sourceApp: 'PPM Pro',
        planviewApplication: {
            id: 1,
            applicationName: 'PPMPRO',
            displayText: 'PPMPro',
        },
    },
    {
        id: 5005,
        dateTime: '2022-08-02 11:05:30',
        planviewUserId: '0c2e9a68-2874-11ed-a261-0242ac120002',
        title: 'Project Log Update: Update production OS version',
        sourceApp: 'PPM Pro',
        planviewApplication: {
            id: 1,
            applicationName: 'PPMPRO',
            displayText: 'PPMPro',
        },
    },
    {
        id: 6006,
        dateTime: '2022-08-03 08:05:47',
        planviewUserId: '0c2e9a68-2874-11ed-a261-0242ac120002',
        title: 'Overdue Time Sheets',
        sourceApp: 'PPM Pro',
        planviewApplication: {
            id: 1,
            applicationName: 'PPMPRO',
            displayText: 'PPMPro',
        },
    },
    {
        id: 7001,
        dateTime: '2022-08-03 10:21:03',
        planviewUserId: '0c2e9a68-2874-11ed-a261-0242ac120002',
        title: "[New Comment] '(12345678) React App in Dovetail'",
        sourceApp: 'AgilePlace',
        planviewApplication: {
            id: 1,
            applicationName: 'AgilePlace',
            displayText: 'AgilePlace',
        },
    },
    {
        id: 8008,
        dateTime: '2022-08-03 16:45:03',
        planviewUserId: '0c2e9a68-2874-11ed-a261-0242ac120002',
        title: 'Sara Jones has been assigned to a Card',
        sourceApp: 'AgilePlace',
        planviewApplication: {
            id: 1,
            applicationName: 'AgilePlace',
            displayText: 'AgilePlace',
        },
    },
    {
        id: 9008,
        dateTime: '2022-08-04 07:15:03',
        planviewUserId: '0c2e9a68-2874-11ed-a261-0242ac120002',
        title: 'Project health changes',
        sourceApp: 'PPM Pro',
        planviewApplication: {
            id: 1,
            applicationName: 'PPMPro',
            displayText: 'PPM Pro',
        },
    },
    {
        id: 1010,
        dateTime: '2022-08-04 12:05:21',
        planviewUserId: '0c2e9a68-2874-11ed-a261-0242ac120002',
        title: 'Project Log Update: Update production OS version',
        sourceApp: 'PPM Pro',
        planviewApplication: {
            id: 1,
            applicationName: 'PPMPro',
            displayText: 'PPM Pro',
        },
    },
].map((n) => ({ ...n, id: `${n.id}`, dateTime: new Date(n.dateTime) }))

export const Notification: StoryFn<any> = () => {
    const intl = useIntl()

    const notificationColumns = React.useMemo<Column<NotificationSummary>[]>(
        () => [
            {
                id: 'dateTime',
                label: 'Date Sent',
                minWidth: 135,
                width: 200,
                movable: false,
                cell: {
                    label: ({ row }) => {
                        const d = intl.formatDate(row.dateTime, {
                            month: 'long',
                            day: 'numeric',
                            year: 'numeric',
                        })
                        const t = intl.formatTime(row.dateTime, {
                            hour: 'numeric',
                            minute: 'numeric',
                        })

                        return `${d} ${t}`
                    },
                },
            },
            {
                id: 'sourceApp',
                label: 'Source',
                minWidth: 125,
                movable: false,
            },
            {
                id: 'title',
                label: 'Title',
                minWidth: 300,
                width: 300,
                movable: false,
            },
        ],
        [intl]
    )

    return (
        <Grid
            selectionMode="single"
            columns={notificationColumns}
            rows={notifications}
            defaultSort={[{ columnId: 'dateTime', direction: 'asc' }]}
        />
    )
}

Notification.decorators = [
    (Story) => (
        <div style={{ width: '100%', height: 220, display: 'flex' }}>
            <Story />
        </div>
    ),
]

Notification.storyName = 'Notifications Grid'