import React from 'react';
import * as Device from 'expo-device';
import { SBox } from '../../../common/s-components/layout/s-box';
import { SInfoTitle } from '../../../common/s-components/s-info-title';
import { SInfoTitleMedium } from '../../../common/s-components/s-info-title-medium';
import { SInfoParagraph } from '../../../common/s-components/s-info-paragraph';
import { theme } from '../../../app/theme';
import { UNBREAKABLE_SPACE } from '../../../common/constants';
import { checkIfLatestIos } from '../../../common/transducers';
import { Icon } from '../../../common/components/icon';
import { SRow } from '../../../common/s-components/layout/s-row';

export const InfoPopup: React.FC = () => {
  return (
    <SBox pt={6} pb={10}>
      <SBox alignItems="center">
        <SInfoTitle mb={13}>What is Playlist Information?</SInfoTitle>
        <SInfoParagraph center mb={10} px={16}>
          A{UNBREAKABLE_SPACE}recent overview of{UNBREAKABLE_SPACE}where a
          {UNBREAKABLE_SPACE}track is{UNBREAKABLE_SPACE}positioned in
          {UNBREAKABLE_SPACE}
          Spotify, Apple Music, and{UNBREAKABLE_SPACE}Amazon playlists. Each
          playlist showcases the{UNBREAKABLE_SPACE}date data was last received.
          There may be a{UNBREAKABLE_SPACE}delay depending on{UNBREAKABLE_SPACE}
          DSPs.
        </SInfoParagraph>
      </SBox>
      <SRow
        position="relative"
        mx={15}
        bg={theme.colorsRgba.lightAzureRadiance}
        borderRadius={4}
        mt={9}
      >
        <Icon
          top={8}
          left={9}
          name="info"
          color="azureRadiance"
          size={22}
          testID="i-icon"
        />
        <SInfoParagraph px={17} pt={9} pb={11}>
          Showing playlist streams until track{'\n'}streams are received for the
          playlist.
        </SInfoParagraph>
      </SRow>
      <SBox mt={24} mb={31} width={1} height={1} bg={theme.colors.snuff} />
      <SBox px={16}>
        <SInfoTitleMedium>For Sony Tracks</SInfoTitleMedium>
        <SInfoParagraph mb={15}>
          Streams displayed show how a{UNBREAKABLE_SPACE}track performed in
          {UNBREAKABLE_SPACE}a{UNBREAKABLE_SPACE}playlist in
          {UNBREAKABLE_SPACE}the{UNBREAKABLE_SPACE}past 7 days.
        </SInfoParagraph>
        <SInfoTitleMedium>For Non-Sony Tracks</SInfoTitleMedium>
        <SInfoParagraph>
          Streams are not available for most non-Sony tracks. Availability may
          be dependent on{UNBREAKABLE_SPACE}the{UNBREAKABLE_SPACE}selected
          market.
        </SInfoParagraph>
        {checkIfLatestIos(Device as { modelName: string }) ? (
          <SBox height={70} width="100%" />
        ) : null}
      </SBox>
    </SBox>
  );
};