import { useFormContext } from 'react-hook-form';

import Stack from '@material-hu/mui/Stack';

import HuSearch from '@material-hu/components/design-system/Inputs/Search';

import { type ReportFilter } from 'src/hooks/useReportFilters';
import { type AssignShiftParams } from 'src/services/shifts';
import {
  type ShiftAssignCellVC,
  type ShiftCalendarUser,
} from 'src/types/shifts';
import { useLokaliseTranslation } from 'src/utils/i18n';

import { useShiftsSelectionActions } from '../../contexts/ShiftsSelectionContext';
import { shiftFormFields } from '../../form';
import { parsePreFillData, type ShiftFilters } from '../../utils';
import ActionButtons from '../ActionButtons';
import PeriodSelector from '../PeriodSelector';
/* COACHMARK DISABLED - kept for future reference
import { COACHMARK_ELEMENT_IDS } from '../ShiftsCoachmark';
*/
import TableFilters from '../TableFilters';

import StickyHeader from './StickyHeader';

type Site = { id: number; name: string };

type Props = {
  isLoading: boolean;
  selectedSite: Site | null;
  setSelectedSite: (site: Site | null) => void;
  onSiteFilterChange?: (site: Site | null) => void;
  setSearch: (search: string) => void;
  search: string;
  onAssignDayOff: (params: AssignShiftParams) => void;
  showAssigningModal: () => void;
  onRemoveAllShifts: () => void;
  debouncedValues: ShiftFilters;
  registers: ShiftCalendarUser[];
  drawerFilters: ReportFilter;
  showAssignShiftDrawer: (drawerProps: Partial<unknown>) => void;
  onCopy: (standaloneShift?: {
    shiftId: number;
    userId: number;
    date: string;
  }) => void;
  onPaste: (targetCell?: ShiftAssignCellVC) => void;
  userCount: string;
  days: { key: string; label: string }[];
  selectionActive: boolean;
  scrollRef: (element: HTMLElement | null) => void;
  onOpenDuplicateShiftsDrawer: () => void;
  toggleSelect: () => void;
  showScrollButtons?: boolean;
  onScroll?: (amount: number) => void;
};

const TableConfigurations = ({
  isLoading,
  debouncedValues,
  drawerFilters,
  onAssignDayOff,
  onCopy,
  onPaste,
  onRemoveAllShifts,
  registers,
  search,
  selectedSite,
  setSearch,
  setSelectedSite,
  showAssigningModal,
  showAssignShiftDrawer,
  userCount,
  days,
  selectionActive,
  scrollRef,
  onOpenDuplicateShiftsDrawer,
  toggleSelect,
  onSiteFilterChange,
  showScrollButtons,
  onScroll,
}: Props) => {
  const { t } = useLokaliseTranslation('shifts');
  const parentForm = useFormContext();

  const { selectedCells, selectedDates, clearAllSelections, clearCopyPaste } =
    useShiftsSelectionActions();

  return (
    <>
      <Stack sx={{ p: 3, gap: 2, pb: 0 }}>
        <Stack
          // COACHMARK DISABLED: id={COACHMARK_ELEMENT_IDS.actionButtons}
          sx={{
            alignItems: 'stretch',
            flexDirection: 'row',
            justifyContent: 'space-between',
          }}
        >
          <TableFilters
            selectedSite={selectedSite}
            setSelectedSite={setSelectedSite}
            filtersComponent={drawerFilters.component}
            onSiteFilterChange={onSiteFilterChange}
          />
          <PeriodSelector />
          <ActionButtons
            onOpenCustomShiftDrawer={props => {
              const preFillData = parsePreFillData(
                selectedDates,
                selectedCells,
                registers || [],
              );
              parentForm.setValue(
                shiftFormFields.collaborators,
                preFillData.collaborators || [],
              );
              parentForm.setValue(shiftFormFields.date, preFillData.date);
              showAssignShiftDrawer(props);
            }}
            onRemoveAllShifts={onRemoveAllShifts}
            onAssignDayOff={onAssignDayOff}
            debouncedValues={debouncedValues}
            showAssigningModal={showAssigningModal}
            onCopy={onCopy}
            onPaste={onPaste}
            onOpenDuplicateShiftsDrawer={onOpenDuplicateShiftsDrawer}
            onToggleSelect={toggleSelect}
          />
        </Stack>
        <Stack
          sx={{
            alignItems: 'center',
            flexDirection: 'row',
            gap: 2,
          }}
        >
          <HuSearch
            value={search}
            onChange={newValue => {
              setSearch(newValue);
              clearAllSelections({
                keepDates: true,
                keepCopiedCells: true,
              });
              clearCopyPaste();
            }}
            placeholder={t('search_collaborator_or_shift')}
            aria-label={t('search_collaborator_or_shift')}
          />
        </Stack>
      </Stack>
      <StickyHeader
        isLoading={isLoading}
        registers={registers || []}
        days={days}
        selectionActive={selectionActive}
        userCount={userCount}
        scrollRef={scrollRef}
        showScrollButtons={showScrollButtons}
        onScroll={onScroll}
      />
    </>
  );
};

export default TableConfigurations;