import React, {useEffect, useState} from 'react';
import CustomLabel from '../../../../UI/CustomLabel/CustomLabel';
import CustomFormSection from "../../../../UI/CustomFormSection/CustomFormSection";
import CustomTextField from "../../../../UI/CustomTextField/CustomTextField";
import {AcceptInvitationParams} from "../../../../../models/DPass/NewInvitation";
import {Invitation} from '../../../../../models/DPass/Invitation';
import Add from "../../../../../assets/images/plus_small.svg";
import Remove from "../../../../../assets/images/minus_small.svg";
import GuideHelperAlt from "../../../../UI/GuideHelperAlt/GuideHelperAlt";

type DPassInvitationCompanions = {
    invitation: Invitation,
}

const DPassInvitationCompanions = ({invitation}: DPassInvitationCompanions) => {

    const [tempValue, setTempValue] = useState<string>();
    const [updatedParams, setUpdatedParams] = useState<AcceptInvitationParams>({
        invitation_id: invitation.id,
        visitor_email: invitation.visitor.email,
        visitor_firstname: '',
        visitor_lastname: '',
        visitor_phone: '',
        personal_id: '',
        vehicle_plate: '',
        companions: invitation.companions
    });
    const [initialList, setInitialList] = useState<Array<string>>(invitation.companions);

    // const [companionListCounter, setCompanionListCounter] = useState(1);
    // @ts-ignore
    const onIncrementCompanionBtnClick = (companionEmail) => {    
        // setCompanionListCounter(companionListCounter+1);
        setInitialList([...initialList, companionEmail])
        setUpdatedParams({...updatedParams, companions: initialList});
    };

    // @ts-ignore
    const onDecrementCompanionBtnClick = (companionEmail) => {
        // setCompanionListCounter(companionListCounter - 1);
        setInitialList(initialList.filter((listItem) => { return listItem != companionEmail}));
        setUpdatedParams({...updatedParams, companions: initialList});
    }

    useEffect(() => {
    },[initialList])


    return (
        <div>
                <div className="row g-5">
                    <div className="col-12 col-helper">
                        <GuideHelperAlt>
                            <p>Στην περίπτωση που θέλετε να προσθέσετε συνοδό παρακαλώ <b>συμπληρώστε το
                                email του <br/>
                                στο παρακάτω πεδίο </b> για να παραλάβει και να αποδεχθεί την προσωπική
                                του πρόσκληση.</p>
                        </GuideHelperAlt>
                    </div>
                </div>
            {              
            
            initialList.map((companion, index) => {
                return (
                    <div key={index}>
                        {/* form - guide Helper - info */}
                        <CustomFormSection theme='user-form' >
                            <div className="row " key={index}>
                                <div className="col-lg-6">
                                    <CustomLabel
                                        htmlFor={`visitor-companion ${index}`}
                                        theme="user-form-field">ΣΥΝΟΔΟΣ</CustomLabel>
                                    <CustomTextField
                                        id={`visitor-companion ${index}`}
                                        // value={updatedParams.companions[index]}
                                        theme={'user-form-field'}
                                        onChange={(e) => {
                                            setTempValue(e);
                                        }}
                                    />
                                </div>
                                {initialList.length === index + 1 &&
                                    <button
                                        key={index}
                                        type='button'
                                        className="add-companion-buttons"
                                        onClick={() => {
                                            //@ts-ignore
                                            onIncrementCompanionBtnClick(tempValue);

                                        }}
                                    >
                                        <img
                                            src={Add}/>
                                    </button>}
                                {initialList.length !== index + 1 &&
                                    <button
                                        key={index}
                                        type='button'
                                        className="add-companion-buttons"
                                        onClick={() => {
                                            onDecrementCompanionBtnClick(tempValue);

                                        }}
                                    >
                                        <img
                                            src={Remove}/>
                                    </button> }
                            </div>
                        </CustomFormSection>
                    </div>
                )
            })
            }
        </div> 
    );
} 


export default DPassInvitationCompanions;