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

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

export const DefaultValues: StoryFn = () => {
    type User = {
        id: string
        name: string
        /* ... */
    }

    const rows: User[] = [
        { id: '1', name: 'Jane Doe' /* ... */ },
        { id: '2', name: 'John Smith' /* ... */ },
    ]

    const columns: Column<User>[] = [
        {
            id: 'name',
            label: 'Name',
        },
    ]

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

export const NestedValues: StoryFn = () => {
    type User = {
        id: string
        profile: {
            name: string
            /* ... */
        }
    }

    const rows: User[] = [
        { id: '1', profile: { name: 'Jane Doe' } /* ... */ },
        { id: '2', profile: { name: 'John Smith' } /* ... */ },
    ]

    const columns: Column<User>[] = [
        {
            id: 'name',
            label: 'Name',
            cell: {
                value({ row }) {
                    return row.profile.name
                },
            },
        },
    ]

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

export const DonationLabel: StoryFn = () => {
    type Donation = {
        id: string
        donation: number
        donationCurrency: string
    }

    const rows: Donation[] = [
        { id: '1', donation: 20, donationCurrency: 'USD' },
        { id: '2', donation: 25, donationCurrency: 'EUR' },
        { id: '3', donation: 30, donationCurrency: 'USD' },
        { id: '4', donation: 35, donationCurrency: 'USD' },
    ]

    const intl = useIntl()
    const columns: Column<Donation>[] = [
        {
            id: 'donation',
            label: 'Donation',
            cell: {
                /* Value here will be `donation` due to the columnId matching the property on the row */
                label({ row, value }) {
                    return `${intl.formatNumber(value, {
                        style: 'currency',
                        currency: row.donationCurrency,
                    })}`
                },
            },
        },
    ]

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

export const DonationRenderer: StoryFn = () => {
    type Donation = {
        id: string
        donation: number
        donationCurrency: string
    }

    const rows: Donation[] = [
        { id: '1', donation: 20, donationCurrency: 'USD' },
        { id: '2', donation: 25, donationCurrency: 'EUR' },
        { id: '3', donation: 30, donationCurrency: 'USD' },
        { id: '4', donation: 35, donationCurrency: 'USD' },
    ]

    const intl = useIntl()
    const columns: Column<Donation>[] = [
        {
            id: 'donation',
            label: 'Donation',
            cell: {
                /* Value here will be `donation` due to the columnId matching the property on the row */
                label({ row, value }) {
                    return `${intl.formatNumber(value, {
                        style: 'currency',
                        currency: row.donationCurrency,
                    })}`
                },
                Renderer({ label, tabIndex }) {
                    return (
                        <GridCellDefault
                            icon={<Warning />}
                            leftContentTooltip="This data is current as of 2 months ago."
                            tabIndex={tabIndex}
                            label={label}
                        />
                    )
                },
            },
        },
    ]

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