import React, {useState, useEffect} from 'react';
import {cancelAllVisits, declineInvitation,} from "../../../../API/dpass";
import {useTranslation} from 'react-i18next';
import {Invitation} from '../../../../models/DPass/Invitation';
import DPassInvitationVisitInfo from "../DPassInvitationVisitInfo/DPassInvitationVisitInfo";
import CustomFormSection from '../../../UI/CustomFormSection/CustomFormSection';
import CustomLabel from "../../../UI/CustomLabel/CustomLabel";
import CustomTextArea from "../../../UI/CustomTextArea/CustomTextArea";
import FormButtonSubmit from "../../../UI/FormButton/FormButtonSubmit";
import check from '../../../../assets/images/check-sign.svg'
import '../DPassInvitationDecline/DPassInvitationDeclineCancel.scss'
import useLoading from "../../../../hooks/useLoading";
import {toastSuccess} from "../../../../services/toaster";

type DPassInvitationVisitCancelProps = {
    invitation: Invitation,
    signature: string | null,
}

const DPassInvitationVisitCancel = ({invitation, signature}: DPassInvitationVisitCancelProps) => {


    const {t, i18n} = useTranslation();
    const [isLoading, setIsLoading] = useLoading(true);
    // const [cancelParams, setCancelParams] = useState({invitation_id: invitation.id, message_to_host: ''})
    // const inputPlaceholder = t('DPASS_visit-cancel_invitation.visit-cancel_message_input_placeholder')


    const handleAllVisitsCancel = async () => {

        setIsLoading(true)
        await cancelAllVisits(signature)
        setIsLoading(false)
        window.location.reload();

    }


    return (
        <div id='dpassInvitationDeclineCancel'>
            <div className="main-content col-12">
                <div className="invitation-declinecancel-form-wrapper">

                    <div>
                        <div className="invitation-declinecancel-form-wrapper--title">
                            <h1>
                                {t('DPASS_visit-cancel_invitation.visit-cancel_title')}
                            </h1>
                        </div>
                        {/* Invitation Infos */}
                        <DPassInvitationVisitInfo invitation = {invitation}>
                            <p className='visit-info-container--visitor-email'>{t('DPASS_visit-cancel_invitation.visit-cancel_at')}<span>{invitation.visitor.email}</span>
                            </p>
                        </DPassInvitationVisitInfo>
                        {/*<p className='pre-visit-cancel-comment-msg'>{t('DPASS_visit-cancel_invitation.visit-cancel_message_label')}</p>*/}
                        <div className='col-lg-8 declinecancel-container'>
                            {/* Invitation Form */}
                            {/*<div className="text-area-container">*/}
                            {/*    <CustomFormSection theme={"user-form"}>*/}

                            {/*        <CustomLabel>*/}
                            {/*            {t('DPASS_visit-cancel_invitation.visit-cancel_message_input_label')}*/}
                            {/*        </CustomLabel>*/}
                            {/*        <CustomTextArea*/}
                            {/*            theme={"user-form-field"}*/}
                            {/*            placeholder={inputPlaceholder}*/}
                            {/*            value={cancelParams.message_to_host}*/}
                            {/*            onChange={(e) => {*/}
                            {/*                setIsLoading(true)*/}
                            {/*                setCancelParams({*/}
                            {/*                    ...cancelParams,*/}
                            {/*                    message_to_host: e*/}
                            {/*                })*/}
                            {/*                setIsLoading(false)*/}
                            {/*            }}*/}

                            {/*        />*/}
                            {/*    </CustomFormSection>*/}
                            {/*</div>*/}
                            <div className='declinecancel-action-container'>
                                <FormButtonSubmit
                                    loading={isLoading}
                                    buttonType="submit"
                                    onClick={() => {
                                        if (signature !== null) {
                                            setIsLoading(true)
                                            handleAllVisitsCancel();
                                        }
                                    }}>
                                    {t('form.cancel')}
                                </FormButtonSubmit>
                            </div>
                        </div>
                    </div>

                </div>
            </div>
        </div>
    )
}

export default DPassInvitationVisitCancel;