import React from 'react';
import { Undefinable } from 'tsdef';
import { theme } from '../../app/theme';
import { SH6 } from '../../common/s-components/typography/s-h6';
import { SH3 } from '../../common/s-components/typography/s-h3';
import { TTrendEntity } from '../../common/types';
import { SCard } from '../s-components/s-card';
import { SCardGradient } from '../s-components/s-card-gradient';
import { SDateContainer } from '../s-components/s-date-container';
import { SRow } from '../../common/s-components/layout/s-row';
import { SDateBgContainer } from '../s-components/s-date-bg-container';
import { SBox } from '../../common/s-components/layout/s-box';
import { PositionTrendsLabel } from '../../common/components/position-trends-label';
import { fp as _ } from '../../common/utils/fp';

type TProps = {
  title: string;
  value: Undefinable<string>;
  trend?: Partial<TTrendEntity>;
  date?: string;
  showCard?: boolean;
};

export const MarketKpiCard: React.FC<TProps> = props => {
  const { title, value, trend, date, showCard } = props;

  if (!showCard) return null;

  return (
    <SCard testID="market-kpi-card">
      <SCardGradient colors={theme.gradients.kpiCard} location={[0, 0.65, 1]} />
      <SBox position="relative" zIndex={4}>
        <SH6 mb={6} color={theme.colors.periwinkleGray}>
          {title}
        </SH6>
        <SRow>
          <SH3 mr={6} medium letterSpacing={1} testID="market-kpi-streams">
            {value || 'N/A'}
          </SH3>
          {trend ? (
            <SBox mt={_.path('value', trend) === 0 ? 2 : 3}>
              <PositionTrendsLabel
                showPercent
                showZerroTrend
                isTransparent
                trend={trend}
                isReversed
              />
            </SBox>
          ) : null}
        </SRow>
      </SBox>
      {date ? (
        <>
          <SDateBgContainer />
          <SDateContainer>
            <SH6 testID="market-kpi-date" color={theme.colors.periwinkleGray}>
              {date}
            </SH6>
          </SDateContainer>
        </>
      ) : null}
    </SCard>
  );
};

MarketKpiCard.defaultProps = {
  showCard: true,
};