import React, { useContext, memo } from 'react';
import { Dimensions } from 'react-native';
import { ContextHeader } from '../../context';
import { fp as _ } from '../../../common/utils/fp';
import { SBox } from '../../../common/s-components/layout/s-box';
import { SHeaderBg } from '../../../track/s-components/s-header-bg';
import { theme } from '../../../app/theme';
import { SHeaderGradient } from '../../../track/s-components/s-header-gradient';

const { width: DEVICE_WIDTH } = Dimensions.get('window');

export const HeaderBackground = memo(() => {
  const props = useContext(ContextHeader);

  const { entity, playlistVisibility, tracklistVisibility, offline } = props;
  const imageUrl = _.path('data.image_url', entity);
  const showPage =
    !offline &&
    !playlistVisibility.error &&
    !playlistVisibility.offline &&
    !tracklistVisibility.offline;

  if (!showPage) return null;

  return (
    <SBox position="relative" height={400}>
      {playlistVisibility.data ? (
        <>
          {imageUrl ? (
            <SHeaderBg
              top={0}
              source={{ uri: imageUrl }}
              width={DEVICE_WIDTH}
            />
          ) : (
            <SBox
              height={375}
              width="100%"
              position="absolute"
              top={0}
              bg={theme.colors.lavenderGray}
            />
          )}

          <SHeaderGradient
            height={375}
            top={0}
            colors={theme.gradients.trackAvatar}
            location={[0, 0.54, 1]}
          />
          <SHeaderGradient
            height={146}
            top={0}
            colors={theme.gradients.trackAvatar2}
          />
          <SHeaderGradient
            top={273}
            height={102}
            colors={theme.gradients.trackShadow}
            location={[0, 0.2, 1]}
          />
        </>
      ) : null}
    </SBox>
  );
});