sozsoft-platform/ui/src/views/list/SchedulerView.tsx

import Container from '@/components/shared/Container'
import '@/utils/registerDevExtremeEditors'
import { APP_NAME, AVATAR_URL, DX_CLASSNAMES } from '@/constants/app.constant'
import {
  ColumnFormatDto,
  DbTypeEnum,
  FieldCustomValueTypeEnum,
  GridDto,
} from '@/proxy/form/models'
import { useLocalization } from '@/utils/hooks/useLocalization'
import Scheduler, {
  Editing,
  Item,
  Resource,
  type SchedulerRef,
  Toolbar,
  View,
} from 'devextreme-react/scheduler'
import { useCallback, useEffect, useMemo, useRef, useState } from 'react'
import { Helmet } from 'react-helmet'
import { getNextSequenceValue } from '@/services/form.service'
import { useListFormCustomDataSource } from './useListFormCustomDataSource'
import { autoNumber, getEditingFormGroups } from './Utils'
import { layoutTypes } from '../admin/listForm/edit/types'
import WidgetGroup from '@/components/ui/Widget/WidgetGroup'
import { ROUTES_ENUM } from '@/routes/route.constant'
import { usePWA } from '@/utils/hooks/usePWA'
import CustomStore from 'devextreme/data/custom_store'
import { Loading } from '@/components/shared'
import { usePermission } from '@/utils/hooks/usePermission'
import { SimpleItemWithColData } from '../form/types'
import { captionize } from 'devextreme/core/utils/inflector'
import { formatDate } from 'devextreme/localization'
import type { AppointmentFormOpeningEvent } from 'devextreme/ui/scheduler'
import type { ValidationRule } from 'devextreme/common'
import { FaAlignLeft, FaClock, FaHeading } from 'react-icons/fa'
import { Avatar } from '@/components/ui'
import { getUsers } from '@/services/identity.service'
import { useListFormColumns } from './useListFormColumns'
import {
  getEditPopupHeight,
  getEditPopupMaxHeight,
  getMobilePopupPosition,
  shouldUseMobileEditPopup,
} from './shared/editPopup'
import { getValueByField, resolveEditorType } from './shared/editingForm'
import { flattenGridColumns } from './shared/columns'
import {
  useListFormCustomSources,
  useListFormGridDto,
  useWidgetGroupHeight,
} from './shared/hooks'

interface SchedulerViewProps {
  listFormCode: string
  searchParams?: URLSearchParams
  isSubForm?: boolean
  level?: number
  refreshData?: () => Promise<void>
  gridDto?: GridDto
}

const SchedulerView = (props: SchedulerViewProps) => {
  const { listFormCode, searchParams, isSubForm, level, gridDto: extGridDto } = props
  const { translate } = useLocalization()
  const isPwaMode = usePWA()
  const useMobileEditPopup = shouldUseMobileEditPopup()
  const schedulerRef = useRef<SchedulerRef>()
  const widgetGroupRef = useRef<HTMLDivElement>(null)
  const { checkPermission } = usePermission()

  const [schedulerDataSource, setSchedulerDataSource] = useState<CustomStore<any, any>>()
  const gridDto = useListFormGridDto(listFormCode, extGridDto)
  const [currentView, setCurrentView] = useState<string>('week')
  const [isPopupFullScreen, setIsPopupFullScreen] = useState(false)
  const [userAvatarUrls, setUserAvatarUrls] = useState<Record<string, string>>({})
  const layout = layoutTypes.scheduler || 'scheduler'

  const widgetGroupHeight = useWidgetGroupHeight(widgetGroupRef, gridDto?.widgets)
  useListFormCustomSources(gridDto)

  useEffect(() => {
    let cancelled = false

    getUsers(0, 1000)
      .then((response) => {
        if (cancelled) {
          return
        }

        const avatarUrls = (response.data?.items ?? []).reduce<Record<string, string>>(
          (result, user) => {
            if (user.userName) {
              result[user.userName.toLowerCase()] = AVATAR_URL(user.id, user.tenantId)
            }

            return result
          },
          {},
        )

        setUserAvatarUrls(avatarUrls)
      })
      .catch((error) => console.error('Scheduler user avatars load error:', error))

    return () => {
      cancelled = true
    }
  }, [])

  useEffect(() => {
    setCurrentView(gridDto?.gridOptions.schedulerOptionDto?.defaultView || 'week')
  }, [gridDto])

  // listFormCode değişiminde eski veri kaynağını temizle.
  useEffect(() => {
    schedulerRef.current?.instance()?.option('dataSource', undefined)
  }, [listFormCode])

  const { createSelectDataSource } = useListFormCustomDataSource({ gridRef: schedulerRef })
  const { getBandedColumns } = useListFormColumns({
    gridDto,
    listFormCode,
    isSubForm,
    gridRef: schedulerRef,
  })
  const listFormColumns = useMemo(() => flattenGridColumns(getBandedColumns()), [getBandedColumns])

  useEffect(() => {
    if (!gridDto) return

    const dataSource = createSelectDataSource(
      gridDto.gridOptions,
      listFormCode,
      searchParams,
      layout,
      undefined,
    )

    setSchedulerDataSource(dataSource)
  }, [gridDto, searchParams, createSelectDataSource])

  const settingButtonClick = useCallback(() => {
    window.open(
      ROUTES_ENUM.protected.saas.listFormManagement.edit.replace(':listFormCode', listFormCode),
      isPwaMode ? '_self' : '_blank',
    )
  }, [listFormCode, isPwaMode])

  const handleRefresh = useCallback(() => {
    const instance = schedulerRef.current?.instance()
    if (instance) {
      const dataSource = instance.getDataSource()
      if (dataSource) {
        dataSource.reload()
      }
    }
  }, [])

  const onCurrentViewChange = useCallback((value: string) => {
    setCurrentView(value)
  }, [])

  const getAppointmentHtml = useCallback(
    (appointmentData: Record<string, any>) => {
      const textExpr = gridDto?.gridOptions.schedulerOptionDto?.textExpr || 'text'
      return String(appointmentData?.[textExpr] ?? '')
    },
    [gridDto],
  )

  const getAppointmentTimeText = useCallback(
    (appointmentData: Record<string, any>) => {
      const schedulerOptions = gridDto?.gridOptions.schedulerOptionDto
      const startDate = appointmentData?.[schedulerOptions?.startDateExpr || 'startDate']
      const endDate = appointmentData?.[schedulerOptions?.endDateExpr || 'endDate']

      if (!startDate || !endDate) {
        return ''
      }

      return `${formatDate(new Date(startDate), 'shortTime')} - ${formatDate(
        new Date(endDate),
        'shortTime',
      )}`
    },
    [gridDto],
  )

  const getAppointmentPreviewDetails = useCallback(
    (appointmentData: Record<string, any>) => {
      const schedulerOptions = gridDto?.gridOptions.schedulerOptionDto
      const userNameField =
        schedulerOptions?.userNameExpr ??
        gridDto?.columnFormats?.find((column) => column.fieldName?.toLowerCase() === 'username')
          ?.fieldName
      const descriptionField =
        schedulerOptions?.descriptionExpr ??
        gridDto?.columnFormats?.find((column) => column.fieldName?.toLowerCase() === 'description')
          ?.fieldName
      const userName = getValueByField(appointmentData, userNameField)
      const description = getValueByField(appointmentData, descriptionField)

      if (
        (userName === null || userName === undefined) &&
        (description === null || description === undefined)
      ) {
        return undefined
      }

      return {
        userName: userName === null || userName === undefined ? undefined : String(userName),
        avatarUrl:
          userName === null || userName === undefined
            ? undefined
            : userAvatarUrls[String(userName).toLowerCase()],
        description:
          description === null || description === undefined ? undefined : String(description),
      }
    },
    [gridDto, userAvatarUrls],
  )

  const renderAppointment = useCallback(
    (data: any) => {
      const appointmentData = data.targetedAppointmentData || data.appointmentData || {}
      const previewDetails = getAppointmentPreviewDetails(appointmentData)

      return (
        <div className="flex h-full min-w-0 flex-col gap-1 overflow-hidden p-1">
          {previewDetails?.userName && (
            <div
              className="flex min-w-0 items-center gap-1 self-start rounded-full bg-black/20 px-2 py-0.5 text-[10px] font-semibold"
              title={`User Name: ${previewDetails.userName}`}
            >
              <Avatar
                alt={previewDetails.userName}
                className="shrink-0"
                shape="circle"
                size={18}
                src={previewDetails.avatarUrl ?? '/img/others/default-profile.png'}
              />
              <span className="truncate">{previewDetails.userName}</span>
            </div>
          )}

          <div className="min-w-0">
            <div className="flex items-center gap-1 text-[9px] font-semibold uppercase opacity-70">
              <FaHeading className="shrink-0" />
              <span>{translate('::App.Listform.ListformField.Text')}</span>
            </div>
            <div
              className="dx-scheduler-appointment-title scheduler-appointment-text line-clamp-2 whitespace-normal font-semibold leading-tight"
              dangerouslySetInnerHTML={{ __html: getAppointmentHtml(appointmentData) }}
            />
          </div>

          {previewDetails?.description && (
            <div className="min-w-0">
              <div className="flex items-center gap-1 text-[9px] font-semibold uppercase opacity-70">
                <FaAlignLeft className="shrink-0" />
                <span>{translate('::App.Platform.Description')}</span>
              </div>
              <div
                className="line-clamp-2 whitespace-normal text-[11px] leading-tight"
                title={previewDetails.description}
              >
                {previewDetails.description}
              </div>
            </div>
          )}

          <div className="dx-scheduler-appointment-content-date mt-auto flex items-center gap-1 border-t border-black/10 pt-1 text-[10px] font-medium">
            <FaClock className="shrink-0" />
            <span>{getAppointmentTimeText(appointmentData)}</span>
          </div>
        </div>
      )
    },
    [getAppointmentHtml, getAppointmentPreviewDetails, getAppointmentTimeText],
  )

  const renderAppointmentTooltip = useCallback(
    (data: any) => {
      const appointmentData = data.targetedAppointmentData || data.appointmentData || {}
      const previewDetails = getAppointmentPreviewDetails(appointmentData)

      return (
        <div className="scheduler-appointment-preview flex w-96 max-w-[calc(100vw-2rem)] items-start gap-3 p-4 text-gray-900 dark:text-gray-100">
          <div className="min-w-0 flex-1 space-y-3 text-left">
            {previewDetails?.userName && (
              <div className="flex min-w-0 items-center gap-2">
                <Avatar
                  alt={previewDetails.userName}
                  className="shrink-0 ring-2 ring-blue-100 dark:ring-blue-900/50"
                  shape="circle"
                  size={40}
                  src={previewDetails.avatarUrl ?? '/img/others/default-profile.png'}
                />
                <div className="min-w-0">
                  <div className="text-[10px] font-semibold uppercase text-gray-500 dark:text-gray-400">
                    {translate('::App.Listform.ListformField.UserId')}
                  </div>
                  <div className="truncate text-sm font-semibold text-gray-900 dark:text-gray-100">
                    {previewDetails.userName}
                  </div>
                </div>
              </div>
            )}

            <div className="rounded-lg border border-gray-200 bg-gray-50 p-3 dark:border-gray-700 dark:bg-gray-800">
              <div className="mb-1 flex items-center gap-1.5 text-[10px] font-semibold uppercase text-gray-500 dark:text-gray-400">
                <FaHeading />
                <span>{translate('::App.Listform.ListformField.Text')}</span>
              </div>
              <div
                className="scheduler-appointment-preview-text text-base font-semibold leading-snug text-gray-900 dark:text-gray-100"
                dangerouslySetInnerHTML={{ __html: getAppointmentHtml(appointmentData) }}
              />
            </div>

            {previewDetails?.description && (
              <div className="rounded-lg border border-gray-200 bg-gray-50 p-3 dark:border-gray-700 dark:bg-gray-800">
                <div className="mb-1 flex items-center gap-1.5 text-[10px] font-semibold uppercase text-gray-500 dark:text-gray-400">
                  <FaAlignLeft />
                  <span>{translate('::App.Platform.Description')}</span>
                </div>
                <div className="max-h-32 overflow-y-auto whitespace-pre-wrap pr-1 text-sm leading-relaxed text-gray-700 dark:text-gray-300">
                  {previewDetails.description}
                </div>
              </div>
            )}

            <div className="flex items-center gap-2 border-t border-gray-200 pt-2 text-xs font-medium text-gray-600 dark:border-gray-700 dark:text-gray-300">
              <FaClock className="text-blue-600 dark:text-blue-400" />
              <span>{getAppointmentTimeText(appointmentData)}</span>
            </div>
          </div>
          {gridDto?.gridOptions.schedulerOptionDto?.allowDeleting && (
            <button
              type="button"
              className="shrink-0 self-start dx-button dx-button-mode-text dx-widget dx-button-has-icon"
              onClick={(event) => {
                event.stopPropagation()
                schedulerRef.current?.instance().deleteAppointment(data.appointmentData)
              }}
            >
              <span className="dx-button-content">
                <i className="dx-icon dx-icon-trash" />
              </span>
            </button>
          )}
        </div>
      )
    },
    [getAppointmentHtml, getAppointmentPreviewDetails, getAppointmentTimeText, gridDto],
  )

  const onAppointmentFormOpening = useCallback(
    (e: AppointmentFormOpeningEvent) => {
      if (!gridDto) return

      // Yeni appointment mı yoksa düzenleme mi kontrol et
      const isNewAppointment =
        !e.appointmentData ||
        (!e.appointmentData.id && !e.appointmentData[gridDto.gridOptions.keyFieldName || 'id'])

      const currentMode = isNewAppointment ? 'new' : 'edit'

      if (isNewAppointment) {
        const appointmentData = (e.appointmentData ?? {}) as Record<string, any>
        const defaultValues: Record<string, any> = {}
        const sequenceDefaults: Promise<void>[] = []

        for (const colFormat of gridDto.columnFormats ?? []) {
          const fieldName = colFormat.fieldName

          if (
            !fieldName ||
            colFormat.defaultValue === null ||
            colFormat.defaultValue === undefined
          ) {
            continue
          }

          if (
            typeof colFormat.defaultValue === 'string' &&
            colFormat.defaultValue === '@AUTONUMBER'
          ) {
            defaultValues[fieldName] = autoNumber()
          } else if (colFormat.defaultValueType === FieldCustomValueTypeEnum.Sequence) {
            sequenceDefaults.push(
              getNextSequenceValue(String(colFormat.defaultValue))
                .then((response) => {
                  const value = response.data
                  appointmentData[fieldName] = value
                  e.form.updateData(fieldName, value)
                })
                .catch((error) => {
                  console.error('Sequence default value alınamadı:', {
                    fieldName,
                    defaultValue: colFormat.defaultValue,
                    error,
                  })
                }),
            )
          } else {
            defaultValues[fieldName] = colFormat.defaultValue
          }
        }

        Object.assign(appointmentData, defaultValues)
        e.form.option('formData', {
          ...(e.form.option('formData') ?? {}),
          ...appointmentData,
        })

        void Promise.all(sequenceDefaults)
      }

      const popupOptions = gridDto.gridOptions.editingOptionDto?.popup
      const popupFullScreen =
        useMobileEditPopup || isPopupFullScreen || (popupOptions?.fullScreen ?? false)

      // Popup ayarlarını Grid ile aynı ölçü ve cihaz kurallarıyla yapılandır.
      e.popup.option({
        animation: {},
        deferRendering: true,
        dragEnabled: popupOptions?.dragEnabled,
        fullScreen: popupFullScreen,
        height: getEditPopupHeight(useMobileEditPopup, popupFullScreen),
        hideOnOutsideClick: popupOptions?.hideOnOutsideClick,
        maxHeight: getEditPopupMaxHeight(useMobileEditPopup, popupFullScreen, popupOptions?.height),
        maxWidth: useMobileEditPopup ? '100%' : popupOptions?.width,
        position: useMobileEditPopup ? getMobilePopupPosition() : popupOptions?.position,
        resizeEnabled: popupOptions?.resizeEnabled,
        restorePosition: popupOptions?.restorePosition,
        showTitle: popupOptions?.showTitle,
        title: (currentMode === 'new' ? '✚ ' : '🖊️ ') + translate('::' + popupOptions?.title),
        width: useMobileEditPopup ? '100%' : popupOptions?.width,
        wrapperAttr: useMobileEditPopup
          ? { class: 'dx-scheduler-appointment-popup mobile-edit-popup' }
          : undefined,
      })

      // Toolbar butonlarını ekle
      e.popup.option('toolbarItems', [
        {
          widget: 'dxButton',
          toolbar: 'bottom',
          location: 'after',
          options: {
            text: translate('::Save'),
            type: 'default',
            onClick: async () => {
              const formInstance = e.form
              const validationResult = formInstance.validate()

              if (validationResult.isValid) {
                // Form verilerini al
                const formData = formInstance.option('formData')

                try {
                  // Scheduler instance'ını al
                  const scheduler = schedulerRef.current?.instance()

                  if (e.appointmentData && scheduler) {
                    // Yeni appointment mı yoksa güncelleme mi kontrol et
                    if (
                      e.appointmentData.id ||
                      e.appointmentData[gridDto.gridOptions.keyFieldName || 'id']
                    ) {
                      // Güncelleme
                      await scheduler.updateAppointment(e.appointmentData, formData)
                    } else {
                      // Yeni ekleme
                      await scheduler.addAppointment(formData)
                    }

                    // Popup'ı kapat
                    e.popup.hide()

                    // RefreshData varsa çağır
                    if (props.refreshData) {
                      await props.refreshData()
                    }
                  }
                } catch (error) {
                  console.error('Appointment save error:', error)
                }
              }
            },
          },
        },
        {
          widget: 'dxButton',
          toolbar: 'bottom',
          location: 'after',
          options: {
            text: translate('::Cancel'),
            onClick: () => {
              e.cancel = true
              e.popup.hide()
            },
          },
        },
        {
          widget: 'dxButton',
          toolbar: 'top',
          location: 'after',
          options: {
            icon: popupFullScreen ? 'collapse' : 'fullscreen',
            hint: popupFullScreen ? translate('::Normal Boyut') : translate('::Tam Ekran'),
            stylingMode: 'text',
            onClick: () => {
              // Popup'tan mevcut fullScreen durumunu al
              const currentFullScreen = e.popup.option('fullScreen')
              const newFullScreenState = !currentFullScreen

              // State'i güncelle
              setIsPopupFullScreen(newFullScreenState)

              // Popup'ı güncelle
              e.popup.option('fullScreen', newFullScreenState)

              e.popup.option({
                height: getEditPopupHeight(useMobileEditPopup, newFullScreenState),
                maxHeight: getEditPopupMaxHeight(
                  useMobileEditPopup,
                  newFullScreenState,
                  popupOptions?.height,
                ),
                maxWidth: useMobileEditPopup ? '100%' : popupOptions?.width,
                width: useMobileEditPopup ? '100%' : popupOptions?.width,
              })
            },
          },
        },
      ])

      // Grup düzenini EditingFormDto'dan, alanları ColumnFormatDto'dan oluştur.
      const result: any[] = []

      if (getEditingFormGroups(gridDto)?.length > 0) {
        const sortedFormDto = getEditingFormGroups(gridDto)
          .slice()
          .sort((a: any, b: any) => (a.order >= b.order ? 1 : -1))

        // Tüm tabbed items'ları topla (Grid'deki gibi)
        const tabbedItems = sortedFormDto.filter((e: any) => e.itemType === 'tabbed')

        // Ortak item mapper fonksiyonu - hem group hem tab için kullanılır
        const mapFormItem = (i: ColumnFormatDto) => {
          let editorOptions: any = {}
          try {
            if (i.editorOptions) {
              editorOptions = JSON.parse(i.editorOptions)
            }
          } catch (err) {
            console.log(err)
          }

          const listFormField = i
          const listFormColumn = listFormColumns.find(
            (column) => column.dataField?.toLowerCase() === i.fieldName?.toLowerCase(),
          )

          if (listFormField?.sourceDbType === DbTypeEnum.Date) {
            editorOptions = {
              ...{
                type: 'date',
                dateSerializationFormat: 'yyyy-MM-dd',
                displayFormat: 'shortDate',
              },
              ...editorOptions,
            }
          } else if (
            listFormField?.sourceDbType === DbTypeEnum.DateTime ||
            listFormField?.sourceDbType === DbTypeEnum.DateTime2 ||
            listFormField?.sourceDbType === DbTypeEnum.DateTimeOffset
          ) {
            editorOptions = {
              ...{
                type: 'datetime',
                dateSerializationFormat: 'yyyy-MM-ddTHH:mm:ss',
                displayFormat: 'shortDateShortTime',
              },
              ...editorOptions,
            }
          }

          const lookup = listFormColumn?.lookup
          if (lookup) {
            editorOptions.dataSource =
              typeof lookup.dataSource === 'function'
                ? lookup.dataSource({ data: e.appointmentData ?? {} })
                : lookup.dataSource
            editorOptions.valueExpr = lookup.valueExpr
            editorOptions.displayExpr = lookup.displayExpr
          }

          const item: SimpleItemWithColData = {
            canRead: listFormField?.canRead ?? false,
            canUpdate: listFormField?.canUpdate ?? false,
            canCreate: listFormField?.canCreate ?? false,
            canExport: listFormField?.canExport ?? false,
            allowEditing: listFormField?.allowEditing ?? true,
            allowAdding: listFormField?.allowAdding ?? true,
            dataField: i.fieldName,
            name: i.fieldName,
            editorType2: i.editorType2,
            editorType: resolveEditorType(i.editorType2),
            colSpan: i.colSpan,
            editorOptions,
            editorScript: i.editorScript,
            isRequired:
              listFormField.validationRuleDto?.some((rule) => rule.type === 'required') ?? false,
            validationRules: (listFormField.validationRuleDto ?? []) as ValidationRule[],
          }

          if (i.captionName) {
            item.label = { text: translate('::' + i.captionName) }
          } else if (i.fieldName?.indexOf(':') >= 0) {
            item.label = { text: captionize(i.fieldName.split(':')[1]) }
          }

          if (
            (currentMode == 'edit' && !item.canUpdate) ||
            (currentMode == 'new' && !item.canCreate)
          ) {
            item.editorOptions = {
              ...item.editorOptions,
              readOnly: true,
            }
          }

          return item
        }

        const isVisibleFormItem = (item: SimpleItemWithColData) => {
          if (currentMode === 'new') {
            return item.canCreate && item.allowAdding
          }

          if (currentMode === 'edit') {
            return item.canUpdate && item.allowEditing
          }

          return false
        }

        sortedFormDto.forEach((e: any) => {
          // Items'ları da order'a göre sırala
          const sortedItems = (e.items || [])
            .slice()
            .sort((a: any, b: any) => ((a.editOrderNo ?? 0) >= (b.editOrderNo ?? 0) ? 1 : -1))

          const groupItems = sortedItems.map(mapFormItem).filter(isVisibleFormItem)

          if (e.itemType !== 'tabbed') {
            result.push({
              itemType: e.itemType,
              colCount: e.colCount || 1,
              colSpan: e.colSpan || 1,
              caption: e.caption,
              items: groupItems,
            })
          } else if (e.itemType === 'tabbed' && tabbedItems.length > 0 && e === tabbedItems[0]) {
            result.push({
              itemType: 'tabbed',
              colCount: 1,
              colSpan: 1,
              tabs: tabbedItems.map((tabbedItem: any) => {
                const effectiveColCount = tabbedItem.colCount || 1

                return {
                  title: tabbedItem.caption,
                  colCount: effectiveColCount,
                  items: tabbedItem.items
                    ?.sort((a: any, b: any) =>
                      (a.editOrderNo ?? 0) >= (b.editOrderNo ?? 0) ? 1 : -1,
                    )
                    .map(mapFormItem)
                    .filter(isVisibleFormItem),
                }
              }),
            })
          }
        })
      }

      e.form.option('colCount', 1)
      e.form.option('showValidationSummary', false)
      e.form.option('items', result)
    },
    [gridDto, translate, isPopupFullScreen, listFormColumns, useMobileEditPopup],
  )

  const configuredEditPopup = gridDto?.gridOptions.editingOptionDto?.popup
  const schedulerPopupFullScreen =
    useMobileEditPopup || isPopupFullScreen || (configuredEditPopup?.fullScreen ?? false)
  const schedulerPopupWidth = useMobileEditPopup ? '100%' : configuredEditPopup?.width
  const schedulerEditingPopup = useMemo(
    () =>
      configuredEditPopup
        ? {
            animation: {},
            deferRendering: true,
            dragEnabled: configuredEditPopup.dragEnabled,
            fullScreen: schedulerPopupFullScreen,
            height: getEditPopupHeight(useMobileEditPopup, schedulerPopupFullScreen),
            hideOnOutsideClick: configuredEditPopup.hideOnOutsideClick,
            maxHeight: getEditPopupMaxHeight(
              useMobileEditPopup,
              schedulerPopupFullScreen,
              configuredEditPopup.height,
            ),
            maxWidth: schedulerPopupWidth,
            position: useMobileEditPopup
              ? getMobilePopupPosition()
              : configuredEditPopup.position,
            resizeEnabled: configuredEditPopup.resizeEnabled,
            restorePosition: configuredEditPopup.restorePosition,
            width: schedulerPopupWidth,
            wrapperAttr: useMobileEditPopup
              ? { class: 'dx-scheduler-appointment-popup mobile-edit-popup' }
              : undefined,
            onShowing: (event: any) => {
              event.component.option({
                fullScreen: schedulerPopupFullScreen,
                height: getEditPopupHeight(useMobileEditPopup, schedulerPopupFullScreen),
                maxHeight: getEditPopupMaxHeight(
                  useMobileEditPopup,
                  schedulerPopupFullScreen,
                  configuredEditPopup.height,
                ),
                maxWidth: schedulerPopupWidth,
                width: schedulerPopupWidth,
              })
            },
          }
        : undefined,
    [configuredEditPopup, schedulerPopupFullScreen, schedulerPopupWidth, useMobileEditPopup],
  )
  const schedulerDescriptionExpr =
    gridDto?.gridOptions.schedulerOptionDto?.descriptionExpr ??
    gridDto?.columnFormats?.find((column) => column.fieldName?.toLowerCase() === 'description')
      ?.fieldName

  return (
    <>
      <div ref={widgetGroupRef} className={(gridDto?.widgets?.length ?? 0) > 0 ? 'mt-2' : ''}>
        <WidgetGroup widgetGroups={gridDto?.widgets ?? []} />
      </div>

      <Container className={DX_CLASSNAMES}>
        {!isSubForm && (
          <Helmet
            titleTemplate={`%s | ${APP_NAME}`}
            title={translate('::' + gridDto?.gridOptions.title)}
            defaultTitle={APP_NAME}
          ></Helmet>
        )}
        {!gridDto && (
          <div className="p-4">
            <Loading loading>Loading scheduler configuration...</Loading>
          </div>
        )}
        {gridDto && !schedulerDataSource && (
          <div className="p-4">
            <Loading loading>Loading data source...</Loading>
          </div>
        )}
        {gridDto && schedulerDataSource && (
          <>
            <div className="p-1">
              <Scheduler
                ref={schedulerRef as any}
                key={`Scheduler-${listFormCode}-${schedulerDataSource ? 'loaded' : 'loading'}`}
                id={'Scheduler-' + listFormCode}
                className="list-view-toolbar-host"
                dataSource={schedulerDataSource}
                dateSerializationFormat="yyyy-MM-ddTHH:mm:ss"
                descriptionExpr={schedulerDescriptionExpr}
                textExpr={gridDto.gridOptions.schedulerOptionDto?.textExpr || 'text'}
                startDateExpr={gridDto.gridOptions.schedulerOptionDto?.startDateExpr || 'startDate'}
                endDateExpr={gridDto.gridOptions.schedulerOptionDto?.endDateExpr || 'endDate'}
                allDayExpr={gridDto.gridOptions.schedulerOptionDto?.allDayExpr}
                recurrenceRuleExpr={gridDto.gridOptions.schedulerOptionDto?.recurrenceRuleExpr}
                recurrenceExceptionExpr={
                  gridDto.gridOptions.schedulerOptionDto?.recurrenceExceptionExpr
                }
                startDayHour={gridDto.gridOptions.schedulerOptionDto?.startDayHour || 8}
                endDayHour={gridDto.gridOptions.schedulerOptionDto?.endDayHour || 20}
                currentView={currentView}
                onCurrentViewChange={onCurrentViewChange}
                onAppointmentFormOpening={onAppointmentFormOpening}
                appointmentRender={renderAppointment}
                appointmentTooltipRender={renderAppointmentTooltip}
                onAppointmentAdding={() => {
                  props.refreshData?.()
                }}
                onAppointmentUpdating={() => {
                  props.refreshData?.()
                }}
                onAppointmentDeleting={() => {
                  props.refreshData?.()
                }}
                height={
                  gridDto.gridOptions.height > 0
                    ? gridDto.gridOptions.height
                    : gridDto.gridOptions.fullHeight
                      ? `calc(100vh - ${170 + widgetGroupHeight}px)`
                      : undefined
                }
                showAllDayPanel={gridDto.gridOptions.schedulerOptionDto?.showAllDayPanel ?? true}
                crossScrollingEnabled={
                  gridDto.gridOptions.schedulerOptionDto?.crossScrollingEnabled ?? false
                }
                cellDuration={gridDto.gridOptions.schedulerOptionDto?.cellDuration || 30}
                firstDayOfWeek={
                  (gridDto.gridOptions.schedulerOptionDto?.firstDayOfWeek as
                    | 0
                    | 1
                    | 2
                    | 3
                    | 4
                    | 5
                    | 6) || 1
                }
                adaptivityEnabled={false}
              >
                <Toolbar>
                  <Item name="dateNavigator" />
                  <Item name="today" />
                  <Item name="viewSwitcher" />
                  <Item
                    cssClass="scheduler-toolbar-action"
                    location="after"
                    widget="dxButton"
                    locateInMenu="auto"
                    showText="always"
                    options={{
                      icon: 'refresh',
                      text: translate('::ListForms.ListForm.Refresh'),
                      hint: translate('::ListForms.ListForm.Refresh'),
                      onClick: handleRefresh,
                    }}
                  />
                  {checkPermission('App.Listforms.Listform.Update') && (
                    <Item
                      cssClass="scheduler-toolbar-action"
                      location="after"
                      widget="dxButton"
                      locateInMenu="auto"
                      showText="always"
                      options={{
                        icon: 'preferences',
                        text: translate('::ListForms.ListForm.Manage'),
                        hint: translate('::ListForms.ListForm.Manage'),
                        onClick: settingButtonClick,
                      }}
                    />
                  )}
                </Toolbar>

                <Editing
                  allowAdding={gridDto.gridOptions.schedulerOptionDto?.allowAdding ?? false}
                  allowDeleting={gridDto.gridOptions.schedulerOptionDto?.allowDeleting ?? false}
                  allowDragging={gridDto.gridOptions.schedulerOptionDto?.allowDragging ?? false}
                  allowResizing={gridDto.gridOptions.schedulerOptionDto?.allowResizing ?? false}
                  allowUpdating={gridDto.gridOptions.schedulerOptionDto?.allowEditing ?? false}
                  form={{ colCount: 1 }}
                  popup={schedulerEditingPopup}
                />

                <View
                  type="day"
                  name={translate('::App.Listform.ListformField.Day')}
                  maxAppointmentsPerCell="unlimited"
                />
                <View
                  type="week"
                  name={translate('::ListForms.SchedulerOptions.Week')}
                  maxAppointmentsPerCell="unlimited"
                />
                <View
                  type="workWeek"
                  name={translate('::ListForms.SchedulerOptions.WorkWeek')}
                  maxAppointmentsPerCell="unlimited"
                />
                <View type="month" name={translate('::ListForms.SchedulerOptions.Month')} />
                <View
                  type="timelineDay"
                  name={translate('::ListForms.SchedulerOptions.TimelineDay')}
                  maxAppointmentsPerCell="unlimited"
                />
                <View
                  type="timelineWeek"
                  name={translate('::ListForms.SchedulerOptions.TimelineWeek')}
                  maxAppointmentsPerCell="unlimited"
                />
                <View
                  type="timelineMonth"
                  name={translate('::ListForms.SchedulerOptions.TimelineMonth')}
                  maxAppointmentsPerCell="unlimited"
                />
                <View type="agenda" name={translate('::ListForms.SchedulerOptions.Agenda')} />

                {gridDto.gridOptions.schedulerOptionDto?.resources?.map((resource, index) => (
                  <Resource
                    key={index}
                    fieldExpr={resource.fieldExpr}
                    dataSource={resource.dataSource}
                    label={resource.label}
                    useColorAsDefault={resource.useColorAsDefault}
                  />
                ))}
              </Scheduler>
            </div>
          </>
        )}
      </Container>
    </>
  )
}

export default SchedulerView