import React, { FC } from 'react';
import { Placeholder } from '@times-components/image';
import {
  CardContainer,
  ImageContainer,
  CardContent,
  TopContainer,
  BottomContainer,
  DataPointsList,
  DataPoint,
  PriceSection,
  PriceContainer
} from './styles';
import {
  SkeletonLine,
  SkeletonHeadline,
  SkeletonPrice,
  SkeletonButton
} from './skeletonStyles';
import { ImageHeightConfig } from './types';
import { defaultTripCardImgHeight } from './helpers';

export const SkeletonCard: FC<{
  isStaticGrid?: boolean;
  imgHeight?: ImageHeightConfig;
  forceStaticGrid?: boolean;
}> = ({ isStaticGrid, imgHeight = {}, forceStaticGrid }) => {
  return (
    <CardContainer data-testid="skeleton-card-container">
      <ImageContainer
        data-testid="skeleton-image-container"
        isStaticGrid={isStaticGrid && !forceStaticGrid}
        {...{ ...defaultTripCardImgHeight, ...imgHeight }}
      >
        <Placeholder />
      </ImageContainer>
      <CardContent data-testid="skeleton-card-content">
        <TopContainer data-testid="skeleton-top-container">
          <SkeletonHeadline data-testid="skeleton-headline" />
          <DataPointsList data-testid="skeleton-data-points-list">
            {[1, 2, 3, 4].map(i => (
              <DataPoint key={i} data-testid={`skeleton-data-point-${i}`}>
                <SkeletonLine width="80px" data-testid={`skeleton-line-${i}`} />
              </DataPoint>
            ))}
          </DataPointsList>
        </TopContainer>
        <BottomContainer data-testid="skeleton-bottom-container">
          <PriceSection data-testid="skeleton-price-section">
            <PriceContainer data-testid="skeleton-price-container">
              <SkeletonLine
                width="40px"
                marginBottom="4px"
                data-testid="skeleton-price-label"
              />
              <SkeletonPrice data-testid="skeleton-price" />
            </PriceContainer>
          </PriceSection>
          <SkeletonButton as="div" data-testid="skeleton-button" />
        </BottomContainer>
      </CardContent>
    </CardContainer>
  );
};