import React, { type ChangeEventHandler, useEffect, useState } from 'react';
import { Form } from '@theorchard/suite-components';
import { PopupModal } from 'src/components/shared/popup-modal';

export interface PaymentGroupPaymentAccountNotePopupProps {
    closeHandler: () => void;
    isModalOpen: boolean;
    saveHandler: (noteText: string) => void;
}

export default function PaymentGroupPaymentAccountNotePopup({
    closeHandler,
    isModalOpen,
    saveHandler,
}: PaymentGroupPaymentAccountNotePopupProps) {
    const [noteText, setNoteText] = useState('');

    const changeHandler: ChangeEventHandler<HTMLInputElement> = ({
        target: { value },
    }) => setNoteText(value);

    useEffect(() => {
        if (!isModalOpen) setNoteText('');
    }, [isModalOpen]);

    const modalContent = (
        <Form.Control
            as="textarea"
            data-testid="payment-account-note-input"
            name="note"
            onChange={changeHandler}
            placeholder="Enter your text here"
            type="text"
            value={noteText}
        />
    );

    return (
        <PopupModal
            className="PaymentGroupDetails-add-note-popup"
            closeHandler={closeHandler}
            closeButtonText="Cancel"
            headerLabel="Add note"
            isOpen={isModalOpen}
            isSaveButtonDisabled={!noteText.trim()}
            modalContent={modalContent}
            saveButtonText="Add"
            saveHandler={() => saveHandler(noteText.trim())}
        />
    );
}