import React, { memo, useContext } from 'react';
import {
 RadioGroup,
 FormControl,
 FormLabel,
 Radio,
 FormControlLabel,
 Box,
 Tooltip,
} from '@mui/material';
import { DataContext } from '../context/Context';
import ComponentWrapper from '../common/ComponentWrapper';
import { getFieldName } from '../permissions/getFieldName';
import { radioInputProps } from '../interface/inputfieldProps';
import Helpertext from '../common/Helpertext';
import { getComponentProps } from '../common/getComponentProps';
import { useJsonForms } from '@jsonforms/react';

const ImpaktAppsRadio = memo(function CustomRadio(props: radioInputProps) {
 const {
  required,
  errors,
  data,
  uischema,
  handleChange,
  path,
  schema,
  rootSchema,
 } = props;
 const uischemaData = uischema?.config?.main;
 const { pageName, permissions, theme, serviceProvider } =
  useContext(DataContext);
 const fieldName = getFieldName(path);
 const onChange = (_ev: any, value: any) =>
  handleChange(path, value?.const ?? value);
 const ctx = useJsonForms();
 const dynamicStyle = React.useMemo(() => {
  return serviceProvider(
   ctx,
   {
    onClick: uischema.config?.main?.styleFunction || 'getStyle',
   },
   {
    event: { _reactName: 'onClick' },
    path,
   },
  );
 }, [data, path]);
 const componentStyle = { ...uischema.config?.style, ...dynamicStyle };
 return (
  <ComponentWrapper
   {...getComponentProps(
    `${pageName}:${fieldName}`,
    permissions,
    schema,
    rootSchema,
   )}
  >
   <Tooltip
    title={uischemaData?.toolTip || ''}
    placement={uischemaData?.toolTipPosition || 'top'}
    arrow
   >
    <FormControl
     sx={componentStyle.RadioContainerStyle }
     fullWidth={true}
     component={'div'}
     variant='outlined'
    >
     <Box
      component='fieldset'
      sx={{
       border:
        errors.length >= 1
         ? `1.5px solid ${theme.myTheme.palette.error.main}`
         : data !== undefined
           ? `1.5px solid ${theme.myTheme.palette.primary.main}`
           : `1.5px solid ${theme.myTheme.palette.text.disabled}`,
       flexDirection: 'row',
       display: 'flex',
       minWidth: 0,

       ...theme.RadioStyle,
       ...componentStyle.RadioFieldsetStyle,
       marginTop: '-8px',
      }}
     >
      <Box
       component={'legend'}
       sx={{
        display: 'block',
        fontSize: componentStyle.fontSize ?? '12px',
        padding: '0px 4px',
        overflow: 'hidden',
        ...componentStyle.RadioLegendStyle,
       }}
      >
       {uischemaData?.label}
       {required ? (
        <sup style={{ ...componentStyle.asteriskStyle }}>*</sup>
       ) : (
        ''
       )}
      </Box>

      <RadioGroup
       sx={{
        paddingLeft: '10px',
        flexGrow: 1,
        flexShrink: 0,
        marginTop: '-8px',
        marginLeft: '-4px',
        ...componentStyle.RadioGroupStyle,
       }}
       row
       value={data?.const ?? data ?? ''}
       defaultValue={data?.const ?? data}
       defaultChecked={data?.const ?? data}
       aria-labelledby='demo-row-radio-buttons-group-label'
       onChange={(event, value) => {
        onChange(event, value);
       }}
      >
       {uischemaData?.options?.map((elem: any, i: number) => (
        <FormControlLabel
         sx={{
          margin: '0',
         }}
         value={elem?.const ?? elem}
         control={
          <Radio
           size={uischemaData?.size || 'small'}
           sx={{
            margin: '1px auto',
            padding: '0.7px 2px',
            '&.Mui-checked': {
             color: theme.myTheme.palette.primary.main,
            },
            '& label': {
             color: theme.myTheme.palette.text.primary,
            },
            ...componentStyle.RadioStyle,
           }}
           value={elem?.const ?? elem}
           disabled={uischemaData?.disabled}
          />
         }
         label={elem?.label ?? elem}
        />
       ))}
      </RadioGroup>
     </Box>
     <Helpertext uischema={uischema} errors={errors} />
    </FormControl>
   </Tooltip>
  </ComponentWrapper>
 );
});
export default ImpaktAppsRadio;