import { memo, ReactNode, useState } from 'react'
import { Button, ButtonProps, Form, FormProps, Popover, PopoverProps } from 'antd'

export type PopromptProps = PopoverProps & {
    children?: ReactNode
    footer?: ReactNode
    text?: string
    onDone?: (values: any) => void
    formProps?: FormProps
    buttonProps?: ButtonProps
}

export const Poprompt = memo<PopromptProps>(({ formProps, buttonProps, footer, children, onDone, text, ...other }) => {
    const [visible, setVisible] = useState<boolean>(false)

    const onFormFinish = (values: any) => {
        setVisible(false)
        onDone?.(values)
    }

    return (
        <Popover
            content={(
                <Form
                    onFinish={onFormFinish}
                    autoComplete={'off'}
                    {...formProps}
                >
                    {children}
                    <Form.Item style={{ marginBottom: 0 }}>
                        {footer ?? (
                            <div style={{ display: 'flex', justifyContent: 'flex-end' }}>
                                <Button htmlType={'reset'} onClick={() => setVisible(false)}>Отмена</Button>
                                <Button type={'primary'} htmlType={'submit'} style={{ marginLeft: '8px' }}>ОК</Button>
                            </div>
                        )}
                    </Form.Item>
                </Form>
            )}
            trigger={'click'}
            {...other}
            visible={visible}
            onVisibleChange={(visible) => setVisible(visible)}
        >
            <Button {...buttonProps}>{text}</Button>
        </Popover>
    )
})

export default Poprompt