import React, {ReactNode, useState} from 'react';
import ConfirmationModal from "../../../UI/Modal/ActionsModal/ConfirmationModal";

type EditUserNameModalProps = {
    children?: ReactNode
    close: any
    editUsername: (username: string) => any
    oldUsername:string
}

const EditUserNameModal = ({children, editUsername, close, oldUsername}: EditUserNameModalProps) => {

    const [username, setUsername] = useState<string>(oldUsername)

    return (

        <ConfirmationModal
            onClose={() => close()}
            title={'Επεξεργασία Username'}
            text={'Με την αποδοχή του νέου username θα σταλθεί email στον χρήστη που θα τον ενημερώνει για την αλλαγή.'}
            modalAction={() => editUsername(username)}
            className={'edit-username'}
        >

            <div className={'form'}>



                <label htmlFor="new_username" className={'new'}>
                    <span>Τελικό Username:</span>
                    <input type="text" value={username} onChange={(e) => setUsername(e.target.value)}
                           id={'new_username'}/>
                </label>

            </div>

        </ConfirmationModal>
    );
}

export default EditUserNameModal;