// In modular applications:
// import { Model } from "survey-core";
// import { ContrastDark } from "survey-core/themes/contrast-dark";
// import { ContrastLight } from "survey-core/themes/contrast-light";

function SurveyComponent(survey) {
    // const survey = new Model(json);
    // const survey = new Survey.Model(surveyJson);
    survey.onComplete.add((sender, options) => {
        console.log(JSON.stringify(sender.data, null, 3));
    });
    survey.onUploadFiles.add((_, options) => {
        const formData = new FormData();
        options.files.forEach((file) => {
            formData.append(file.name, file);
        });
    
        fetch("https://api.surveyjs.io/private/Surveys/uploadTempFiles", {
            method: "POST",
            body: formData
        })
            .then((response) => response.json())
            .then((data) => {
                options.callback(
                    options.files.map((file) => {
                        return {
                            file: file,
                            content: "https://api.surveyjs.io/private/Surveys/getTempFile?name=" + data[file.name]
                        };
                    })
                );
            })
            .catch((error) => {
                console.error("Error: ", error);
                options.callback([], [ 'An error occurred during file upload.' ]);
            });
    });
    
    async function deleteFile(fileURL, options) {
        try {
            const name = fileURL.split("=")[1];
            const apiUrl = `https://api.surveyjs.io/private/Surveys/deleteTempFile?name=${name}`;
            const response = await fetch(apiUrl, {
                method: "DELETE"
            });
    
            if (response.status === 200) {
                console.log(`File ${name} was deleted successfully`);
                options.callback("success");
            } else {
                console.error(`Failed to delete file: ${name}`);
                options.callback("error");
            }
        } catch (error) {
            console.error("Error while deleting file: ", error);
            options.callback("error");
        }
    }
    
    survey.onClearFiles.add(async (_, options) => {
        if (!options.value || options.value.length === 0)
            return options.callback("success");
        if (!options.fileName && !!options.value) {
            for (const item of options.value) {
                await deleteFile(item.content, options);
            }
        } else {
            const fileToRemove = options.value.find(
                (item) => item.name === options.fileName
            );
            if (fileToRemove) {
                await deleteFile(fileToRemove.content, options);
            } else {
                console.error(`File with name ${options.fileName} is not found`);
            }
        }
    });
}
function getStyle1(){
    return {
        "backgroundImage": "",
        "backgroundImageFit": "cover",
        "backgroundImageAttachment": "scroll",
        "backgroundOpacity": 1,
        "themeName": "default",
        "isPanelless": true,
        "colorPalette": "light",
        "cssVariables": {
            "--sjs-general-backcolor": "rgba(255, 255, 255, 1)",
            "--sjs-general-backcolor-dark": "rgba(248, 248, 248, 1)",
            "--sjs-general-backcolor-dim": "rgba(255, 255, 255, 1)",
            "--sjs-general-backcolor-dim-light": "rgba(249, 249, 249, 1)",
            "--sjs-general-backcolor-dim-dark": "rgba(243, 243, 243, 1)",
            "--sjs-general-forecolor": "rgba(0, 0, 0, 0.91)",
            "--sjs-general-forecolor-light": "rgba(0, 0, 0, 0.45)",
            "--sjs-general-dim-forecolor": "rgba(0, 0, 0, 0.91)",
            "--sjs-general-dim-forecolor-light": "rgba(0, 0, 0, 0.45)",
            "--sjs-primary-backcolor": "rgba(0, 176, 82, 1)",
            "--sjs-primary-backcolor-light": "rgba(0, 176, 82, 0.1)",
            "--sjs-primary-backcolor-dark": "rgba(0, 161, 75, 1)",
            "--sjs-primary-forecolor": "rgba(255, 255, 255, 1)",
            "--sjs-primary-forecolor-light": "rgba(255, 255, 255, 0.25)",
            "--sjs-base-unit": "8px",
            "--sjs-corner-radius": "4px",
            "--sjs-secondary-backcolor": "rgba(255, 152, 20, 1)",
            "--sjs-secondary-backcolor-light": "rgba(255, 152, 20, 0.1)",
            "--sjs-secondary-backcolor-semi-light": "rgba(255, 152, 20, 0.25)",
            "--sjs-secondary-forecolor": "rgba(255, 255, 255, 1)",
            "--sjs-secondary-forecolor-light": "rgba(255, 255, 255, 0.25)",
            "--sjs-shadow-small": "0px 1px 2px 0px rgba(0, 0, 0, 0.15)",
            "--sjs-shadow-small-reset": "0px 0px 0px 0px rgba(0, 0, 0, 0.15)",
            "--sjs-shadow-medium": "0px 2px 6px 0px rgba(0, 0, 0, 0.1)",
            "--sjs-shadow-large": "0px 8px 16px 0px rgba(0, 0, 0, 0.1)",
            "--sjs-shadow-inner": "inset 0px 1px 2px 0px rgba(0, 0, 0, 0.15)",
            "--sjs-shadow-inner-reset": "inset 0px 0px 0px 0px rgba(0, 0, 0, 0.15)",
            "--sjs-border-light": "rgba(0, 0, 0, 0.09)",
            "--sjs-border-default": "rgba(0, 0, 0, 0.16)",
            "--sjs-border-inside": "rgba(0, 0, 0, 0.16)",
            "--sjs-special-red": "rgba(229, 10, 62, 1)",
            "--sjs-special-red-light": "rgba(229, 10, 62, 0.1)",
            "--sjs-special-red-forecolor": "rgba(255, 255, 255, 1)",
            "--sjs-special-green": "rgba(25, 179, 148, 1)",
            "--sjs-special-green-light": "rgba(25, 179, 148, 0.1)",
            "--sjs-special-green-forecolor": "rgba(255, 255, 255, 1)",
            "--sjs-special-blue": "rgba(67, 127, 217, 1)",
            "--sjs-special-blue-light": "rgba(67, 127, 217, 0.1)",
            "--sjs-special-blue-forecolor": "rgba(255, 255, 255, 1)",
            "--sjs-special-yellow": "rgba(255, 152, 20, 1)",
            "--sjs-special-yellow-light": "rgba(255, 152, 20, 0.1)",
            "--sjs-special-yellow-forecolor": "rgba(255, 255, 255, 1)",
            "--sjs-article-font-xx-large-textDecoration": "none",
            "--sjs-article-font-xx-large-fontWeight": "700",
            "--sjs-article-font-xx-large-fontStyle": "normal",
            "--sjs-article-font-xx-large-fontStretch": "normal",
            "--sjs-article-font-xx-large-letterSpacing": "0",
            "--sjs-article-font-xx-large-lineHeight": "64px",
            "--sjs-article-font-xx-large-paragraphIndent": "0px",
            "--sjs-article-font-xx-large-textCase": "none",
            "--sjs-article-font-x-large-textDecoration": "none",
            "--sjs-article-font-x-large-fontWeight": "700",
            "--sjs-article-font-x-large-fontStyle": "normal",
            "--sjs-article-font-x-large-fontStretch": "normal",
            "--sjs-article-font-x-large-letterSpacing": "0",
            "--sjs-article-font-x-large-lineHeight": "56px",
            "--sjs-article-font-x-large-paragraphIndent": "0px",
            "--sjs-article-font-x-large-textCase": "none",
            "--sjs-article-font-large-textDecoration": "none",
            "--sjs-article-font-large-fontWeight": "700",
            "--sjs-article-font-large-fontStyle": "normal",
            "--sjs-article-font-large-fontStretch": "normal",
            "--sjs-article-font-large-letterSpacing": "0",
            "--sjs-article-font-large-lineHeight": "40px",
            "--sjs-article-font-large-paragraphIndent": "0px",
            "--sjs-article-font-large-textCase": "none",
            "--sjs-article-font-medium-textDecoration": "none",
            "--sjs-article-font-medium-fontWeight": "700",
            "--sjs-article-font-medium-fontStyle": "normal",
            "--sjs-article-font-medium-fontStretch": "normal",
            "--sjs-article-font-medium-letterSpacing": "0",
            "--sjs-article-font-medium-lineHeight": "32px",
            "--sjs-article-font-medium-paragraphIndent": "0px",
            "--sjs-article-font-medium-textCase": "none",
            "--sjs-article-font-default-textDecoration": "none",
            "--sjs-article-font-default-fontWeight": "400",
            "--sjs-article-font-default-fontStyle": "normal",
            "--sjs-article-font-default-fontStretch": "normal",
            "--sjs-article-font-default-letterSpacing": "0",
            "--sjs-article-font-default-lineHeight": "28px",
            "--sjs-article-font-default-paragraphIndent": "0px",
            "--sjs-article-font-default-textCase": "none"
        }
    }
}

function _constructSurvey(surveyJson){
    const survey = new Survey.Model(surveyJson);
    
    function displayResults (sender) {
        const results = JSON.stringify(sender.data, null, 4);
        document.querySelector("#surveyResults").textContent = results;
        document.querySelector("#resultsContainer").style.display = "block"
    }
    
    survey.onComplete.add(displayResults);
    
    $(function() {
        $("#surveyContainer").Survey({ model: survey });
    });

}

function MultiForm(){
    const surveyJson = {
        triggers: [
            { 
                type: "complete", 
                expression: "{gave_birth_before} = 3" 
            },
            { 
                type: "complete", 
                expression: "{documented} = 4" 
            },
            { 
                type: "complete", 
                expression: "{age} = 3" 
            },
            { 
                type: "complete", 
                expression: "{age} = 2" 
            }
        ],
        completedHtmlOnCondition: [
            {
                expression: "{gave_birth_before} = 3",
                html:"Feel free to check out our Resource Directory at <a href='/pages/resources'>Resource Directory</a> for a list of other local agencies that may be able to help! If you have any questions, feel free to give us a call at 832-987-2076)."
            },
            {
                expression: "{documented} = 4",
                html:"Feel free to check out our Resource Directory at <a href='/pages/resources'>Resource Directory</a> for a list of other local agencies that may be able to help! If you have any questions, feel free to give us a call at 832-987-2076)."
            },
            {
                expression: "{age} = 3",
                html:"Feel free to check out our Resource Directory at <a href='/pages/resources'>Resource Directory</a> for a list of other local agencies that may be able to help! If you have any questions, feel free to give us a call at 832-987-2076)."
            },
            {
                expression: "{age} = 2",
                html:"Feel free to check out our Resource Directory at <a href='/pages/resources'>Resource Directory</a> for a list of other local agencies that may be able to help! If you have any questions, feel free to give us a call at 832-987-2076)."
            }
        ],
        pages: [
            {
                elements: [{
                    type: "html",
                    html: "<h4>Press start when your ready to begin application.</h4>"
                }]
            },

            // page1
            {
                "name": "page3",
                elements: [
                    {
                        name: "age",
                        title: "What is your age?",
                        type: "radiogroup",
                        choices: [
                            { value: 5, text: "13-17" },
                            { value: 4, text: "18-20" },
                            { value: 3, text: "I'm 21 or older" },
                            { value: 2, text: "I'm under the age of 13" }
                        ],
                        isRequired: true
                    }
                ]
            },

            // page2
            {
                "name": "page2",
                elements: [
                    {
                        name: "gave_birth_before",
                        title: "I gave birth to my first child BEFORE I turned 20?",
                        type: "radiogroup",
                        choices: [
                            { value: 5, text: "Yes, this is correct" },
                            { value: 4, text: "No, I was 20 or older when my first child was born" },
                            { value: 3, text: "I'm currently pregnant with my first child" }
                        ],
                        isRequired: true
                    }
                ]
            },

            // page3
            {
                "name": "page3",
                elements: [
                    {
                        name: "documented",
                        title: "I am a documented US Citizen or have a lawful status",
                        type: "radiogroup",
                        choices: [
                            { value: 5, text: "Yes" },
                            { value: 4, text: "No" },
                            { value: 3, text: "I'm not sure" }
                        ],
                        isRequired: true
                    }
                ]
            },

            // page4
            {

                title: "Cradle2Career - Youth Parent intake form",
                name: "page4",
                elements: [

                    // fullname
                    {
                        name: "fullname",
                        title: "What is your first and last name?",
                        type: "text",
                        isRequired: true
                    },

                    // email
                    {
                        name: "email",
                        title: "Email Address",
                        type: "text",
                        isRequired: true
                    },

                    // phone_number
                    {
                        name: "phone_number",
                        title: "What is your phone number?",
                        type: "text",
                        isRequired: true
                    },

                    // children_count
                    {
                        name: "children_count",
                        title: "How many children do you have?",
                        type: "radiogroup",
                        choices: [
                            { value: 4, text: "1" },
                            { value: 3, text: "2" },
                            { value: 2, text: "3" },
                            { value: 1, text: "Currently pregnant" }
                        ],
                        isRequired: true
                    },

                    // gender
                    {
                        name: "gender",
                        title: "What is the sex of your child/children?",
                        type: "radiogroup",
                        choices: [
                            { value: 3, text: "Boy" },
                            { value: 2, text: "Girl" },
                            { value: 1, text: "Unknown" }
                        ],
                        isRequired: true
                    },

                    //hear_about
                    {
                        name: "hear_about",
                        title: "How did you hear about Cradle2Career?",
                        type: "radiogroup",
                        showOtherItem: true,
                        choices: [
                            { value: 7, text: "TV" },
                            { value: 6, text: "Google" },
                            { value: 5, text: "Instagram" },
                            { value: 4, text: "X (Twitter)" },
                            { value: 3, text: "Facebook" },
                            { value: 2, text: "Friend/Family" }
                        ],
                        isRequired: true
                    },

                    // file
                    {
                        "type": "file",
                        "title": "You can upload any additional files here.",
                        "name": "files",
                        "storeDataAsText": false,
                        "waitForUpload": true,
                        "allowMultiple": true,
                        "maxSize": 102400,
                        "hideNumber": true
                    },

                    // confirm_consent
                    {
                        "type": "boolean",
                        "name": "confirm_consent",
                        "title": "I understand if younger than 13 need parent or legal guardian consent.",
                        "defaultValue": "false",
                        "renderAs": "checkbox",
                        "validators": [
                         {
                          "type": "expression",
                          "text": "Please confirm consent",
                          "expression": "{confirm_consent} = true"
                         }
                        ],
                        "titleLocation": "left",
                        "label": "",
                        "showTitle": true
                    }
                        
                ]
            }
        ],
        showQuestionNumbers: "off",
        pageNextText: "Next",
        completeText: "Submit",
        showPrevButton: true,
        firstPageIsStarted: true,
        startSurveyText: "Start",
        completedHtml: "Thank you for your feedback!",
        showPreviewBeforeComplete: "showAnsweredQuestions",

        showProgressBar: "top",
        completedHtml: "Thank you for your submission. Someone from our staff will be in touch with you soon!",

    };

    _constructSurvey(surveyJson);

}
function MultiForm1(){
    const surveyJson = {
        pages: [{
            elements: [{
                type: "html",
                html: "<h4>In this survey, we will ask you a couple questions about your impressions of our product.</h4>"
            }]
        }, {
            elements: [{
                name: "satisfaction-score",
                title: "How would you describe your experience with our product?",
                type: "radiogroup",
                choices: [
                    { value: 5, text: "Fully satisfying" },
                    { value: 4, text: "Generally satisfying" },
                    { value: 3, text: "Neutral" },
                    { value: 2, text: "Rather unsatisfying" },
                    { value: 1, text: "Not satisfying at all" }
                ],
                isRequired: true
            }]
        }, {
            elements: [{
                name: "what-would-make-you-more-satisfied",
                title: "What can we do to make your experience more satisfying?",
                type: "comment",
                visibleIf: "{satisfaction-score} = 4"
            }, {
                name: "nps-score",
                title: "On a scale of zero to ten, how likely are you to recommend our product to a friend or colleague?",
                type: "rating",
                rateMin: 0,
                rateMax: 10,
            }],
            visibleIf: "{satisfaction-score} >= 4"
        }, {
            elements: [{
                name: "how-can-we-improve",
                title: "In your opinion, how could we improve our product?",
                type: "comment"
            }],
            visibleIf: "{satisfaction-score} = 3"
        }, {
            elements: [{
                name: "disappointing-experience",
                title: "Please let us know why you had such a disappointing experience with our product",
                type: "comment"
            }],
            visibleIf: "{satisfaction-score} =< 2"
        }],
        showQuestionNumbers: "off",
        pageNextText: "Forward",
        completeText: "Submit",
        showPrevButton: false,
        firstPageIsStarted: true,
        startSurveyText: "Press start when your ready to begin application",
        completedHtml: "Thank you for your feedback!",
        showPreviewBeforeComplete: "showAnsweredQuestions"
    };
    
    const survey = new Survey.Model(surveyJson);
    
    function displayResults (sender) {
        const results = JSON.stringify(sender.data, null, 4);
        document.querySelector("#surveyResults").textContent = results;
        document.querySelector("#resultsContainer").style.display = "block"
    }
    
    survey.onComplete.add(displayResults);
    
    $(function() {
        $("#surveyContainer").Survey({ model: survey });
    });
}
function SingleForm(){

    function saveSurveyResults(url, json) {
        console.log(url);
        console.log(json);
        // fetch(url, {
        //     method: 'POST',
        //     headers: {
        //         'Content-Type': 'application/json;charset=UTF-8'
        //     },
        //     body: JSON.stringify(json)
        // })
        // .then(response => {
        //     if (response.ok) {
        //         // Handle success
        //         console.log(response)
        //     } else {
        //         // Handle error
        //     }
        // })
        // .catch(error => {
        //     // Handle error
        // });
    }
    function surveyComplete (survey) {
        const userId = "hjghg";/* ... Getting the user ID ... */
        survey.setValue("userId", userId);
    
        saveSurveyResults(
            "https://your-web-service.com/" + SURVEY_ID,
            survey.data
        )
    }
    
    
    const surveyJson = {
        elements: [{
            name: "FirstName",
            title: "Enter your first name:",
            type: "text"
        }, {
            name: "LastName",
            title: "Enter your last name:",
            type: "text"
        }]
    };
    
    const SURVEY_ID = 1;
    const survey = new Survey.Model(surveyJson);
    survey.completedHtml = "<h4>Thank you for filling out form</h4>";
    $("#surveyContainer").Survey({ model: survey });
    survey.applyTheme(getStyle1());
    survey.onComplete.add(surveyComplete);
    
    

}




function Other1(){
    const surveyJson = {
        "elements": [{
            name: "FirstName",
            title: "Enter your first name:",
            type: "text"
        }, {
            name: "LastName",
            title: "Enter your last name:",
            type: "text"
        },{
            name: "disappointing-experience",
            title: "Please let us know why you had such a disappointing experience with our product",
            type: "comment"
        },{
            name: "satisfaction-score",
            title: "How would you describe your experience with our product?",
            type: "radiogroup",
            choices: [
                { value: 5, text: "Fully satisfying" },
                { value: 4, text: "Generally satisfying" },
                { value: 3, text: "Neutral" },
                { value: 2, text: "Rather unsatisfying" },
                { value: 1, text: "Not satisfying at all" }
            ],
            isRequired: true
        },{
            "type": "tagbox",
            "isRequired": true,
            "choicesByUrl": {
              "url": "https://surveyjs.io/api/CountriesExample"
            },
            "name": "countries",
            "title": "Which countries have you visited within the last three years?",
            "description": "Please select all that apply."
        },{
            "type": "file",
            "title": "Please upload your files",
            "name": "files",
            "storeDataAsText": false,
            "waitForUpload": true,
            "allowMultiple": true,
            "maxSize": 102400,
            "hideNumber": true
        },{
            "type": "signaturepad",
            "name": "signature",
            "title": "Please sign here",
            "isRequired": true,
            "signatureWidth": 600
        },{
          "name": "subscribed",
          "type": "boolean",
          "renderAs": "checkbox",
          "title": "I agree to receive weekly newsletters"
        }]
    }
      
    const survey = new Survey.Model(surveyJson);
    const subscribedQuestion = survey.getQuestionByName("subscribed");
    subscribedQuestion.value = true;
    $("#surveyContainer").Survey({ model: survey });
    SurveyComponent(survey);
}


// SingleForm();
// Other1();
MultiForm()