
import React, { useEffect } from "react";
import { View, Text, Button, KeyboardAvoidingView, Platform, StyleSheet, ScrollView } from "react-native";
import { KeyboardAwareScrollView } from 'react-native-keyboard-aware-scroll-view'
import { DndProvider } from "react-dnd";
import { ConfigProvider, enUS } from "@/utils/configProvider";
import { HTML5Backend } from "react-dnd-html5-backend";
// import { useParams } from "react-router-dom";
import "react-native-get-random-values";
import { CanvasPanel } from "@/page/App/module/CanvasPanel";
import { useInitBuilderApp } from "@/hooks/useInitApp";
import { WidgetType } from "@codemirror/view";
import { SafeAreaProvider, SafeAreaView } from "react-native-safe-area-context";
import { Unsubscribe } from "redux";
import { startAppListening } from "@/store";
import { setupComponentsListeners } from "@/redux/currentApp/components/componentsListener";
import { setupActionListeners } from "@/redux/currentApp/action/actionListener";
import { setupExecutionListeners } from "@/redux/currentApp/executionTree/executionListener";
import { setupConfigListeners } from "@/redux/config/configListener";
import 'regenerator-runtime/runtime';
import { ImpaktProps } from "@/lib";

const configData = {
  appInfo: {},
  actions: [],
  components: {
    root: {
      h: 0,
      w: 0,
      x: -1,
      y: -1,
      z: 0,
      minH: 0,
      minW: 0,
      mode: "page",
      type: "DOT_PANEL",
      props: {
        pageSortedKey: ["page1"],
        currentPageIndex: 0,
      },
      version: 0,
      showName: "root",
      namePrefix: "",
      parentNode: "",
      displayName: "root",
      childrenNode: ["page1"],
      containerType: "EDITOR_DOT_PANEL",
    },
    page1: {
      h: 0,
      w: 0,
      x: -1,
      y: -1,
      z: 0,
      minH: 0,
      minW: 0,
      type: "PAGE_NODE",
      props: {
        mode: "page",
        layout: "default",
        templateName: "layout2",
      },
      version: 0,
      showName: "page",
      parentNode: "root",
      displayName: "page1",
      childrenNode: ["bodySection1"],
      containerType: "EDITOR_PAGE_SQUARE",
    },
    bodySection1: {
      h: 0,
      w: 0,
      x: -1,
      y: -1,
      z: 0,
      minH: 0,
      minW: 0,
      type: "SECTION_NODE",
      props: {
        style: {
          padding: {
            mode: "all",
            size: "24",
          },
        },
        viewSortedKey: ["bodySection1-bodySectionContainer1"],
        defaultViewKey: "sub-page1",
        currentViewIndex: 0,
        sectionViewConfigs: [
          {
            id: "9ac3c766-3320-4f0f-a119-cd57b621127b",
            key: "sub-page1",
            path: "sub-page1",
            viewDisplayName: "bodySection1-bodySectionContainer1",
          },
        ],
      },
      version: 0,
      showName: "bodySection",
      parentNode: "page1",
      displayName: "bodySection1",
      childrenNode: ["bodySection1-bodySectionContainer1"],
      containerType: "EDITOR_LAYOUT_SQUARE",
    },
    "bodySection1-bodySectionContainer1": {
      h: 0,
      w: 0,
      x: -1,
      y: -1,
      z: 0,
      minH: 0,
      minW: 0,
      type: "CONTAINER_NODE",
      props: {},
      version: 0,
      showName: "bodySection1-bodySectionContainer1",
      parentNode: "bodySection1",
      displayName: "bodySection1-bodySectionContainer1",
      childrenNode: ["LabelNative1", "LabelNative2"],
      containerType: "EDITOR_DOT_PANEL",
    },
    LabelNative1: {
      showName: "LabelNative",
      label: "Raghav11111",
      "type": "LABEL_NATIVE_WIDGET",
      "widgetType": "LABEL_NATIVE_WIDGET",
      displayName: "LabelNative1",
      containerType: "EDITOR_SCALE_SQUARE",
      parentNode: "bodySection1-bodySectionContainer1",
      childrenNode: [],
      props: { label: "RaghavRaghav231434" },
    },
    LabelNative2: {
      showName: "LabelNative",
      label: "Raghav2777",
      "type": "LABEL_NATIVE_WIDGET",
      "widgetType": "LABEL_NATIVE_WIDGET",
      displayName: "LabelNative1",
      containerType: "EDITOR_SCALE_SQUARE",
      parentNode: "bodySection1-bodySectionContainer1",
      childrenNode: [],
      props: { label: "Raghav2" },
    }
  },
  style: {},
  resource: [],
};

export const loginFinal5 = {
  "action": [
    {
      "actionType": "restapi",
      "displayName": "restapi1",
      "resourceID": "f090edd8-9040-4f27-ad80-6a402613b330",
      "actionID": "aa9b9004-3351-458a-9052-2ee48febc2a7",
      "content": {
        "resourceName": "authenticate",
        "urlParams": [],
        "headers": [],
        "cookies": [],
        "authentication": "none",
        "baseUrl": "http://52.183.132.161/walletBackend/auth/authenticate?ruleId=main_rule&groupId=com&artifactId=wallet&version=1.0.0",
        "authContent": {},
        "certs": {
          "caCert": "",
          "clientKey": "",
          "clientCert": "",
          "mode": "verify-full"
        },
        "method": "POST",
        "bodyType": "form-data",
        "body": [
          {
            "key": "message_type",
            "type": "String",
            "value": "Authenticate"
          },
          {
            "key": "pin",
            "type": "Number",
            "value": "{{+InputNativeWidget2.value}}"
          },
          {
            "key": "phone_number",
            "type": "String",
            "value": "{{phone_number.value}}"
          }
        ],
        "successEvent": [
          {
            "actionType": "showNotification",
            "id": "events-cf61f0f2-eb89-4dc9-9d46-82f75f36be45",
            "eventType": "success",
            "title": "api success",
            "notificationType": "success"
          }
        ],
        "$dynamicAttrPaths": [],
        "failedEvent": [
          {
            "actionType": "showNotification",
            "id": "events-8bd249be-f6df-41dd-be31-5db7868a0f11",
            "eventType": "fail",
            "title": "api failed",
            "notificationType": "error"
          }
        ]
      },
      "isVirtualResource": false,
      "transformer": {
        "rawData": "",
        "enable": false
      },
      "triggerMode": "manually",
      "config": {
        "public": false,
        "advancedConfig": {
          "runtime": "none",
          "pages": [],
          "delayWhenLoaded": "",
          "displayLoadingPage": false,
          "isPeriodically": false,
          "periodInterval": ""
        },
        "mockConfig": {
          "enabled": false,
          "enableForReleasedApp": false,
          "mockData": ""
        }
      }
    }
  ],
  "components": {
    "root": {
      "version": 0,
      "displayName": "root",
      "parentNode": "",
      "showName": "root",
      "childrenNode": [
        "page1"
      ],
      "namePrefix": "impakt",
      "type": "DOT_PANEL",
      "containerType": "EDITOR_DOT_PANEL",
      "h": 0,
      "w": 0,
      "minH": 0,
      "minW": 0,
      "x": -1,
      "y": -1,
      "z": 0,
      "props": {
        "currentPageIndex": 0,
        "pageSortedKey": [
          "page1"
        ],
        "$dynamicAttrPaths": []
      }
    },
    "page1": {
      "version": 0,
      "displayName": "page1",
      "parentNode": "root",
      "showName": "page",
      "childrenNode": [
        "bodySection1"
      ],
      "type": "PAGE_NODE",
      "containerType": "EDITOR_PAGE_SQUARE",
      "h": 0,
      "w": 0,
      "minH": 0,
      "minW": 0,
      "x": -1,
      "y": -1,
      "z": 0,
      "props": {
        "layout": "default",
        "mode": "page",
        "templateName": "layout2"
      }
    },
    "bodySection1": {
      "version": 0,
      "displayName": "bodySection1",
      "parentNode": "page1",
      "showName": "bodySection",
      "childrenNode": [
        "bodySection1-bodySectionContainer1"
      ],
      "type": "SECTION_NODE",
      "containerType": "EDITOR_LAYOUT_SQUARE",
      "h": 0,
      "w": 0,
      "minH": 0,
      "minW": 0,
      "x": -1,
      "y": -1,
      "z": 0,
      "props": {
        "currentViewIndex": 0,
        "defaultViewKey": "sub-page1",
        "sectionViewConfigs": [
          {
            "id": "9ac3c766-3320-4f0f-a119-cd57b621127b",
            "key": "sub-page1",
            "path": "sub-page1",
            "viewDisplayName": "bodySection1-bodySectionContainer1"
          }
        ],
        "style": {
          "padding": {
            "mode": "all",
            "size": "24"
          }
        },
        "viewSortedKey": [
          "bodySection1-bodySectionContainer1"
        ]
      }
    },
    "bodySection1-bodySectionContainer1": {
      "h": 0,
      "w": 0,
      "x": -1,
      "y": -1,
      "z": 0,
      "minH": 0,
      "minW": 0,
      "type": "CONTAINER_NODE",
      "props": {},
      "version": 0,
      "showName": "bodySection1-bodySectionContainer1",
      "parentNode": "bodySection1",
      "displayName": "bodySection1-bodySectionContainer1",
      "childrenNode": [
        "NativeContainer1"
      ],
      "containerType": "EDITOR_DOT_PANEL"
    },
    "LabelNative1": {
      "showName": "LabelNative",
      "type": "LABEL_NATIVE_WIDGET",
      "displayName": "LabelNative1",
      "containerType": "EDITOR_SCALE_SQUARE",
      "parentNode": "ViewNative1",
      "childrenNode": [],
      "props": {
        "label": "Welcome Back",
        "size": "displayMedium",
        "align": "left",
        "$dynamicAttrPaths": [
          "label"
        ],
        "trueClasses": [
          {
            "title": "marginLeftExtraLargeMobile",
            "value": "marginLeftExtraLargeMobile"
          }
        ]
      }
    },
    "NativeContainer1": {
      "showName": "NativeContainer",
      "type": "NATIVE_CONTAINER_WIDGET",
      "displayName": "NativeContainer1",
      "containerType": "EDITOR_SCALE_SQUARE",
      "parentNode": "bodySection1-bodySectionContainer1",
      "childrenNode": [
        "ViewNative1",
        "ViewNative2"
      ],
      "props": {
        "direction": "column",
        "justify": "flex-start",
        "align": "stretch",
        "padding": 0,
        "rowGap": 0,
        "columnGap": 0,
        "isEditMode": false,
        "label": "Custom View",
        "$dynamicAttrPaths": []
      }
    },
    "ViewNative1": {
      "showName": "ViewNative",
      "type": "NATIVECANVAS",
      "containerType": "EDITOR_DOT_PANEL",
      "parentNode": "NativeContainer1",
      "childrenNode": [
        "ImageNative1",
        "LabelNative1",
        "LabelNative2",
        "LabelNative3",
        "phone_number",
        "LabelNative4",
        "InputNativeWidget2",
        "LabelNative5"
      ],
      "displayName": "ViewNative1",
      "props": {
        "flex": 3
      },
      "version": 0
    },
    "ViewNative2": {
      "showName": "ViewNative",
      "type": "NATIVECANVAS",
      "containerType": "EDITOR_DOT_PANEL",
      "parentNode": "NativeContainer1",
      "childrenNode": [
        "NativeContainer2",
        "ButtonWidgetNative1"
      ],
      "displayName": "ViewNative2",
      "props": {},
      "version": 0
    },
    "ImageNative1": {
      "showName": "ImageNative",
      "type": "IMAGE_NATIVE_WIDGET",
      "displayName": "ImageNative1",
      "containerType": "EDITOR_SCALE_SQUARE",
      "parentNode": "ViewNative1",
      "childrenNode": [],
      "props": {
        "imageUrl": "https://static-cdn.jtvnw.net/jtv_user_pictures/b4cabdb0-b761-4b6c-a90c-d5a380ecbe40-profile_banner-480.jpeg",
        "classes": [
          {}
        ],
        "$dynamicAttrPaths": [],
        "trueClasses": [
          {
            "title": "heightFixed140Mobile",
            "value": "heightFixed140Mobile"
          },
          {
            "title": "marginAutoMobile",
            "value": "marginAutoMobile"
          },
          {
            "title": "widthFullMobile",
            "value": "widthFullMobile"
          }
        ]
      }
    },
    "LabelNative2": {
      "showName": "LabelNative",
      "type": "LABEL_NATIVE_WIDGET",
      "displayName": "LabelNative2",
      "containerType": "EDITOR_SCALE_SQUARE",
      "parentNode": "ViewNative1",
      "childrenNode": [],
      "props": {
        "label": "Enter your details to get sign into your account.",
        "size": "titleMedium",
        "align": "left",
        "$dynamicAttrPaths": [],
        "trueClasses": [
          {
            "title": "marginLeftExtraLargeMobile",
            "value": "marginLeftExtraLargeMobile"
          }
        ]
      }
    },
    "LabelNative3": {
      "showName": "LabelNative",
      "type": "LABEL_NATIVE_WIDGET",
      "displayName": "LabelNative3",
      "containerType": "EDITOR_SCALE_SQUARE",
      "parentNode": "ViewNative1",
      "childrenNode": [],
      "props": {
        "label": "Enter your phone number",
        "size": "bodyMedium",
        "align": "left",
        "$dynamicAttrPaths": [],
        "trueClasses": [
          {
            "title": "marginLeftExtraLargeMobile",
            "value": "marginLeftExtraLargeMobile"
          },
          {
            "title": "fontBold800",
            "value": "fontBold800"
          },
          {
            "title": "marginTopExtraLargeMobile",
            "value": "marginTopExtraLargeMobile"
          }
        ]
      }
    },
    "LabelNative4": {
      "showName": "LabelNative",
      "type": "LABEL_NATIVE_WIDGET",
      "displayName": "LabelNative4",
      "containerType": "EDITOR_SCALE_SQUARE",
      "parentNode": "ViewNative1",
      "childrenNode": [],
      "props": {
        "label": "Enter your Pin",
        "size": "bodyMedium",
        "align": "left",
        "$dynamicAttrPaths": [],
        "trueClasses": [
          {
            "title": "marginLeftExtraLargeMobile",
            "value": "marginLeftExtraLargeMobile"
          },
          {
            "title": "fontBold800",
            "value": "fontBold800"
          },
          {
            "title": "marginTopExtraLargeMobile",
            "value": "marginTopExtraLargeMobile"
          }
        ]
      }
    },
    "InputNativeWidget2": {
      "showName": "InputNativeWidget",
      "type": "INPUT_NATIVE_WIDGET",
      "displayName": "InputNativeWidget2",
      "containerType": "EDITOR_SCALE_SQUARE",
      "parentNode": "ViewNative1",
      "childrenNode": [],
      "props": {
        "value": "",
        "defaultValue": "",
        "label": "",
        "styles": {},
        "margin": "normal",
        "variant": "outlined",
        "type": "text",
        "color": "success",
        "size": "small",
        "$dynamicAttrPaths": [],
        "trueClasses": [
          {
            "title": "width80PercentageMobile",
            "value": "width80PercentageMobile"
          },
          {
            "title": "marginLeftExtraLargeMobile",
            "value": "marginLeftExtraLargeMobile"
          }
        ]
      }
    },
    "LabelNative5": {
      "showName": "LabelNative",
      "type": "LABEL_NATIVE_WIDGET",
      "displayName": "LabelNative5",
      "containerType": "EDITOR_SCALE_SQUARE",
      "parentNode": "ViewNative1",
      "childrenNode": [],
      "props": {
        "label": "Forgot Pin?",
        "size": "labelSmall",
        "align": "left",
        "$dynamicAttrPaths": [],
        "trueClasses": [
          {
            "title": "marginLeftExtraLargeMobile",
            "value": "marginLeftExtraLargeMobile"
          }
        ],
        "colorScheme": "red"
      }
    },
    "NativeContainer2": {
      "showName": "NativeContainer",
      "type": "NATIVE_CONTAINER_WIDGET",
      "displayName": "NativeContainer2",
      "containerType": "EDITOR_SCALE_SQUARE",
      "parentNode": "ViewNative2",
      "childrenNode": [
        "ViewNative3",
        "ViewNative4"
      ],
      "props": {
        "direction": "row",
        "justify": "flex-start",
        "align": "stretch",
        "padding": 0,
        "rowGap": 0,
        "columnGap": 0,
        "isEditMode": false,
        "label": "Custom View",
        "$dynamicAttrPaths": [],
        "trueClasses": [
          {
            "title": "marginTopExtraLargeMobile",
            "value": "marginTopExtraLargeMobile"
          }
        ]
      }
    },
    "ViewNative3": {
      "showName": "ViewNative",
      "type": "NATIVECANVAS",
      "containerType": "EDITOR_DOT_PANEL",
      "parentNode": "NativeContainer2",
      "childrenNode": [
        "LabelNative6"
      ],
      "displayName": "ViewNative3",
      "props": {},
      "version": 0
    },
    "ViewNative4": {
      "showName": "ViewNative",
      "type": "NATIVECANVAS",
      "containerType": "EDITOR_DOT_PANEL",
      "parentNode": "NativeContainer2",
      "childrenNode": [
        "LabelNative7"
      ],
      "displayName": "ViewNative4",
      "props": {},
      "version": 0
    },
    "LabelNative6": {
      "showName": "LabelNative",
      "type": "LABEL_NATIVE_WIDGET",
      "displayName": "LabelNative6",
      "containerType": "EDITOR_SCALE_SQUARE",
      "parentNode": "ViewNative3",
      "childrenNode": [],
      "props": {
        "label": "Don't have an account",
        "size": "bodyMedium",
        "align": "right",
        "$dynamicAttrPaths": [],
        "trueClasses": [
          {
            "title": "marginTopExtraLargePlusMobile",
            "value": "marginTopExtraLargePlusMobile"
          }
        ]
      }
    },
    "LabelNative7": {
      "showName": "LabelNative",
      "type": "LABEL_NATIVE_WIDGET",
      "displayName": "LabelNative7",
      "containerType": "EDITOR_SCALE_SQUARE",
      "parentNode": "ViewNative4",
      "childrenNode": [],
      "props": {
        "label": "Request New?",
        "size": "bodyMedium",
        "align": "left",
        "$dynamicAttrPaths": [],
        "colorScheme": "red",
        "trueClasses": [
          {
            "title": "marginTopExtraLargePlusMobile",
            "value": "marginTopExtraLargePlusMobile"
          }
        ]
      }
    },
    "ButtonWidgetNative1": {
      "showName": "ButtonWidgetNative",
      "type": "BUTTON_NATIVE_WIDGET",
      "displayName": "ButtonWidgetNative1",
      "containerType": "EDITOR_SCALE_SQUARE",
      "parentNode": "ViewNative2",
      "childrenNode": [],
      "props": {
        "text": "Login",
        "variant": "contained",
        "hidden": false,
        "$dynamicAttrPaths": [

        ],
        "trueClasses": [
          {
            "title": "width90PercentageMobile",
            "value": "width90PercentageMobile"
          },
          {
            "title": "marginAutoMobile",
            "value": "marginAutoMobile"
          },
          {
            "title": "marginBottomExtraLargeMobile",
            "value": "marginBottomExtraLargeMobile"
          }
        ],
        "events": [
          {
            "actionType": "datasource",
            "eventType": "click",
            "queryID": "restapi1"
          }
        ]
      }
    },
    "phone_number": {
      "showName": "InputNativeWidget",
      "type": "INPUT_NATIVE_WIDGET",
      "displayName": "phone_number",
      "containerType": "EDITOR_SCALE_SQUARE",
      "parentNode": "ViewNative1",
      "childrenNode": [],
      "props": {
        "value": "",
        "defaultValue": "",
        "label": "",
        "styles": {},
        "margin": "normal",
        "variant": "outlined",
        "type": "text",
        "color": "success",
        "size": "small",
        "$dynamicAttrPaths": [],
        "trueClasses": [
          {
            "title": "width80PercentageMobile",
            "value": "width80PercentageMobile"
          },
          {
            "title": "marginLeftExtraLargeMobile",
            "value": "marginLeftExtraLargeMobile"
          }
        ]
      }
    }
  },
};

const label = {
  "components": {
    "root": {
      "namePrefix": "",
      "version": 0,
      "displayName": "root",
      "parentNode": "",
      "showName": "root",
      "childrenNode": [
        "page1"
      ],
      "type": "DOT_PANEL",
      "containerType": "EDITOR_DOT_PANEL",
      "h": 0,
      "w": 0,
      "minH": 0,
      "minW": 0,
      "x": -1,
      "y": -1,
      "z": 0,
      "props": {
        "currentPageIndex": 0,
        "pageSortedKey": [
          "page1"
        ]
      },
      "components": {
        "root": {
          "namePrefix": "",
          "version": 0,
          "displayName": "root",
          "parentNode": "",
          "showName": "root",
          "childrenNode": [
            "page1"
          ],
          "type": "DOT_PANEL",
          "containerType": "EDITOR_DOT_PANEL",
          "h": 0,
          "w": 0,
          "minH": 0,
          "minW": 0,
          "x": -1,
          "y": -1,
          "z": 0,
          "props": {
            "currentPageIndex": 0,
            "pageSortedKey": [
              "page1"
            ]
          }
        },
        "page1": {
          "version": 0,
          "displayName": "page1",
          "parentNode": "root",
          "showName": "page",
          "childrenNode": [
            "bodySection1"
          ],
          "type": "PAGE_NODE",
          "containerType": "EDITOR_PAGE_SQUARE",
          "props": {}
        },
        "bodySection1": {
          "version": 0,
          "displayName": "bodySection1",
          "parentNode": "page1",
          "showName": "bodySection",
          "childrenNode": [
            "bodySection1-bodySectionContainer1"
          ],
          "type": "SECTION_NODE",
          "containerType": "EDITOR_LAYOUT_SQUARE",
          "h": 0,
          "w": 0,
          "minH": 0,
          "minW": 0,
          "x": -1,
          "y": -1,
          "z": 0,
          "props": {
            "currentViewIndex": 0,
            "defaultViewKey": "sub-page1",
            "sectionViewConfigs": [
              {
                "id": "9ac3c766-3320-4f0f-a119-cd57b621127b",
                "key": "sub-page1",
                "path": "sub-page1",
                "viewDisplayName": "bodySection1-bodySectionContainer1"
              }
            ],
            "style": {
              "padding": {
                "mode": "all",
                "size": "24"
              }
            },
            "viewSortedKey": [
              "bodySection1-bodySectionContainer1"
            ]
          }
        },
        "bodySection1-bodySectionContainer1": {
          "version": 0,
          "displayName": "bodySection1-bodySectionContainer1",
          "parentNode": "bodySection1",
          "showName": "bodySection1-bodySectionContainer1",
          "childrenNode": [
            "input"
          ],
          "type": "CONTAINER_NODE",
          "containerType": "EDITOR_DOT_PANEL",
          "h": 0,
          "w": 0,
          "minH": 0,
          "minW": 0,
          "x": -1,
          "y": -1,
          "z": 0,
          "props": {}
        },
        "input": {
          "showName": "input",
          "type": "INPUT_WIDGET",
          "displayName": "input1",
          "containerType": "EDITOR_SCALE_SQUARE",
          "parentNode": "bodySection1-bodySectionContainer1",
          "childrenNode": [],
          "props": {
            "value": "",
            "defaultValue": "",
            "label": "input",
            "styles": {},
            "margin": "normal",
            "variant": "outlined",
            "type": "text",
            "color": "success",
            "size": "small",
            "$dynamicAttrPaths": []
          }
        }
      }
    },
    "page1": {
      "version": 0,
      "displayName": "page1",
      "parentNode": "root",
      "showName": "page",
      "childrenNode": [
        "bodySection1"
      ],
      "type": "PAGE_NODE",
      "containerType": "EDITOR_PAGE_SQUARE",
      "props": {}
    },
    "bodySection1": {
      "version": 0,
      "displayName": "bodySection1",
      "parentNode": "page1",
      "showName": "bodySection",
      "childrenNode": [
        "bodySection1-bodySectionContainer1"
      ],
      "type": "SECTION_NODE",
      "containerType": "EDITOR_LAYOUT_SQUARE",
      "h": 0,
      "w": 0,
      "minH": 0,
      "minW": 0,
      "x": -1,
      "y": -1,
      "z": 0,
      "props": {
        "currentViewIndex": 0,
        "defaultViewKey": "sub-page1",
        "sectionViewConfigs": [
          {
            "id": "9ac3c766-3320-4f0f-a119-cd57b621127b",
            "key": "sub-page1",
            "path": "sub-page1",
            "viewDisplayName": "bodySection1-bodySectionContainer1"
          }
        ],
        "style": {
          "padding": {
            "mode": "all",
            "size": "24"
          }
        },
        "viewSortedKey": [
          "bodySection1-bodySectionContainer1"
        ]
      }
    },
    "bodySection1-bodySectionContainer1": {
      "version": 0,
      "displayName": "bodySection1-bodySectionContainer1",
      "parentNode": "bodySection1",
      "showName": "bodySection1-bodySectionContainer1",
      "childrenNode": [
        "LabelNative1"
      ],
      "type": "CONTAINER_NODE",
      "containerType": "EDITOR_DOT_PANEL",
      "h": 0,
      "w": 0,
      "minH": 0,
      "minW": 0,
      "x": -1,
      "y": -1,
      "z": 0,
      "props": {}
    },
    "LabelNative1": {
      "showName": "LabelNative",
      "type": "LABEL_NATIVE_WIDGET",
      "displayName": "LabelNative1",
      "containerType": "EDITOR_SCALE_SQUARE",
      "parentNode": "bodySection1-bodySectionContainer1",
      "childrenNode": [],
      "props": {
        "label": "hello world",
        "size": "headlineSmall",
        "align": "left",
        "$dynamicAttrPaths": [],
        "colorScheme": "orange"
      }
    }
  }
}



const mobileConfig: ImpaktProps = {
  model: loginFinal5,
  getResource: async () => ({
    baseUrl: "http://localhost:8081/api/execution/execute",
    urlParams: [
      {
        key: "groupId",
        value: "com",
      },
      {
        key: "artifactId",
        value: "test_demo",
      },
      {
        key: "version",
        value: "0.0.2",
      },
    ],
    body: {},
  }),
  getRules: async () => [

  ],
  getPages: async () => [
    { $refText: "login", $ref: "login" },
    { $refText: "userInfoSave", $ref: "login" },
    { $refText: "initialUserRegister", $ref: "login" },
    { $refText: "otpVerification", $ref: "login" },
    { $refText: "userPinSet", $ref: "login" },
    { $refText: "created", $ref: "login" },
    { $refText: "walletMainPage", $ref: "login" },
    { $refText: "transSuccessWallet", $ref: "login" },
    { $refText: "sendMoney", $ref: "login" },
    { $refText: "addMoney", $ref: "login" },
    { $refText: "transfailed", $ref: "login" },
    { $refText: "moneySentSuccess", $ref: "login" },
    { $refText: "walletPin", $ref: "login" },
    { $refText: "addMoneyCreditCard", $ref: "login" },
    { $refText: "cardTransOTP", $ref: "login" },
    { $refText: "moneySentSuccessFinal", $ref: "login" }
  ],
  onModelUpdatefunction: (model: any): void => {
    // setModel1(model);
  },
  onModelSave: async function (): Promise<void> {
  },
  getStyles: async (): Promise<any> => {
    return {
      classes: {}
    };
  },
  mode: "edit",
  onModelUpdate: function (model: any): void {
    throw new Error("Function not implemented.");
  },
  setStyles: function (style: any): void {
    throw new Error("Function not implemented.");
  }
}



const App = () => {
  useEffect(() => {
    const subscriptions: Unsubscribe[] = [
      setupComponentsListeners(startAppListening),
      setupActionListeners(startAppListening),
      setupConfigListeners(startAppListening),
      setupExecutionListeners(startAppListening),
    ];
    return () => subscriptions.forEach((unsubscribe) => unsubscribe());
  }, []);
  // useEffect(() => {
  //   const run = async () => {
  //     try {
  //       const fileUri = FileSystem.documentDirectory + 'userCode.js';

  //       // const code = `return 5 + 5;`;
  //     //   const code = `
  //     //   const a = 10;
  //     //   const b = 20;
  //     //   const multiply = (x, y) => x * y;
  //     //   console.log("resilt");
  //     //   return multiply(a, b) + Math.pow(a, 2);
  
  //     // `;
  //     const code = `
  //       let total = 0;
  //       for (let i = 1; i <= 5; i++) {
  //         total += i * 2;
  //       }
  //       return total;
  //     `;
  //       await FileSystem.writeAsStringAsync(fileUri, code);
  //       console.log('Code saved at:', fileUri);

  //       const readCode = await FileSystem.readAsStringAsync(fileUri);
  //       console.log('Read code from file:', readCode);

  //       const result = new Function(readCode)();
  //       console.log('Executed result:', result);
  //     } catch (error) {
  //       console.error('Error in file handling:', error);
  //     }
  //   };

  //   run();
  // }, []);
  const { loadingState } = useInitBuilderApp("edit", mobileConfig);
  const styles = StyleSheet.create({
    container: {
      backgroundColor: '#4c69a5',
      flex: 1,
      alignItems: 'center',
      justifyContent: 'center',
    },

  });
  return (
    <SafeAreaProvider>
      <SafeAreaView
        style={{ flex: 1 }}
      >
        <KeyboardAvoidingView
          behavior={Platform.OS === 'ios' ? 'padding' : 'height'}
          style={{ flex: 1 }}
        // behavior="padding"
        >
          {/* <ScrollView
          style={{flex: 1}}
          // contentContainerStyle={styles.contentContainer} // (Optional) Aligns content
        > */}


          {loadingState ? (
            <Text>Loading</Text>
          ) : (
            <DndProvider backend={HTML5Backend}>
              <ConfigProvider locale={enUS}>

                {/* <KeyboardAwareScrollView
                style={{ backgroundColor: '#4c69a5' }}
                resetScrollToCoords={{ x: 0, y: 0 }}
                // contentContainerStyle={styles.container}
                scrollEnabled={false}
                contentContainerStyle={styles.container}
              > */}
                <CanvasPanel />
                {/* </KeyboardAwareScrollView> */}
              </ConfigProvider>
            </DndProvider>

          )}


          {/* </ScrollView> */}
        </KeyboardAvoidingView>
      </SafeAreaView>
    </SafeAreaProvider>
  );
};

export default App;
