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

import { logEvent } from 'src/config/amplitude';
import { useAuth } from 'src/contexts/JWTContext';
import useFormatDate from 'src/hooks/useFormatDate';
import { EventName } from 'src/types/amplitude';
import { isAdmin } from 'src/utils/permissions';

import { useShiftsSelectionActions } from '../contexts/ShiftsSelectionContext';

const PeriodSelector = () => {
  const { formatDate } = useFormatDate();
  const { permissions } = useAuth();
  const {
    startDate,
    endDate,
    viewMode,
    setStartDate,
    setEndDate,
    setViewMode,
  } = useShiftsSelectionActions();

  const handlePeriodChange = (period: WeekMonthPeriod) => {
    setViewMode(period);
    logEvent(EventName.SHIFT_MANAGEMENT_PERIOD_CHANGE, {
      user_admin: isAdmin(permissions),
      view: period.toLowerCase(),
    });
  };

  const handleCurrentMonthClick = () => {
    logEvent(EventName.SHIFT_MANAGEMENT_ACTUAL_MONTH_CLICKED, {
      user_admin: isAdmin(permissions),
    });
  };

  return (
    <WeekMonthSelector
      fromDate={startDate}
      toDate={endDate}
      handleFromChange={setStartDate}
      handleToChange={setEndDate}
      dateFormatter={formatDate}
      initialPeriod={viewMode}
      onPeriodChange={handlePeriodChange}
      onCurrentMonthClick={handleCurrentMonthClick}
    />
  );
};

export default PeriodSelector;