import { memo, useContext, useState } from 'react';
import { IconButton, InputAdornment, TextField, Tooltip } from '@mui/material';
import { DataContext } from '../context/Context';
import ComponentWrapper from '../common/ComponentWrapper';
import { getFieldName } from '../permissions/getFieldName';
import { inputProps } from '../interface/inputfieldProps';
import { useDebouncedChange } from '@jsonforms/material-renderers';
import { Visibility, VisibilityOff } from '@mui/icons-material';
import { getComponentProps } from '../common/getComponentProps';
import { ButtonIcon } from '../common/ButtonIcon';
import { useJsonForms } from '@jsonforms/react';
import React from 'react';
const Password = memo(function (props: inputProps) {
 const {
  data,
  required,
  errors,
  schema,
  rootSchema,
  uischema,
  path,
  handleChange,
 } = props;
 const uischemaData = uischema?.config?.main;
 const { pageName, permissions, theme, serviceProvider } =
  useContext(DataContext);
 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 };
 const fieldName = getFieldName(path);
 const [showPassword, setShowPassword] = useState(false);
 const eventToValue = (ev: any) =>
  ev.target.value === '' ? undefined : ev.target.value;
 const [inputText, onChange] = useDebouncedChange(
  handleChange,
  '',
  data,
  path,
  eventToValue,
 );
 return (
  <ComponentWrapper
   {...getComponentProps(
    `${pageName}:${fieldName}`,
    permissions,
    schema,
    rootSchema,
   )}
  >
   <TextField
    id={uischemaData?.id}
    name={uischemaData.name}
    autoComplete={uischemaData.autoComplete}
    required={required}
    autoFocus={uischemaData?.autoFocus}
    fullWidth
    placeholder={uischemaData.placeholder}
    sx={{
     ...theme.InputFieldStyle,
     ...componentStyle,
     '& ::-ms-reveal': {
      display: 'none',
     },
    }}
    value={inputText}
    onChange={(event) => {
     onChange(event);
    }}
    label={uischemaData?.label}
    size={uischemaData?.size || 'medium'}
    type={showPassword ? 'text' : 'password'}
    variant={uischemaData?.variant}
    helperText={
     errors !== ''
      ? errors.includes('pattern')
        ? uischemaData?.errorMessage
        : errors || '\u00A0'
      : uischemaData?.helperText || '\u00A0'
    }
    error={errors !== '' ? true : false}
    slotProps={{
     input: {
      startAdornment: (
       <InputAdornment position='start'>
        {uischemaData?.startIcon ? (
         ButtonIcon(uischemaData?.startIcon, uischemaData)
        ) : (
         <></>
        )}
       </InputAdornment>
      ),
      endAdornment: (
       <InputAdornment position='end'>
        <Tooltip title={showPassword ? 'Hide Password' : 'Show Password'}>
         <IconButton onClick={() => setShowPassword((pre) => !pre)}>
          {showPassword ? <Visibility /> : <VisibilityOff />}
         </IconButton>
        </Tooltip>
       </InputAdornment>
      ),
     },
    }}
   />
  </ComponentWrapper>
 );
});

export default Password;