import React from 'react'
import type { Column, GridRowMeta } from '../..'
import { Grid } from '../..'
import type { Meta } from '@storybook/react-webpack5'

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

export const RowDragSimple = () => {
    type Fruit = {
        id: number
        name: string
    }

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

    const data = new Map<number, Fruit>([
        [1, { id: 1, name: 'Apples' }],
        [2, { id: 2, name: 'Oranges' }],
        [3, { id: 3, name: 'Pears' }],
        [4, { id: 4, name: 'Grapes' }],
    ])

    const [ids, setIds] = React.useState([1, 2, 3, 4])

    return (
        <Grid
            selectionMode="none"
            columns={columns}
            rows={{ ids, data }}
            rowDrag={{
                onDrop({ resultIds }) {
                    if (resultIds !== null) {
                        setIds(resultIds)
                    }
                },
            }}
        />
    )
}

export const RowDragCanDrop = () => {
    type Fruit = {
        id: number
        name: string
        parentId: null | number
    }

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

    const data = new Map<number, Fruit>([
        [1, { id: 1, name: 'Pome fruits', parentId: null }],
        [11, { id: 11, name: 'Apples', parentId: 1 }],
        [12, { id: 12, name: 'Pears', parentId: 1 }],
        [2, { id: 2, name: 'Citrus fruits', parentId: null }],
        [21, { id: 21, name: 'Oranges', parentId: 2 }],
        [22, { id: 22, name: 'Lemons', parentId: 2 }],
    ])

    const [meta, setMeta] = React.useState(
        new Map<number, GridRowMeta<Fruit>>([
            [1, { type: 'group', children: [11, 12] }],
            [2, { type: 'group', children: [21, 22] }],
        ])
    )

    const [ids, setIds] = React.useState([1, 2])

    return (
        <Grid
            selectionMode="none"
            columns={columns}
            rows={{ ids, data, meta }}
            rowDrag={{
                canDrop({ draggedRows, targetParentId }) {
                    if (targetParentId === null) {
                        return {
                            allowed: false,
                            message: '',
                        }
                    }
                    if (targetParentId !== draggedRows[0].row.parentId) {
                        return {
                            allowed: false,
                            message: 'You cannot change the category of fruits',
                        }
                    }
                    return { allowed: true }
                },
                onDrop({ resultIds, targetParentId }) {
                    if (resultIds !== null) {
                        if (targetParentId) {
                            setMeta((meta) => {
                                const newMeta = new Map(meta)
                                newMeta.set(targetParentId, {
                                    type: 'tree',
                                    children: resultIds,
                                })

                                return newMeta
                            })
                        } else {
                            setIds(resultIds)
                        }
                    }
                },
            }}
        />
    )
}