import { memo, useContext } from 'react';
import {
 FormControl,
 FormHelperText,
 Stack,
 TextField,
 Tooltip,
} from '@mui/material';
import { LocalizationProvider } from '@mui/x-date-pickers/LocalizationProvider';
import { AdapterDayjs } from '@mui/x-date-pickers/AdapterDayjs';
import { DatePicker } from '@mui/x-date-pickers';
import dayjs from 'dayjs';
import ComponentWrapper from '../common/ComponentWrapper';
import { DataContext } from '../context/Context';
import { getFieldName } from '../permissions/getFieldName';
import { useJsonForms } from '@jsonforms/react';
import { inputProps } from '../interface/inputfieldProps';
import { getComponentProps } from '../common/getComponentProps';
import Helpertext from '../common/Helpertext';
import React from 'react';

const Date = memo(function (props: inputProps) {
 const {
  data,
  handleChange,
  uischema,
  path,
  schema,
  required,
  rootSchema,
  errors,
 } = props;
 const uischemaData: any = uischema?.config?.main;
 const {
  dateFormat,
  serviceProvider,
  permissions,
  theme,
  pageName,
  serverDateTimeFormat,
 } = 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 style = theme.useStyles();
 const fieldName = getFieldName(path);
 return (
  <ComponentWrapper
   {...getComponentProps(
    `${pageName}:${fieldName}`,
    permissions,
    schema,
    rootSchema,
   )}
  >
   <Tooltip
    title={uischemaData?.toolTip || ''}
    placement={uischemaData?.toolTipPosition || 'top'}
    arrow
   >
    <FormControl fullWidth={true} variant='outlined'>
     <LocalizationProvider dateAdapter={AdapterDayjs}>
      <DatePicker
       label={uischemaData?.label}
       className={style.dateStyle}
       value={data ? dayjs(data, serverDateTimeFormat) : undefined}
       format={dateFormat}
       disabled={
        getComponentProps(
         `${pageName}:${fieldName}`,
         permissions,
         schema,
         rootSchema,
        ).disabled
       }
       onChange={(newValue) => {
        if (!newValue) {
         handleChange(path, undefined);
        } else {
         newValue.toJSON = function () {
          return this.format(
           serverDateTimeFormat || 'YYYY-MM-DDTHH:mm:ss.SSSZ',
          );
         };
         handleChange(path, newValue);
        }
       }}
       sx={{
        ...theme.DateStyleLocal,
        ...uischema?.config?.dateStyleLocal,
        ...componentStyle.dateStyleLocal,
        color: theme.myTheme.palette.error.main,
        ...componentStyle,
       }}
       orientation='portrait'
       views={uischemaData?.views}
       slotProps={{
        textField: {
         required: required,
         error: errors !== '' ? true : false,
         variant: uischemaData?.variant || 'outlined',
         slotProps: {
          inputLabel: {
           sx: {
            ...componentStyle.inputLabelStyle,
           },
          },
         },
        },

        field: { clearable: true },
       }}
      />
     </LocalizationProvider>
     <Helpertext uischema={uischema} errors={errors} />
    </FormControl>
   </Tooltip>
  </ComponentWrapper>
 );
});

export default Date;