import React, {useState, useEffect} from 'react';
import {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 './DPassInvitationDeclineCancel.scss'
import useLoading from "../../../../hooks/useLoading";

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

const DPassInvitationDecline = ({invitation, signature}: DPassInvitationDeclineProps) => {


    const {t, i18n} = useTranslation();
    const [isLoading, setIsLoading] = useLoading(true);
    const [declineParams, setCancelParams] = useState({invitation_id: invitation.id, message_to_host: ''})
    const inputPlaceholder = t('DPASS_decline_invitation.decline_message_input_placeholder')

    const handleInvitationDecline = async () => {

        setIsLoading(true)
        await declineInvitation(signature, declineParams);
        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_decline_invitation.decline_title')}
                            </h1>
                        </div>
                        {/* Invitation Infos */}
                        <DPassInvitationVisitInfo invitation={invitation}>
                            <p className='visit-info-container--visitor-email'>{t('DPASS_decline_invitation.decline_at')}<span>{invitation.visitor.email}</span>
                            </p>
                        </DPassInvitationVisitInfo>
                        <p className='pre-declinecancel-comment-msg'>{t('DPASS_decline_invitation.decline_message_label')}</p>
                        <div className='col-lg-8 declinecancel-container'>
                            {/* Invitation Form */}
                            <div className="text-area-container">
                                <CustomFormSection theme={"user-form"}>

                                    <CustomLabel>
                                        {t('DPASS_decline_invitation.decline_message_input_label')}
                                    </CustomLabel>
                                    <CustomTextArea
                                        theme={"user-form-field"}
                                        placeholder={inputPlaceholder}
                                        value={declineParams.message_to_host}
                                        onChange={(e) => {
                                            setIsLoading(true)
                                            setCancelParams({
                                                ...declineParams,
                                                message_to_host: e
                                            })
                                            setIsLoading(false)
                                        }}

                                    />
                                </CustomFormSection>
                            </div>
                            <div className='declinecancel-action-container'>
                                <FormButtonSubmit
                                    loading={isLoading}
                                    buttonType="submit"
                                    onClick={handleInvitationDecline}>
                                    {t('form.deny')}

                                </FormButtonSubmit>
                            </div>
                        </div>
                    </div>

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

export default DPassInvitationDecline;