import React, { useContext } from 'react';
import { SBox } from '../../../common/s-components/layout/s-box';
import { SText } from '../../../common/s-components/typography/s-text';
import { ContextPerformance } from '../../contexts';
import { SSourceContainer } from '../../s-components/graph/s-source-container';
import { SPercentage } from '../../s-components/graph/s-percentage';
import { SDescription } from '../../s-components/graph/s-description';
import { SHeading } from '../../s-components/graph/s-heading';
import { SViewsNum } from '../../s-components/graph/s-views-num';
import { SH6 } from '../../../common/s-components/typography/s-h6';
import { fp as _ } from '../../../common/utils/fp';
import { SDateTrendContainer } from '../../s-components/graph/s-date-trend-container';
import { PositionTrendsLabel } from '../../../common/components/position-trends-label';
import { STrendContainer } from '../../s-components/graph/s-trend-container';
import { SkeletonsSmall } from '../../../common/components/skeleton-small';

type TProps = {};

export const GraphFooter: React.FC<TProps> = () => {
  const { performanceEntity, visibility, refresh, performance } = useContext(
    ContextPerformance
  );
  const dailyDate = _.path('daily.date', performanceEntity);
  const dailyViews = _.path('daily.views', performanceEntity);
  const dailyTrend = _.path('daily.trend', performanceEntity);
  const weeklyDate = _.path('weekly.date', performanceEntity);
  const weeklyViews = _.path('weekly.views', performanceEntity);
  const weeklyTrend = _.path('weekly.trend', performanceEntity);
  const percentage = _.path('source.percentage', performanceEntity);
  const market = _.path('source.market', performanceEntity);
  const sourceTitle = _.path('source.title', performanceEntity);
  const numSources = sourceTitle.split(',').length;

  const showSkeleton = visibility.skeleton && !refresh;

  return (
    <>
      <SDateTrendContainer>
        <SBox>
          {showSkeleton ? (
            <>
              <SkeletonsSmall mt={-4} />
              <SkeletonsSmall mt={4} width={32} />
            </>
          ) : (
            <>
              <SH6 color="periwinkleGray">{dailyDate}</SH6>
              <STrendContainer>
                <SViewsNum medium>{dailyViews}</SViewsNum>
                {dailyTrend ? (
                  <PositionTrendsLabel
                    showPercent
                    showZerroTrend
                    isTransparent
                    isReversed
                    trend={dailyTrend}
                  />
                ) : null}
              </STrendContainer>
            </>
          )}
        </SBox>
        <SBox>
          {showSkeleton ? (
            <>
              <SkeletonsSmall mt={-4} mr={42} />
              <SkeletonsSmall mt={4} width={32} />
            </>
          ) : (
            <>
              <SH6 color="periwinkleGray">{weeklyDate}</SH6>
              <STrendContainer>
                <SViewsNum medium>{weeklyViews}</SViewsNum>
                {weeklyTrend ? (
                  <PositionTrendsLabel
                    showPercent
                    showZerroTrend
                    isTransparent
                    isReversed
                    trend={weeklyTrend}
                  />
                ) : null}
              </STrendContainer>
            </>
          )}
        </SBox>
      </SDateTrendContainer>
      <SSourceContainer>
        {showSkeleton ? (
          <SBox alignItems="center" pb={23}>
            <SkeletonsSmall width={40} mt={6} />
            <SkeletonsSmall width={190} mt={12} />
          </SBox>
        ) : null}

        {_.path('data', performance) ? (
          <>
            <SPercentage medium>{percentage}</SPercentage>
            {numSources > 1 ? (
              <SDescription>
                of the views from this video in <SHeading>{market}</SHeading>{' '}
                are brought from each source: <SHeading>{sourceTitle}</SHeading>
                .
              </SDescription>
            ) : (
              <SDescription>
                of the views from this video in <SHeading>{market}</SHeading>
                {'\n'}
                are sourced from <SHeading>{sourceTitle}</SHeading>.
              </SDescription>
            )}
          </>
        ) : null}

        {_.path('error', performance) ? (
          <SBox height={73} pt={37}>
            <SText>Source data failed to load.</SText>
          </SBox>
        ) : null}
      </SSourceContainer>
    </>
  );
};