import { MouseEvent } from 'react';

import {
  IconBed,
  IconCalendarOff,
  IconCirclePlus,
  IconClipboard,
  IconDotsVertical,
  IconPlus,
} from '@material-hu/icons/tabler';
import Box from '@material-hu/mui/Box';
import Divider from '@material-hu/mui/Divider';
import Fab from '@material-hu/mui/Fab';
import IconButton from '@material-hu/mui/IconButton';
import Stack from '@material-hu/mui/Stack';
import { useTheme } from '@material-hu/mui/styles';
import Typography from '@material-hu/mui/Typography';

import HuCardContainer from '@material-hu/components/design-system/CardContainer';
import HuSkeleton from '@material-hu/components/design-system/Skeleton';
import HuTableCell from '@material-hu/components/design-system/Table/components/TableCell';
import HuTitle from '@material-hu/components/design-system/Title';
import Tooltip from '@material-hu/components/design-system/Tooltip';

import {
  type SelectedAssignedShift,
  type ShiftAssignCellVC,
  type ShiftCalendarDay,
  type ShiftTimeSlot,
} from 'src/types/shifts';
import { useLokaliseTranslation } from 'src/utils/i18n';

import EllipsisTooltip from 'src/components/EllipsisTooltip';

import { WeekMonthPeriod } from '@material-hu/components/composed-components/WeekMonthSelector/types';

import { TABLE_HEADERS_IDS } from '../../constants';
import { useShiftsSelectionActions } from '../../contexts/ShiftsSelectionContext';
import { processTimeSlotRange } from '../../utils';
/* COACHMARK DISABLED - kept for future reference
import {
  COACHMARK_ELEMENT_IDS,
  COACHMARK_MOCK_SHIFT_ID,
  COACHMARK_MOCK_USER_ID,
} from '../ShiftsCoachmark/constants';
*/

import {
  CARD_CONTENT_PADDING_SX,
  GLOBAL_XXS_TYPOGRAPHY_SX,
  MONTHLY_ICON_CARD_SX,
  SHIFT_CARD_COLORS,
} from './constants';
import { type ShiftDragDropHandlers } from '../../types';
import {
  createShiftCardSx,
  getValidShiftColor,
  checkIfShiftIsSelected,
  parseShiftMenuButtonSx,
  timeOffHoursDescription,
} from './utils';

type Props = {
  dateInfo: ShiftCalendarDay | undefined;
  cellData: ShiftAssignCellVC;
  showAssignmentDrawer: () => void;
  onMenuOpen: (
    event: MouseEvent<HTMLButtonElement>,
    assignedShiftData: SelectedAssignedShift,
  ) => void;
  onAdvancedShiftClick: (
    shiftId: number,
    containerCellData: ShiftAssignCellVC,
    allShiftsInCell: number[],
  ) => void;
  onShiftClick: (shiftId: number, userId: number, date: string) => void;
  onSelectCell: (
    cellData: ShiftAssignCellVC,
    allShiftsInCell: number[],
  ) => void;
  onDeselectCell: (
    cellData: ShiftAssignCellVC,
    allShiftsInCell: number[],
  ) => void;
  onSelectAllShiftsInCell: (dateInfo: ShiftCalendarDay) => void;
  isCellSelected?: boolean;
  cellSelectionMap?: Map<string, boolean>;
  copiedShiftIds: Set<number> | null;
  onPaste: (targetCell?: ShiftAssignCellVC) => void;
  onTimeOffClick: (event: MouseEvent<Element>, info: any) => void;
  onShiftContextMenu: (
    event: MouseEvent<HTMLElement>,
    assignedShiftData: SelectedAssignedShift,
    shiftInfo: {
      name: string | null;
      timeSlots: ShiftTimeSlot[];
      isDayOff?: boolean;
    },
  ) => void;
  isDragOver: boolean;
  draggingShiftIds: Set<number>;
  /**
   * Number of shift indicator boxes to render in this cell.
   */
  dragPreviewShiftCount: number;
} & ShiftDragDropHandlers;

const DateCell = ({
  dateInfo,
  cellData,
  showAssignmentDrawer,
  onMenuOpen,
  onAdvancedShiftClick,
  onShiftClick,
  onSelectCell,
  onDeselectCell,
  onSelectAllShiftsInCell,
  isCellSelected = false,
  cellSelectionMap = new Map(),
  copiedShiftIds,
  onPaste,
  onTimeOffClick,
  onShiftContextMenu,
  onDragStart,
  onDragOver,
  onDragLeave,
  onDrop,
  onDragEnd,
  isDragOver,
  draggingShiftIds,
  dragPreviewShiftCount,
}: Props) => {
  const { t } = useLokaliseTranslation(['shifts', 'time_off', 'time_tracker']);
  const { palette } = useTheme();
  const {
    isAdvancedMode,
    selectedShifts,
    excludeShifts,
    selectedDates,
    pastingCells,
    closeOpenOverlays,
    viewMode,
  } = useShiftsSelectionActions();

  const isMonthlyView = viewMode === WeekMonthPeriod.MONTHLY;

  const isPasting = pastingCells.has(`${cellData.userId}-${cellData.date}`);

  const MOCK_PUBLISHED_STATUS = false; // TODO: Use shift.status whenever backend enables it

  // Early return if dateInfo is not available yet
  if (!dateInfo) {
    return (
      <HuTableCell
        sx={{
          px: 1,
          py: 1.5,
          position: 'relative',
        }}
        onDragOver={e => onDragOver(e, cellData)}
        onDragLeave={onDragLeave}
        onDrop={e => onDrop(e, cellData)}
      >
        <Stack
          sx={{
            gap: 1,
            alignItems: 'center',
            justifyContent: 'center',
            pointerEvents: 'none',
          }}
        ></Stack>
      </HuTableCell>
    );
  }

  const isHoliday = !!dateInfo.holidays?.length;
  // `shifts.some(s => s.isRest)` covers the optimistic-move case where the
  // target cell's scheduledData hasn't refreshed yet — the overlay marks
  // moved rest shifts with `isRest: true` so they render correctly on drop.
  const isDayOff =
    (!dateInfo.scheduledData.isWorkday &&
      dateInfo.scheduledData.scheduleSource === 'SHIFT') ||
    !!dateInfo.shifts?.some(s => s.isRest);
  const isDayWithTimeOff = !!dateInfo.timeOffs?.length;
  const isDayWithoutEvents =
    !isHoliday && !isDayWithTimeOff && !isDayOff && !dateInfo.shifts?.length;
  const showEmptyCellActions =
    isDayWithoutEvents &&
    !isAdvancedMode &&
    !isDragOver &&
    dragPreviewShiftCount === 0;

  const handleMenuOpen = (
    e: MouseEvent<HTMLButtonElement>,
    assignedShiftId: number,
  ) => {
    const assignedDayId = dateInfo.scheduledData.shiftAssignedDayId;
    onMenuOpen(e, {
      dayId: assignedDayId,
      shiftId: assignedShiftId,
      userId: cellData.userId,
      date: cellData.date,
    });
  };

  const buildContextMenuHandler = (
    shiftId: number,
    name: string | null,
    timeSlots: ShiftTimeSlot[],
    isDayOff?: boolean,
  ) => {
    if (!isMonthlyView) return undefined;
    return (e: React.MouseEvent<HTMLElement>) => {
      onShiftContextMenu(
        e,
        {
          dayId: dateInfo.scheduledData.shiftAssignedDayId,
          shiftId,
          userId: cellData.userId,
          date: cellData.date,
        },
        { name, timeSlots, isDayOff },
      );
    };
  };

  const noEvents =
    !isDayOff && !dateInfo.shifts?.length && !dateInfo.timeOffs?.length;

  const handleShiftClick = (shiftAssignedShiftId: number) => {
    if (isAdvancedMode) {
      const allShiftsInCell = dateInfo.shifts.map(s => s.shiftAssignedShiftId);
      onAdvancedShiftClick(shiftAssignedShiftId, cellData, allShiftsInCell);
    } else {
      onShiftClick(shiftAssignedShiftId, cellData.userId, cellData.date);
    }
  };

  const cellContent = () => {
    if (isHoliday && noEvents) {
      return (
        <HuTitle
          variant="S"
          title={t('time_off:vacations_holidays')}
          sx={GLOBAL_XXS_TYPOGRAPHY_SX}
          centered
        />
      );
    }

    return (
      <>
        {/* Time Offs */}
        {!!dateInfo.timeOffs?.length && (
          <Stack
            sx={{
              width: isMonthlyView ? 59 : '100%',
              height: isMonthlyView ? 52 : 'auto',
            }}
          >
            {dateInfo.timeOffs?.map(timeOffRequest => (
              <HuCardContainer
                key={timeOffRequest.id}
                sx={{
                  ...CARD_CONTENT_PADDING_SX,
                  backgroundColor: palette.new.background.layout.default,
                  borderColor: palette.new.border.neutral.default,
                  pointerEvents: 'auto',
                  width: '100%',
                  ...(isMonthlyView && MONTHLY_ICON_CARD_SX),
                }}
                onClick={(event?: MouseEvent<Element>) => {
                  if (event) {
                    closeOpenOverlays();
                    event.stopPropagation();
                    onTimeOffClick(event, {
                      isWorkable: timeOffRequest.activityType === 'WORK',
                      description: timeOffHoursDescription(
                        timeOffRequest,
                        t,
                        true,
                      ),
                      name: timeOffRequest.timeOffPolicyTypeName,
                      icon: timeOffRequest.timeOffPolicyTypeIcon,
                    });
                  }
                }}
              >
                {isMonthlyView && (
                  <Tooltip
                    title={
                      <Box
                        component="span"
                        sx={{ textTransform: 'capitalize' }}
                      >
                        {t('time_tracking_common:of_permission')}
                      </Box>
                    }
                    description={timeOffHoursDescription(timeOffRequest, t)}
                    delay={500}
                  >
                    <Stack
                      sx={{
                        alignItems: 'center',
                        justifyContent: 'center',
                      }}
                    >
                      <IconCalendarOff size={24} />
                    </Stack>
                  </Tooltip>
                )}
                {!isMonthlyView && (
                  <Stack>
                    <EllipsisTooltip
                      title={t('time_tracking_common:of_permission')}
                      delay={500}
                    >
                      <Typography
                        variant="globalS"
                        sx={{
                          ...GLOBAL_XXS_TYPOGRAPHY_SX,
                          textTransform: 'capitalize',
                          fontWeight: 'fontWeightSemiBold',
                        }}
                        noWrap
                      >
                        {t('time_tracking_common:of_permission')}
                      </Typography>
                    </EllipsisTooltip>

                    <EllipsisTooltip
                      title={timeOffHoursDescription(timeOffRequest, t)}
                      delay={500}
                    >
                      <Typography
                        variant="globalS"
                        sx={{
                          ...GLOBAL_XXS_TYPOGRAPHY_SX,
                          textTransform: 'capitalize',
                        }}
                        noWrap
                      >
                        {timeOffHoursDescription(timeOffRequest, t)}
                      </Typography>
                    </EllipsisTooltip>
                  </Stack>
                )}
              </HuCardContainer>
            ))}
          </Stack>
        )}
        {/* Day Off (only show one since we only allow one day off per day) */}
        {isDayOff && dateInfo.shifts[0] && (
          <Stack
            draggable
            data-shift-id={dateInfo.shifts[0].shiftAssignedShiftId}
            onDragStart={e =>
              onDragStart(e, dateInfo.shifts[0].shiftAssignedShiftId, cellData)
            }
            onDragEnd={onDragEnd}
            sx={{
              width: isMonthlyView ? 59 : '100%',
              height: isMonthlyView ? 52 : 'auto',
              position: 'relative',
              cursor: 'grab',
            }}
            onContextMenu={buildContextMenuHandler(
              dateInfo.shifts[0].shiftAssignedShiftId,
              dateInfo.shifts[0].name,
              dateInfo.shifts[0].timeSlots,
              true,
            )}
          >
            <HuCardContainer
              sx={{
                ...createShiftCardSx({
                  palette,
                  color: 'dayOff',
                  isDraft: MOCK_PUBLISHED_STATUS,
                  isCopiedOrDragged:
                    copiedShiftIds?.has(
                      dateInfo.shifts[0].shiftAssignedShiftId,
                    ) ||
                    draggingShiftIds.has(
                      dateInfo.shifts[0].shiftAssignedShiftId,
                    ),
                  isSelected: checkIfShiftIsSelected({
                    shiftId: dateInfo.shifts[0].shiftAssignedShiftId,
                    cellData,
                    excludeShifts,
                    selectedShifts,
                    selectedDates,
                    cellSelectionMap,
                  }),
                }),
                ...(isMonthlyView && MONTHLY_ICON_CARD_SX),
              }}
              onClick={event => {
                if (event) {
                  closeOpenOverlays();
                  event.stopPropagation();
                  handleShiftClick(dateInfo.shifts[0].shiftAssignedShiftId);
                }
              }}
            >
              {isMonthlyView && (
                <Stack sx={{ alignItems: 'center', justifyContent: 'center' }}>
                  <IconBed size={24} />
                </Stack>
              )}
              {!isMonthlyView && (
                <HuTitle
                  variant="S"
                  title={t('time_tracker:day_off')}
                  sx={GLOBAL_XXS_TYPOGRAPHY_SX}
                  centered
                />
              )}
            </HuCardContainer>
            {!isMonthlyView && (
              <IconButton
                variant="secondary"
                aria-label={t('day_off_actions')}
                size="small"
                onClick={(event: MouseEvent<HTMLButtonElement>) => {
                  closeOpenOverlays();
                  event.stopPropagation();
                  handleMenuOpen(
                    event,
                    dateInfo.shifts[0].shiftAssignedShiftId,
                  );
                }}
                sx={parseShiftMenuButtonSx({
                  palette,
                  color: 'dayOff',
                  isDraft: MOCK_PUBLISHED_STATUS,
                })}
              >
                <IconDotsVertical />
              </IconButton>
            )}
          </Stack>
        )}
        {/* Shifts (only if not a day off) */}
        {!isDayOff &&
          dateInfo.shifts.map(shift => {
            const shiftColor = getValidShiftColor(shift.color);
            /* COACHMARK DISABLED - kept for future reference
            const isCoachmarkShift =
              shift.shiftAssignedShiftId === COACHMARK_MOCK_SHIFT_ID;
            */
            const isDraggingThisShift = draggingShiftIds.has(
              shift.shiftAssignedShiftId,
            );
            return (
              // CardContainer and IconButton are wrapped in a stack to avoid DOM error
              <Stack
                key={shift.shiftAssignedShiftId}
                draggable
                data-shift-id={shift.shiftAssignedShiftId}
                onDragStart={e =>
                  onDragStart(e, shift.shiftAssignedShiftId, cellData)
                }
                onDragEnd={onDragEnd}
                // COACHMARK DISABLED: id={isCoachmarkShift ? COACHMARK_ELEMENT_IDS.firstShift : undefined}
                sx={{
                  width: isMonthlyView ? 59 : '100%',
                  minHeight: isMonthlyView ? 59 : 'auto',
                  position: 'relative',
                  cursor: 'grab',
                }}
                onContextMenu={buildContextMenuHandler(
                  shift.shiftAssignedShiftId,
                  shift.name,
                  shift.timeSlots,
                )}
              >
                <HuCardContainer
                  sx={{
                    ...createShiftCardSx({
                      palette,
                      color: shiftColor,
                      isDraft: MOCK_PUBLISHED_STATUS,
                      isSelected: checkIfShiftIsSelected({
                        shiftId: shift.shiftAssignedShiftId,
                        cellData,
                        excludeShifts,
                        selectedShifts,
                        selectedDates,
                        cellSelectionMap,
                      }),
                      isCopiedOrDragged:
                        copiedShiftIds?.has(shift.shiftAssignedShiftId) ||
                        isDraggingThisShift,
                    }),
                    ...(isMonthlyView && {
                      borderWidth: '1px',
                      borderRadius: 1,
                    }),
                  }}
                  onClick={event => {
                    if (event) {
                      closeOpenOverlays();
                      event.stopPropagation();
                      handleShiftClick(shift.shiftAssignedShiftId);
                    }
                  }}
                >
                  {isMonthlyView && (
                    <Stack sx={{ gap: 0.5 }}>
                      {shift.timeSlots.length > 0 ? (
                        shift.timeSlots.map((timeSlot, index) => (
                          <Stack key={timeSlot.startTime}>
                            {index > 0 && (
                              <Divider
                                sx={{
                                  mb: 0.5,
                                  borderColor:
                                    palette.new.border.neutral.default,
                                }}
                              />
                            )}
                            <Typography
                              variant="globalS"
                              sx={GLOBAL_XXS_TYPOGRAPHY_SX}
                              noWrap
                            >
                              {timeSlot.startTime}
                            </Typography>
                            <Typography
                              variant="globalS"
                              sx={GLOBAL_XXS_TYPOGRAPHY_SX}
                              noWrap
                            >
                              {timeSlot.endTime}
                            </Typography>
                          </Stack>
                        ))
                      ) : (
                        <Typography
                          variant="globalS"
                          sx={GLOBAL_XXS_TYPOGRAPHY_SX}
                        >
                          {t('integration_shift')}
                        </Typography>
                      )}
                    </Stack>
                  )}
                  {!isMonthlyView && (
                    <Stack>
                      <EllipsisTooltip
                        title={shift.name || t('time_tracker:unnamed_shift')}
                        delay={500}
                      >
                        <Typography
                          variant="globalS"
                          sx={{
                            ...GLOBAL_XXS_TYPOGRAPHY_SX,
                            fontWeight: 'fontWeightSemiBold',
                          }}
                          noWrap
                        >
                          {shift.name || t('time_tracker:unnamed_shift')}
                        </Typography>
                      </EllipsisTooltip>
                      {!shift.timeSlots.length && (
                        <Typography
                          variant="globalS"
                          sx={GLOBAL_XXS_TYPOGRAPHY_SX}
                        >
                          {t('integration_shift')}
                        </Typography>
                      )}
                      {shift.timeSlots.length > 0 &&
                        shift.timeSlots.map(timeSlot => (
                          <Typography
                            key={timeSlot.startTime}
                            variant="globalS"
                            sx={GLOBAL_XXS_TYPOGRAPHY_SX}
                            noWrap
                          >
                            {processTimeSlotRange(timeSlot, t)}
                          </Typography>
                        ))}
                    </Stack>
                  )}
                </HuCardContainer>
                {!isMonthlyView && (
                  <IconButton
                    variant="secondary"
                    aria-label={t('shift_actions')}
                    size="small"
                    onClick={(event: MouseEvent<HTMLButtonElement>) => {
                      closeOpenOverlays();
                      event.stopPropagation();
                      handleMenuOpen(event, shift.shiftAssignedShiftId);
                    }}
                    sx={parseShiftMenuButtonSx({
                      palette,
                      color: shiftColor,
                      isDraft: MOCK_PUBLISHED_STATUS,
                    })}
                  >
                    <IconDotsVertical />
                  </IconButton>
                )}
              </Stack>
            );
          })}
      </>
    );
  };

  /* COACHMARK DISABLED - kept for future reference
  // Check if this is the empty cell for the coachmark (mock user's first empty cell)
  const isCoachmarkEmptyCell =
    cellData.userId === COACHMARK_MOCK_USER_ID && isDayWithoutEvents;
  */

  return (
    <HuTableCell
      // COACHMARK DISABLED: id={isCoachmarkEmptyCell ? COACHMARK_ELEMENT_IDS.emptyCell : undefined}
      sx={{
        px: isMonthlyView ? '5px' : 1,
        py: 1.5,
        verticalAlign:
          noEvents && dragPreviewShiftCount === 0 ? 'middle' : 'top',
        ...(isCellSelected && {
          backgroundColor: palette.new.action.button.background.secondary.hover,
        }),
        position: 'relative',
        zIndex: 0,
        ...(isDayWithoutEvents && {
          // Empty cells: always darker on hover
          '&:hover': {
            backgroundColor:
              palette.new.action.button.background.tertiary.hover,
          },
        }),
        ...(!isDayWithoutEvents && {
          // Cells with content: darker only when hovering cell but NOT shift cards
          '&:hover:not(:has(.MuiCardContent-root:hover))': {
            backgroundColor:
              palette.new.action.button.background.tertiary.hover,
            '.floating-button': {
              cursor: 'pointer',
              opacity: 1,
            },
          },
        }),
        // Drag-over highlight: applies to any cell (with or without events)
        ...(isDragOver &&
          !isCellSelected && {
            backgroundColor:
              palette.new.action.button.background.tertiary.hover,
          }),
        ...(isHoliday &&
          !isCellSelected && {
            backgroundColor: palette.new.background.elements.grey,
            borderBottom: `1px solid ${palette.new.border.neutral.default}`,
          }),
        ...(isDayWithoutEvents && {
          cursor: 'pointer',
          '& .empty-cell-icon': {
            display: 'none',
          },
          '&:hover .empty-cell-icon': {
            display: 'block',
          },
        }),
      }}
      // Drop-zone handlers: always active so both empty and occupied cells can receive drops
      onDragOver={e => onDragOver(e, cellData)}
      onDragLeave={onDragLeave}
      onDrop={e => onDrop(e, cellData)}
      onClick={event => {
        if (event.target !== event.currentTarget) return;

        const allShiftsInCell = dateInfo?.shifts
          ? dateInfo.shifts.map(s => s.shiftAssignedShiftId)
          : [];
        if (isCellSelected) {
          onDeselectCell(cellData, allShiftsInCell);
        } else {
          onSelectCell(cellData, allShiftsInCell);
        }
      }}
      headers={TABLE_HEADERS_IDS.dateHeader(cellData.date)}
    >
      <Stack
        sx={{
          gap: 1,
          alignItems: 'center',
          justifyContent:
            isDayWithoutEvents && dragPreviewShiftCount === 0
              ? 'center'
              : 'flex-start',
          position: 'relative',
          // Stack wont interfere with cell hover effect
          pointerEvents: isDayWithoutEvents ? 'auto' : 'none',
        }}
      >
        {isPasting && (
          <Stack sx={{ width: '100%' }}>
            <HuSkeleton
              variant="rounded"
              height={50}
              sx={{
                borderRadius: theme => theme.shape.borderRadiusL,
              }}
            />
          </Stack>
        )}
        {!isPasting && (
          <>
            {cellContent()}
            {dragPreviewShiftCount > 0 && (
              <>
                {Array.from({ length: dragPreviewShiftCount }).map((_, i) => (
                  <Stack
                    key={i}
                    sx={{
                      border: `2px solid ${palette.new.border.neutral.brand ?? palette.primary.main}`,
                      borderRadius: theme => theme.shape.borderRadiusL,
                      height: 50,
                      width: '100%',
                      pointerEvents: 'none',
                    }}
                  />
                ))}
              </>
            )}

            {showEmptyCellActions && (
              <Stack sx={{ gap: isMonthlyView ? 0 : 1, flexDirection: 'row' }}>
                <IconButton
                  aria-label={t('assign_shift_day_off')}
                  size={isMonthlyView ? 'small' : 'medium'}
                  onClick={() => {
                    if (isDayWithoutEvents) {
                      showAssignmentDrawer();
                    } else if (dateInfo) {
                      onSelectAllShiftsInCell(dateInfo);
                    }
                  }}
                >
                  <IconCirclePlus
                    className="empty-cell-icon"
                    size={isMonthlyView ? 16 : undefined}
                  />
                </IconButton>
                {copiedShiftIds && copiedShiftIds.size > 0 && (
                  <IconButton
                    aria-label={t('general:paste')}
                    size={isMonthlyView ? 'small' : 'medium'}
                    onClick={() => {
                      onPaste(cellData);
                    }}
                  >
                    <IconClipboard
                      className="empty-cell-icon"
                      size={isMonthlyView ? 16 : undefined}
                    />
                  </IconButton>
                )}
              </Stack>
            )}
          </>
        )}
      </Stack>
      {!isDayWithoutEvents && !isAdvancedMode && (
        <Fab
          className="floating-button"
          variant="circular"
          onClick={event => {
            closeOpenOverlays();
            // Avoid shift selection trigger
            event.stopPropagation();
            showAssignmentDrawer();
          }}
          sx={{
            backgroundColor: palette.new.background.layout.tertiary,
            bottom: -12,
            boxShadow: theme => theme.shadows[2],
            height: 24,
            minHeight: 24,
            opacity: 0,
            p: theme => theme.spacing(0),
            position: 'absolute',
            right: '50%',
            transform: 'translateX(50%)',
            transition: 'opacity 0.2s ease-in-out',
            width: 24,
            '&:hover': {
              // Need to explicitly override those props to avoid the hover effect of the Fab component
              backgroundColor:
                palette.new.action.button.background.secondary.hover,
              boxShadow: theme => theme.shadows[2],
              '& > svg': {
                stroke: palette.new.text.neutral.brand,
              },
            },
            '& > svg': {
              stroke: palette.new.text.neutral.brand,
              height: 16,
              width: 16,
            },
          }}
        >
          <IconPlus />
        </Fab>
      )}
    </HuTableCell>
  );
};

export default DateCell;
