Page

import { hasUnauthorizedError } from '@/common/helpers';
import ErrorOccurred from '@/components/ErrorOccurred';
import HeaderMain from '@/components/layout/HeaderMain';
import PageLayout from '@/components/layout/PageLayout';
import NoPermission from '@/components/NoPermission';
import TimeReportSkeleton from '@/components/skeletons/TimeReportSkeleton';
import TimeReportTable from '@/components/TimeReportTable';
import { useGetAllCustomersQuery } from '@/store/api/customerSlice';
import { useGetAllProjectsQuery } from '@/store/api/projectsSlice';
import { useGetAllTimeReportsQuery } from '@/store/api/timeReportSlice';
import { addDays, format, startOfMonth, startOfWeek } from 'date-fns';
import { useSearchParams } from 'react-router-dom';

const today = new Date();

const thisWeek = startOfWeek(today, { weekStartsOn: 1 });

const thisMonth = startOfMonth(today);

const last8Days = addDays(today, -8);

const last30Days = addDays(today, -30);

const formatDateOnly = (date: Date) => {
  return format(date, 'yyyy-MM-dd');
};

type TFilter = {
  text: string;
  value: string | null;
};

export const periodFilterOptions: TFilter[] = [
  {
    text: 'Heute',
    value: formatDateOnly(today),
  },
  {
    text: 'diese Woche',
    value: formatDateOnly(thisWeek),
  },
  {
    text: 'diser Monat',
    value: formatDateOnly(thisMonth),
  },
  {
    text: 'letzte 8 Tage',
    value: formatDateOnly(last8Days),
  },
  {
    text: 'letzte 30 Tage',
    value: formatDateOnly(last30Days),
  },
  {
    text: 'Alle Zeitnachweise',
    value: 'all',
  },
];

// export to common
export const getPeriodFilter = (value: string | null) => {
  if (!value) {
    return periodFilterOptions[0].value;
  }

  const isValid = periodFilterOptions.some((pf) => pf.value === value);

  if (!isValid) {
    return periodFilterOptions[0].value;
  }

  return value;
};

function TimeReport() {
  const [searchParams] = useSearchParams();
  const currentPeriodFilter = getPeriodFilter(searchParams.get('znw-period-filter'));

  const {
    data: timeReportData = [],
    isLoading: isTimeReportLoading,
    isError: isTimeReportError,
    error: timeReportError,
  } = useGetAllTimeReportsQuery({
    query: !currentPeriodFilter || currentPeriodFilter === 'all' ? '' : `?datumVon=${currentPeriodFilter}`,
  });

  const {
    data: customers = [],
    isLoading: isCustomersLoading,
    isError: isCustomersError,
    error: customersError,
  } = useGetAllCustomersQuery({ includeProjects: false });

  const {
    data: projects = [],
    isLoading: isProjectsLoading,
    isError: isProjectsError,
    error: projectsError,
  } = useGetAllProjectsQuery();

  const isLoading = isTimeReportLoading || isCustomersLoading || isProjectsLoading;
  const isError = isTimeReportError || isCustomersError || isProjectsError;

  const isUnauthorized = hasUnauthorizedError([timeReportError, customersError, projectsError]);

  if (isLoading) {
    return <TimeReportSkeleton />;
  }

  if (isUnauthorized) {
    return <NoPermission />;
  }
  if (isError) {
    return <ErrorOccurred />;
  }

  const timeReportCustom = timeReportData.map((timeReport) => {
    const { kunde, projekt, ...rest } = timeReport;

    return {
      ...rest,
      kundeId: kunde.id,
      projektId: projekt.id,
    };
  });

  return (
    <PageLayout>
      <HeaderMain>Deine Zeitnachweise</HeaderMain>
      <TimeReportTable
        data={timeReportCustom}
        customers={customers}
        projects={projects}
      />
    </PageLayout>
  );
}

export default TimeReport;