import React from 'react'
import {connect} from 'react-redux'
import {Link} from 'react-router-dom'
import {compose} from 'recompose'

import {updateUserVideos} from '../actions/userVideos'
import {withDatabaseSubscribe} from './hocs'
import VideoPreviewsList from './VideoPreviewsList'

const mapStateToProps = ({userVideos}) => ({
  userVideos,
})

const enhanceSubs = compose(
  connect(mapStateToProps),
  withDatabaseSubscribe(
    'value',
    (props) => (`user-videos/${props.userId}`),
    (props) => (snapshot) => {
      props.dispatch(updateUserVideos({
        userId: props.userId,
        userVideosSnapshot: snapshot.val(),
      }))
    }
  ),
)

const UserVideos = ({baseUrl, isEditable, userId, userVideos}) => (
  <div>
    {isEditable ?
      <Link to='/videos/new'>New</Link> : ''
    }
    <VideoPreviewsList videoIds={userVideos[userId] ? Object.keys(userVideos[userId]) : []}/>
  </div>
)

export default enhanceSubs(UserVideos)

@@ -67,53 +67,40 @@
 rt %7B
-Link%7D from 'react-router-dom'%0Aimport %7Bcompose
+compose, withHandlers, withProps
 %7D fr
@@ -170,16 +170,79 @@
 Videos'%0A
+import %7BcreateVideo, VideoOwnerTypes%7D from '../actions/videos'%0A
 import %7B
@@ -331,16 +331,17 @@
 sList'%0A%0A
+%0A
 const ma
@@ -452,16 +452,360 @@
 Props),%0A
+  withProps((%7Bmatch%7D) =%3E (%7B%0A    userId: match.params.userId%0A  %7D)),%0A  withHandlers(%0A    %7B%0A      onNewVideoSubmit: props =%3E event =%3E %7B%0A        event.preventDefault()%0A        props.dispatch(createVideo(%0A          %7B%0A            videoOwnerType: VideoOwnerTypes.USER_VIDEO,%0A            ownerId: props.userId%0A          %7D)%0A        )%0A      %7D%0A    %7D%0A  ),%0A
   withDa
@@ -951,18 +951,29 @@
 rVideos(
-%7B
 %0A
+        %7B%0A  
         
@@ -998,24 +998,26 @@
 Id,%0A        
+ 
+ 
 userVideosSn
@@ -1040,16 +1040,18 @@
 .val(),%0A
+  
       %7D)
@@ -1107,16 +1107,34 @@
 ditable,
+ onNewVideoSubmit,
  userId,
@@ -1168,29 +1168,50 @@
     
-%7BisEditable ?
+%3Cform onSubmit=%7BonNewVideoSubmit%7D%3E
 %0A      %3C
 Link
@@ -1210,51 +1210,79 @@
    %3C
-L
 in
-k to='/videos/new'%3ENew%3C/Link%3E : ''%0A    %7D
+put%0A        type='submit'%0A        value='submit'%0A      /%3E%0A    %3C/form%3E
 %0A   

Make a user create video button