import React from 'react';
import { matchPath, useLocation } from 'react-router';
import styled from 'styled-components';
import { Breadcrumbs } from '@material-ui/core';
import { Colors } from '../../constants';
import { BackButton, NoteModalActionBlocker } from '../../components';
import { useGoBack } from '../../hooks';
import { PatientBreadcrumb, CategoryBreadcrumb } from './PatientBreadcrumbs';
import { PATIENT_PATHS } from '../../constants/patientPaths';
import { usePreviousLocation } from '../../utils/usePreviousLocation';

export const NAVIGATION_CONTAINER_HEIGHT = '50px';

const StickyContainer = styled.div`
  width: 100%;
  background: ${Colors.white};
  display: flex;
  z-index: 9;
  position: sticky;
  top: 0;
  height: ${NAVIGATION_CONTAINER_HEIGHT};
  align-items: center;
  padding-left: 30px;
  padding-right: 30px;
  border-bottom: 1px solid ${Colors.softOutline};
  flex-shrink: 0;
`;

const VerticalDivider = styled.div`
  margin-left: 30px;
  margin-right: 30px;
  border-left: 1px solid ${Colors.softOutline};
  height: 100%;
`;

const StyledBreadcrumbs = styled(Breadcrumbs)`
  font-size: 12px;
  .MuiBreadcrumbs-separator {
    color: ${Colors.softText};
  }
  .MuiBreadcrumbs-li:last-child {
    font-weight: 500;
    pointer-events: none;
  }
`;

const RouteBreadcrumbs = ({ patientRoutes }) => {
  const location = useLocation();

  // Find the matching route based on current location
  const matchedRoute = patientRoutes.find(route => {
    if (route.index) {
      return null;
    }

    const fullPath = `${PATIENT_PATHS.PATIENT}/${route.path}`;
    return matchPath({ path: fullPath, end: true }, location.pathname);
  });

  return matchedRoute?.breadcrumbs || [];
};

export const PatientNavigation = ({ patientRoutes }) => {
  const navigateBack = useGoBack();
  const routeBreadcrumbs = RouteBreadcrumbs({ patientRoutes });

  const previousLocation = usePreviousLocation();
  const backWouldStayInPatient = Boolean(
    previousLocation &&
      matchPath({ path: PATIENT_PATHS.PATIENT, end: false }, previousLocation.pathname),
  );

  const backButton = <BackButton onClick={navigateBack} data-testid="backbutton-1n40" />;

  return (
    <StickyContainer data-testid="stickycontainer-ju8w">
      {backWouldStayInPatient ? (
        backButton
      ) : (
        <NoteModalActionBlocker isNavigationBlock>{backButton}</NoteModalActionBlocker>
      )}
      <VerticalDivider data-testid="verticaldivider-yzxo" />
      <StyledBreadcrumbs data-testid="styledbreadcrumbs-68ga">
        <NoteModalActionBlocker isNavigationBlock>
          <CategoryBreadcrumb />
        </NoteModalActionBlocker>
        <PatientBreadcrumb />
        {routeBreadcrumbs}
      </StyledBreadcrumbs>
    </StickyContainer>
  );
};
