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 { useJsonForms } from '@jsonforms/react';
import {
 Box,
 CircularProgress,
 Dialog,
 DialogContent,
 DialogContentText,
 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';
export const ImpaktAppsButton = memo(function ({
 uischema,
 path,
 data,
 schema,
 rootSchema,
}: inputProps) {
 const uischemaData = uischema?.config?.main;
 const {
  serviceProvider,
  pageName,
  permissions,
  theme,
  additionalIcons,
  loading,
  setLoading,
 } = useContext(DataContext);
 const ctx = useJsonForms();
 const dynamicStyle = React.useMemo(() => {
  return serviceProvider(
   ctx,
   {
    onClick: uischema.config?.main?.styleFunction || 'getStyle',
   },
   {
    
    event: { _reactName: 'onClick' },
    path,
    ...uischemaData.additionalData,
   },
  );
 }, [data, path]);
 const componentStyle = { ...uischema.config?.style,
   ...dynamicStyle };
 const fieldName = getFieldName(path);
 const callServiceProvider = (event: any) => {
  serviceProvider(ctx, uischemaData, {
   event,
   path,
   ...uischemaData.additionalData,
   setLoading,
  });
 };
 return (
  <>
   <ComponentWrapper
    {...getComponentProps(
     `${pageName}:${fieldName}`,
     permissions,
     schema,
     rootSchema,
    )}
   >
    <Button
     fullWidth={true}
     endIcon={
      uischemaData?.endIcon
       ? ButtonIcon(uischemaData?.endIcon, uischemaData, additionalIcons)
       : false
     }
     title={uischemaData?.tooltipMessage}
     startIcon={
      uischemaData?.startIcon
       ? ButtonIcon(uischemaData?.startIcon, uischemaData, additionalIcons)
       : false
     }
     color={uischemaData?.color}
     sx={{
      fontWeight: 'bold',
      ...theme.Buttonstyle,
      ...componentStyle,
     }}
     variant={uischemaData?.variant || 'contained'}
     size={uischemaData?.size || 'medium'}
     disabled={loading || uischemaData?.disabled}
     onKeyDown={(e) => callServiceProvider(e)}
     onClick={(e) => callServiceProvider(e)}
     onPointerEnter={(event) => callServiceProvider(event)}
     onPointerLeave={(event) => callServiceProvider(event)}
     onFocus={(event) => callServiceProvider(event)}
     onBlur={(event) => callServiceProvider(event)}
     onMouseEnter={(event) => callServiceProvider(event)}
    >
     {data ? data : uischemaData?.name}
    </Button>
   </ComponentWrapper>
  </>
 );
});