import * as React from 'react'
import { storiesOf } from '@storybook/react'
import MediaPicker from '../src/components/MediaPicker'
import { getGetPage } from '../src/mockData'

/**
 * if customComponent is specified, map result to it
 */
const mapResultToCustomComponent = (res, customComponent) => {
  console.log(res)
  if (customComponent) {
    return {
      ...res,
      media: res.media.map(m => ({
        ...m,
        component: customComponent
      }))
    }
  }
  return res
}

// loading
const getPage = (data, callback) => {
  return new Promise((resolve, reject) => {
    const page = getGetPage(100, 'image')({
      page: 0,
      limit: 10,
      searchParameters: ''
    })
    return resolve(page)
  }).then(res => callback(null, mapResultToCustomComponent(res, null)))
}

const onUpload = (data) => {
  alert('onUpload success')
  console.log(data)
}

storiesOf('Media Library.Picker', module).add('Default', () => (
  <MediaPicker
    getPage={getPage}
    type='image'
    onChange={console.log}
    uploadUrl='https://airbank-beta.siteone.cz/image-upload.php'
    uploadUrl={onUpload}
    value=''
  />
))


storiesOf('Media Library.Picker', module).add('With Image Provider', () => (
    <MediaPicker
      getPage={getPage}
      type='image'
      imageProvider={{
        url: "https://img.siteone.cz",
        baseUrl: "http://airbank.cz"
      }}
      onChange={console.log}
      uploadUrl='https://airbank-beta.siteone.cz/image-upload.php'
      uploadUrl={onUpload}
      value=''
    />
))