import React, { memo, useContext } from 'react';
import { SBox } from '../../../common/s-components/layout/s-box';
import { SText } from '../../../common/s-components/typography/s-text';
import { TData } from '../../types';
import { SkeletonNameArtist1 } from './skeletons/skeleton-name-artist1';
import { SkeletonNameArtist2 } from './skeletons/skeleton-name-artist2';
import { SH1 } from '../../../common/s-components/typography/s-h1';
import { SkeletonAlbumName } from './skeletons/skeleton-album-name';
import {
  ContextStatics,
  ContextTrack,
  ContextVisibility,
} from '../../contexts';
import { fp as _ } from '../../../common/utils/fp';

type TProps = {};

export const TrackInfo: React.FC<TProps> = memo(() => {
  const { visibility } = useContext(ContextVisibility);
  const { data } = useContext(ContextStatics);
  const { track: trackEntity } = useContext(ContextTrack);
  const { artist, name } = (trackEntity.data || {}) as TData;
  const album_name = _.path('album_name', data);
  const { track, statics } = visibility;

  if (visibility.offline || visibility.track.error) {
    return null;
  }

  return (
    <SBox height={112}>
      <SBox alignItems="center" px={23} mt={0} pt={0}>
        <SBox height={56}>
          {track.skeleton ? <SkeletonNameArtist1 /> : null}
          {track.skeleton ? <SkeletonNameArtist2 /> : null}
          {track.data ? (
            <SBox height={56} alignItems="center" justifyContent="center">
              <SH1 numberOfLines={1} ellipsizeMode="tail">
                {name || 'N/A'}
              </SH1>
              <SText mt={13} mb={7} numberOfLines={1} ellipsizeMode="tail">
                {artist || 'N/A'}
              </SText>
            </SBox>
          ) : null}
        </SBox>
        <SBox height={37}>
          {statics.skeleton ? (
            <SkeletonAlbumName />
          ) : (
            <SBox mt={3} height={34}>
              <SText px={1} numberOfLines={1} ellipsizeMode="tail">
                {album_name || 'N/A'}
              </SText>
            </SBox>
          )}
        </SBox>
      </SBox>
    </SBox>
  );
});