import React, {ReactNode, useState} from 'react';
import CustomFormSection from "../../../UI/Forms/CustomFormSection/CustomFormSection";
import CustomLabel from "../../../UI/Forms/CustomLabel/CustomLabel";
import CustomCheckbox from "../../../UI/Forms/CustomCheckbox/CustomCheckbox";
import InputFake from "../../../UI/Typography/InputFake";
import {formatDate} from "../../../../helpers/functions";
import ConfirmationModal from "../../../UI/Modal/ActionsModal/ConfirmationModal";
import {CardRequest} from "../../../../models/DPass/CardRequest";

type ResolveRequestModalProps = {
    children?: ReactNode
    resolve: (id: number, type_id: number, date: Date | null | undefined, mobile: string) => any
    request?: CardRequest
    close: () => void
}

const ResolveRequestModal = ({resolve, request, close}: ResolveRequestModalProps) => {


    const [date, setDate] = useState<Date | null>()
    const commonText = "Επιβεβαιώνετε την ολοκλήρωση του αιτήματος;";
    const createCancelCardText = "Υποχρεωτική συμπλήρωση της ημερομηνίας για να προχωρήσετε.";
    let finalText = "";

    if (request?.type.id === 1 || request?.type.id === 2) {
        finalText = createCancelCardText + commonText;
    } else {
        finalText = commonText;
    }

    const handleToggle = () => {
        if (!date) {
            setDate(new Date()) // current date
        } else {
            setDate(null)
        }
    };


    return (
        request ?
            <ConfirmationModal className={'resolve-card-request'}
                               modalAction={() => (date || (request.type.id !== 1 && (request.type.id !== 2 || !date))) && resolve(request.id, request.type.id, date, request.mobile)}
                               // eslint-disable-next-line eqeqeq
                               isDisabled={(request.type.id == 1 && !date)}
                               onClose={close}
                               title={"Ολοκλήρωση Αιτήματος"}
                               text={finalText}>
                {(request.type.id === 1 || request.type.id === 2) &&
                    <CustomFormSection theme={"default"}>
                        <div className="row justify-content-center">
                            <div className="col-12  col-sm-6">

                                <CustomLabel>
                                    ΗΜΕΡΟΜΗΝΙΑ
                                    {/* eslint-disable-next-line eqeqeq */}
                                    {request.type.id == 1 && " ΠΑΡΑΛΑΒΗΣ "}

                                    {/* eslint-disable-next-line eqeqeq */}
                                    {request.type.id == 2 && " ΠΑΡΑΔΟΣΗΣ "}
                                    ΚΑΡΤΑΣ ΑΠΟ ΣΥΝΕΡΓΑΤΗ
                                </CustomLabel>
                                <div className={"d-flex justify-content-center"}>
                                    <CustomCheckbox
                                        checked={Boolean(date)}
                                        onChange={handleToggle}></CustomCheckbox>
                                    <InputFake>
                                        {date ? formatDate(date.toLocaleDateString('en-US')) : `-- -- --`}
                                    </InputFake>

                                </div>
                            </div>

                        </div>
                    </CustomFormSection>}
            </ConfirmationModal>
            : <></>
    );
}

export default ResolveRequestModal;