import { useMemo } from 'react';
import { useLocation, useNavigate } from 'react-router';

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

import TaskFocusHeader from '@material-hu/components/design-system/Header/TaskFocus';
import { PillsProps } from '@material-hu/components/design-system/Pills/types';
import Skeleton from '@material-hu/components/design-system/Skeleton';

import { employeeLifecycleRoutes } from '../routes';

type FixedHeaderProps = {
  title: string;
  pill?: {
    type: PillsProps['type'];
    label: string;
  };
  backRoute: string;
  loading?: boolean;
};

const FixedHeader = ({ title, backRoute, pill, loading }: FixedHeaderProps) => {
  const navigate = useNavigate();
  const { state } = useLocation();

  const formattedBackRoute = useMemo(
    () =>
      state?.searchParams ? `${backRoute}${state.searchParams}` : backRoute,
    [backRoute, state?.searchParams],
  );

  if (loading) {
    return (
      <Stack
        sx={{
          flexDirection: 'row',
          gap: 1,
          height: 64,
          px: 3,
          justifyContent: 'space-between',
          alignItems: 'center',
          backgroundColor: theme =>
            theme.palette.new.background.layout.tertiary,
        }}
      >
        <Stack sx={{ flexDirection: 'row', gap: 2, alignItems: 'center' }}>
          <Skeleton sx={{ width: 40, height: 40 }} />
          <Skeleton sx={{ width: 200, height: 40 }} />
        </Stack>
        <Skeleton sx={{ width: 40, height: 40 }} />
      </Stack>
    );
  }

  return (
    <Stack
      sx={{
        width: '100%',
        position: 'sticky',
        top: 0,
        zIndex: 1000,
      }}
    >
      <TaskFocusHeader
        title={title}
        onBack={() => navigate(formattedBackRoute)}
        pillLabel={pill?.label}
        onClose={() => navigate(employeeLifecycleRoutes.onboardings())}
        slotProps={{
          pill: {
            type: pill?.type,
            hasIcon: false,
          },
        }}
      />
    </Stack>
  );
};

export default FixedHeader;