import { Button, Drawer, DrawerProps } from 'antd'
import React, { useState } from 'react'
import { useStyle } from './style'
import { generateUUID } from '@/utils/uuid.ts'

export interface DrawerPickerProps extends DrawerProps {
    target?: React.ReactNode
    children?: React.ReactNode
    key?: string
}

const DrawerPicker = ({ children, target, ...props }: DrawerPickerProps) => {

    const { styles } = useStyle()

    const [ open, setOpen ] = useState(false)

    const getTarget = () => {
        const def = <Button>{props.title ?? 'Target'}</Button>
        return <span className={styles.target}>{target ?? def}</span>
    }

    return (
            <div className={styles.container} key={props.key ?? generateUUID()}>
                <span className={styles.target} onClick={() => {
                    setOpen(true)
                }}>
                     {getTarget()}
                </span>
                <Drawer {...props}
                        open={open}
                        onClose={() => setOpen(false)}
                >{children}</Drawer>
            </div>
    )
}

export default DrawerPicker