import React, { FC, useRef, useState, useEffect } from 'react';
import { CarouselComponent, CarouselItem } from '../carousel-component';
import { TripCardsLayoutProps } from './types';
import {
  Container,
  TitleSection,
  TitleBar,
  TitleContent,
  Title,
  Subtitle,
  TitleLink,
  StaticCardsGrid,
  StyledLink
} from './styles';
import { ChevronRightIcon } from './assets';
import { tealiumTrackingHandler } from '../../helpers/tracking/TrackingHandler';
import { getPreferredEdition } from '../../utils/cookie';

export const TripCardsLayout: FC<TripCardsLayoutProps> = ({
  element,
  items,
  CardComponent,
  itemsPerPage,
  widthContainerConfig = {},
  widthItemConfig,
  maxWidthItemConfig,
  imgHeight,
  forceStaticGrid
}) => {
  const { titleurl, title, description } = element;
  const gridRef = useRef<HTMLDivElement>(null);
  const [hasOverflow, setHasOverflow] = useState(false);
  const [isTabletMobile, setIsTabletMobile] = useState(false);

  const isStaticGrid = items.length === 2 || forceStaticGrid;

  // Handle responsive breakpoint detection
  useEffect(() => {
    const mediaQuery = window.matchMedia('(max-width: 1024px)');
    const handleMediaChange = (e: MediaQueryListEvent | MediaQueryList) => {
      setIsTabletMobile(e.matches);
    };
    handleMediaChange(mediaQuery);
    mediaQuery.addEventListener('change', handleMediaChange);

    return () => {
      mediaQuery.removeEventListener('change', handleMediaChange);
    };
  }, []);

  useEffect(
    () => {
      if (!isStaticGrid || !gridRef.current) {
        setHasOverflow(false);
        return;
      }

      const checkOverflow = () => {
        if (gridRef.current) {
          const isOverflowing =
            gridRef.current.scrollWidth > gridRef.current.clientWidth;
          setHasOverflow(isOverflowing);
        }
      };

      checkOverflow();
      const resizeObserver = new ResizeObserver(checkOverflow);
      resizeObserver.observe(gridRef.current);

      return () => {
        resizeObserver.disconnect();
      };
    },
    [isStaticGrid, items.length]
  );

  const shouldUseCarousel =
    (isTabletMobile && items.length >= 3) || !isStaticGrid || hasOverflow;

  const onTitleClick = () => {
    tealiumTrackingHandler(
      `trip cards component: ${title}`,
      'navigation',
      'click',
      undefined,
      undefined,
      {
        app_content_location: getPreferredEdition()
      }
    );
  };

  return (
    <Container data-testid="trip-cards-container" {...widthContainerConfig}>
      <TitleSection data-testid="title-section">
        <TitleBar
          data-testid="title-bar"
          applyRightPadding={!!widthContainerConfig.mobile}
        >
          <TitleContent data-testid="title-content">
            {titleurl ? (
              <StyledLink
                href={titleurl}
                target="_blank"
                rel="noopener noreferrer"
                onClick={onTitleClick}
                data-testid="trip-cards-title-link"
              >
                <Title data-testid="trip-cards-title">{title}</Title>
              </StyledLink>
            ) : (
              <Title data-testid="trip-cards-title">{title}</Title>
            )}
            <Subtitle data-testid="trip-cards-subtitle">{description}</Subtitle>
          </TitleContent>
          {titleurl && (
            <TitleLink
              href={titleurl}
              target="_blank"
              rel="noopener noreferrer"
              data-testid="title-link"
              onClick={onTitleClick}
            >
              <ChevronRightIcon />
            </TitleLink>
          )}
        </TitleBar>
      </TitleSection>

      {!shouldUseCarousel ? (
        <StaticCardsGrid data-testid="static-cards-grid" ref={gridRef}>
          {items.map(item => (
            <CardComponent
              imgHeight={imgHeight}
              key={item.id}
              card={item.data}
              isStaticGrid={true}
              forceStaticGrid={forceStaticGrid}
            />
          ))}
        </StaticCardsGrid>
      ) : (
        <CarouselComponent
          items={items.map(item => (
            <CarouselItem
              key={item.id}
              widthItemConfig={widthItemConfig}
              maxWidthItemConfig={maxWidthItemConfig}
            >
              <CardComponent card={item.data} imgHeight={imgHeight} />
            </CarouselItem>
          ))}
          options={{
            itemsPerPage
          }}
          showArrows={!isStaticGrid}
          showDots={true}
        />
      )}
    </Container>
  );
};