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 { DateTimePicker } from '@mui/x-date-pickers/DateTimePicker';
import dayjs from 'dayjs';
import ComponentWrapper from '../common/ComponentWrapper';
import { DataContext } from '../context/Context';
import { getFieldName } from '../permissions/getFieldName';
import { inputProps } from '../interface/inputfieldProps';
import { getComponentProps } from '../common/getComponentProps';
import Helpertext from '../common/Helpertext';
import timezone from 'dayjs/plugin/timezone';
import utc from 'dayjs/plugin/utc';
import customParseFormatPlugin from 'dayjs/plugin/customParseFormat';
import React from 'react';
import { useJsonForms } from '@jsonforms/react';

dayjs.extend(customParseFormatPlugin);
dayjs.extend(timezone);
dayjs.extend(utc);
const DateAndTime = function (props: inputProps) {
 const {
  data,
  handleChange,
  uischema,
  path,
  schema,
  required,
  rootSchema,
  errors,
 } = props;
 const uischemaData: any = uischema?.config?.main;

 const {
  dateTimeFormat,
  theme,
  permissions,
  pageName,
  serverDateTimeFormat,
  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 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}>
      <DateTimePicker
       label={uischemaData?.label}
       className={style.dateStyle}
       format={dateTimeFormat}
       value={data ? dayjs(data, serverDateTimeFormat) : null}
       disabled={
        getComponentProps(
         `${pageName}:${fieldName}`,
         permissions,
         schema,
         rootSchema,
        ).disabled || uischemaData?.disabled
       }
       onChange={(newValue) => {
        newValue.toJSON = function () {
         return this.format(serverDateTimeFormat);
        };
        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,
         variant: uischemaData?.variant || 'outlined',
         slotProps: {
          inputLabel: {
           sx: {
            ...componentStyle?.inputLabelStyle,
           },
          },
         },
        },
        field: { clearable: true },
       }}
      />
     </LocalizationProvider>
     <Helpertext uischema={uischema} errors={errors} />
    </FormControl>
   </Tooltip>
  </ComponentWrapper>
 );
};

export default DateAndTime;