import React, { memo, useContext } from 'react';
import { Platform } from 'react-native';
import { SBox } from '../../../common/s-components/layout/s-box';
import { SAvatar } from '../../../common/s-components/s-avatar';
import { SH2 } from '../../../common/s-components/typography/s-h2';
import { ContextStatics, ContextTrack } from '../../contexts';
import { fp as _ } from '../../../common/utils/fp';
import { DistributorIcon } from '../../../common/components/distributor-icon';
import { SArtistImageContainer } from '../../s-components/s-artist-image-container';

type TProps = {};

export const ArtistData: React.FC<TProps> = memo(() => {
  const { distributor } = useContext(ContextStatics);
  const { track } = useContext(ContextTrack);
  const image_url = _.path('image_url', track.data);
  const isIos = Platform.OS === 'ios';

  return (
    <>
      <SBox
        position="relative"
        height={80}
        mt={isIos ? 24 : 0}
        mb={16}
        width={80}
        alignSelf="center"
      >
        {image_url ? (
          <SArtistImageContainer>
            <SAvatar source={{ uri: image_url }} />
            {distributor ? (
              <SBox position="absolute" bottom={0}>
                <DistributorIcon variant={distributor} />
              </SBox>
            ) : null}
          </SArtistImageContainer>
        ) : null}
      </SBox>
      {track.data ? (
        <SBox height={56} alignItems="center" justifyContent="center" mb={14}>
          <SH2 numberOfLines={1} ellipsizeMode="tail" ml={2}>
            {track.data.name || 'N/A'}
          </SH2>
        </SBox>
      ) : null}
    </>
  );
});