import React from 'react';
import { SBox } from '../../common/s-components/layout/s-box';
import { SText } from '../../common/s-components/typography/s-text';
import { SInfoTitle } from '../../common/s-components/s-info-title';
import { theme } from '../../app/theme';
import { SInfoParagraph } from '../../common/s-components/s-info-paragraph';
import { TState } from '../types';
import { fp as _ } from '../../common/utils/fp';
import { formatHoursDate } from '../../common/transducers';

type TProps = {
  data: TState['marketsData'];
  isNmf: boolean;
  latestDate: TState['latestDate'];
};

export const InfoNmfPopup: React.FC<TProps> = props => {
  const { data, isNmf, latestDate } = props;
  const topMarkets = _.path('markets_delayed', data.data);
  const updatedDate = _.path('last_updated', data.data);
  const hhLatestDate = _.path('data', latestDate);
  const date = isNmf ? updatedDate : hhLatestDate;
  const isReceivedAll = !_.length(topMarkets);
  const title = isNmf ? 'New Music Friday' : 'Hot Hits';

  return (
    <SBox>
      <SBox alignItems="center" px={16} pt={5}>
        <SInfoTitle mb={9}>{title}</SInfoTitle>
        <SInfoParagraph px={10} mb={19}>
          Data last received: {formatHoursDate(date!)}.
        </SInfoParagraph>
      </SBox>
      <SBox mb={16} width={1} height={1} bg={theme.colors.snuff} />
      <SBox px={16} pb={isNmf ? 9 : 0} mb={isNmf ? 0 : -7}>
        <SInfoParagraph py={16}>
          <SText color="richBlack" bold>
            Top Markets{' '}
          </SText>
          list compiled by aggregating all Sony Spotify streams for the past 28
          days.
        </SInfoParagraph>
        {isNmf ? (
          isReceivedAll ? (
            <SInfoParagraph>All markets received.</SInfoParagraph>
          ) : (
            <SInfoParagraph>
              <SText color="richBlack" bold>
                Not yet updated:{' '}
              </SText>
              {topMarkets!.join(', ').toUpperCase()}.
            </SInfoParagraph>
          )
        ) : null}
      </SBox>
    </SBox>
  );
};