import React, { memo, useState } from "react";
import Button from "@mui/material/Button";
import { useContext } from "react";
import { DataContext } from "../context/Context";
import { ButtonIcon } from "../common/ButtonIcon";
import { JsonFormsDispatch, useJsonForms, withJsonFormsControlProps } from "@jsonforms/react";
import { Box, Breadcrumbs, CircularProgress, Dialog, DialogContent, DialogContentText, Link, Stack, Tooltip } from "@mui/material";
import ComponentWrapper from "../common/ComponentWrapper";
import { getFieldName } from "../permissions/getFieldName";
import { green } from "@mui/material/colors";
import { inputProps } from "../interface/inputfieldProps";
import LoaderInfo from "../common/LoaderInfo";
import { getComponentProps } from "../common/getComponentProps";
import _ from "lodash";
const Breadcrumb = memo(function ({
  uischema,
  path,
  data,
  schema,
  rootSchema,
}: any) {
  
  const uischemaData = uischema?.config?.main;
  const { serviceProvider, pageName, permissions, theme, updateDialog, setLoading, renderers} =
    useContext(DataContext);
  const ctx = useJsonForms();
  const fieldName = getFieldName(path);

  const popupUiSchema = 
    {
      type: "Control",
      scope: `${path}popup`,
      options: {
        widget: "PopUp"
      },
      config: {
        layout: {
          xs: 12,
          sm: 12,
          md: 12,
          lg: 12,
        },
        main: {
          title: "Page Change Alert"
        },
        style: {
        }
      },
      elements:
        [
          {
            type: "Control",
            scope: "#/properties/popText",
            options: {
              widget: "Box",
            },
            config: {
              layout: 11,
              main: {
                heading: "Are you sure you want to leave this page? Unsaved changes may be lost.",
              },
              style:{
                "&.MuiTypography-root": {
                  padding: "0px 20px",
                  textAlign: "center",
                  lineHeight: "1.2",
                  fontWeight: "normal",
                  fontSize: "18px",
                  marginBottom: theme.myTheme.spacing(5)
                }
              }
            },
          },
          {
            type: "WrapperLayout",
            config: {
              layout: 11,
              main: {}
            },
            elements: [
              {
                type: "Control",
                scope: `#/properties/${path}popupCancelButton`,
                options: {
                  widget: "Button",
                },
                config: {
                  layout: 6,
                  main: {
                    name: "No",
                    variant: "contained",
                    type: "text",
                    onClick: uischemaData?.onNavigatePopupNo || undefined,
                    size: "large",
                  },
                  style: {
                    position: "absolute",
                    padding: "8px 0px",
                    fontSize: "16px",
                    bottom: 0,
                    left: 0,
                    width: "50%",
                    borderRadius: 0,
                    boxShadow: 0,
                    backgroundColor: "transparent",
                    color: theme.myTheme.palette.primary.main,
                    borderTop: `0.5px solid ${theme.myTheme.palette.grey[600]}`,
                    borderRight: `0.5px solid ${theme.myTheme.palette.grey[600]}`,
                    "&:hover": {
                      color: theme.myTheme.palette.primary.contrastText,
                      backgroundColor: theme.myTheme.palette.primary.main,
                      boxShadow: "none"
                    }
                  }
                },
              },
              {
                type: "Control",
                scope: `#/properties/${path}popupConfirmButton`,
                options: {
                  widget: "Button",
                },
                config: {
                  layout: 6,
                  main: {
                    name: "Yes",
                    variant: "contained",
                    color: "error",
                    type: "text",
                    onClick: uischemaData?.onNavigatePopupYes || undefined,
                    size: "large",
                  },
                  style: {
                    position: "absolute",
                    padding: "8px 0px",
                    fontSize: "16px",
                    bottom: 0,
                    right: 0,
                    width: "50%",
                    borderRadius: 0,
                    boxShadow: 0,
                    backgroundColor: "transparent",
                    color: theme.myTheme.palette.error.main,
                    borderTop: `0.5px solid ${theme.myTheme.palette.grey[600]}`,
                    "&:hover": {
                      color: theme.myTheme.palette.error.contrastText,
                      backgroundColor: theme.myTheme.palette.error.main,
                      boxShadow: "none"
                    }
                  }
                },
              },
            ]
          },
        ]
    };

  

  const callServiceProvider = (event: any) => {
   serviceProvider(ctx, uischemaData, {
    event,
    path,
    ...uischemaData.additionalData,
    setLoading,
  });
  };
  return (
    <>
      <ComponentWrapper
        {...getComponentProps(
          `${pageName}:${fieldName}`,
          permissions,
          schema,
          rootSchema
        )}
      >
        <Breadcrumbs
        separator={uischemaData?.seperator || ">"}
        aria-label="breadcrumb"
        sx={{
          width: "100%",
          ...uischema?.config?.style,
        }}
      >
        {schema?.path?.map((pathObj, i)=>
          (<Link key={`link${i}`} underline="none"
            onClick={()=>{updateDialog(`${path}popup`); sessionStorage.setItem("pendingNavigatePath", pathObj.path)}}
            sx={{
              color: theme.myTheme.palette.grey[700],
              cursor: "pointer",
              "&:hover": {
                color: theme.myTheme.palette.primary.main
              },
              ...uischema?.config?.style?.linkStyle}}>
            {pathObj.label}
        </Link>)
        )}
      </Breadcrumbs>
      
            <JsonFormsDispatch
            schema={{}}
            uischema={popupUiSchema}
            path={path+"popup"}
            key={path + "popup"}
            renderers={renderers}
            />
      </ComponentWrapper>
     
    </>
  );
});

export default withJsonFormsControlProps(Breadcrumb)