import React from 'react';
import { compose, pure, withProps } from 'recompose';
import { View } from 'react-native';
import styled from '@ui/styled';
import { withProfileLikes, withRecentLikes } from '@data/likes';
import { RelatedContentWithoutData } from '@ui/RelatedContent';
import { H7, H5 } from '@ui/typography';
import ThumbnailCard from '@ui/ThumbnailCard';
import FeedView from '@ui/FeedView';
import MediaQuery from '@ui/MediaQuery';
import withUser from '@data/withUser';
import UserAvatarView from '@ui/UserAvatarView';

const CurrentUserAvatar = withUser(UserAvatarView);

const asHeaderText = styled(({ theme }) => ({
  textAlign: 'center',
  paddingHorizontal: theme.sizing.baseUnit,
  paddingVertical: theme.sizing.baseUnit,
}));

const RecentLikesHeaderText = asHeaderText(H7);
const YourLikesHeaderText = asHeaderText(H5);

const LikedContent = compose(
  styled({ backgroundColor: 'transparent', paddingTop: 0 }),
)(RelatedContentWithoutData);

const RecentLikes = withRecentLikes(props => (
  <View>
    <RecentLikesHeaderText>
      Check out some of the latest things from NewSpring
    </RecentLikesHeaderText>
    <LikedContent
      sectionTitle={null}
      {...props}
    />
  </View>
));

const YourLikesHeader = () => (
  <View>
    <MediaQuery maxWidth="md"><CurrentUserAvatar allowProfileImageChange /></MediaQuery>
    <YourLikesHeaderText>Your Likes</YourLikesHeaderText>
  </View>
);

const Likes = compose(
  pure,
  withProfileLikes,
  withProps(({ content = [], isLoading }) => ({
    numColumns: 1,
    ItemComponent: ThumbnailCard,
    ListHeaderComponent: (content.length || isLoading) ? YourLikesHeader : null,
    ListFooterComponent: content.length < 5 ? RecentLikes : null,
  })),
  styled({ paddingVertical: 0 }),
)(FeedView);

export default Likes;

@@ -526,16 +526,103 @@
 arView';
+%0Aimport Card, %7B CardContent %7D from '@ui/Card';%0Aimport PaddedView from '@ui/PaddedView';
 %0A%0Aconst 
@@ -699,24 +699,8 @@
 yled
-((%7B theme %7D) =%3E 
 (%7B%0A 
@@ -725,96 +725,9 @@
 r',%0A
-  paddingHorizontal: theme.sizing.baseUnit,%0A  paddingVertical: theme.sizing.baseUnit,%0A%7D)
+%7D
 );%0A%0A
@@ -995,24 +995,43 @@
  (%0A  %3CView%3E%0A
+    %3CPaddedView%3E%0A  
     %3CRecentL
@@ -1042,24 +1042,26 @@
 HeaderText%3E%0A
+  
       Check 
@@ -1109,16 +1109,18 @@
 ing%0A    
+  
 %3C/Recent
@@ -1132,24 +1132,42 @@
 HeaderText%3E%0A
+    %3C/PaddedView%3E%0A
     %3CLikedCo
@@ -1371,16 +1371,28 @@
 ry%3E%0A    
+%3CPaddedView%3E
 %3CYourLik
@@ -1436,25 +1436,282 @@
 derText%3E
-%0A  %3C/View
+%3C/PaddedView%3E%0A  %3C/View%3E%0A);%0A%0Aconst EmptyList = () =%3E (%0A  %3CCard%3E%0A    %3CCardContent%3E%0A      %3CPaddedView%3E%0A        %3CRecentLikesHeaderText%3E%0A          %7B'You don%5C't seem to have any likes yet '%7D%F0%9F%98%B2%0A        %3C/RecentLikesHeaderText%3E%0A      %3C/PaddedView%3E%0A    %3C/CardContent%3E%0A  %3C/Card
 %3E%0A);%0A%0Aco
@@ -1790,19 +1790,8 @@
 = %5B%5D
-, isLoading
  %7D) 
@@ -1878,62 +1878,58 @@
 nt: 
-(content.length %7C%7C isLoading) ? YourLikesHeader : null
+YourLikesHeader,%0A    ListEmptyComponent: EmptyList
 ,%0A  

Fix header spacing on profile tabs (#278)