import { storiesOf } from '@storybook/react'
import React from 'react'
import MediaLibrarySearchContainer from '../src/components/MediaLibrarySearch/MediaLibrarySearchContainer'
import { getGetPage } from '../src/mockData'

const onConfirm = image => {
  console.log(image)
}

const fakeAPI = data => {
  return new Promise(resolve => {
    setTimeout(() => {
      console.log('ok', data)
      resolve()
    }, 500)
  })
}

const getPage = (data, callback) =>
  getGetPage(100, 'image')(data)
    .then(res => callback(null, res))
    .catch(err => callback(err, null))

const getPageIcon = (data, callback) =>
  getGetPage(200, 'icon')(data)
    .then(res => callback(null, res))
    .catch(err => callback(err, null))

const config = {
  search: [
    {
      type: 'text',
      name: 'searchTerm',
      placeholder: 'Hledat média..',
    },
  ],
  multiselect: false,
  limit: 30,
}

const configIcon = {
  search: [
    {
      type: 'text',
      name: 'searchTerm',
      placeholder: 'Hledat média..',
    },
  ],
  multiselect: false,
  limit: 200,
}

const filesCategories = [
  {
    aplCode: 'media-library',
    name: 'Moje soubory',
    isEditable: true,
  },
  {
    aplCode: 'novinky',
    name: 'Novinky',
    isEditable: false,
  },
  {
    aplCode: 'stranky',
    name: 'Stránky',
    isEditable: false,
  },
  {
    aplCode: 'ostatni',
    name: 'Ostatní',
    isEditable: true,
  },
]

const directoryList = [
  {
    aplCode: 'projektory',
    name: 'Projektory',
    id: 1,
  },
  {
    aplCode: 'televize',
    name: 'Televize',
    id: 2,
  },
]

const onLoadFolderList = (category, parentFolder) => {
  console.log('onLoadFolderList')
  return new Promise(resolve => {
    setTimeout(() => {
      resolve(directoryList)
    }, 1000)
  })
}

const onUpload = (data, selectedCat, selectedFolder) => {
  console.log(data, selectedCat, selectedFolder)
  return new Promise(resolve => {
    setTimeout(() => {
      alert('onUpload success, with promise')
      resolve()
    }, 1000)
  })
}

const allAPI = {
  onUpload: onUpload,
  onRemoveFile: fakeAPI,
  onUpdateImage: fakeAPI,
  onCreateFolder: fakeAPI,
  onRemoveFolder: (a, b, c) => console.log(a, b, c),
  onLoadFolderList: onLoadFolderList,
  uploadExtraData: { s1token: 'test' },
}

storiesOf('Media Library.Search', module).add('Default', () => (
  <MediaLibrarySearchContainer
    getPage={getPage}
    config={config}
    onConfirm={onConfirm}
    uploadUrl="https://airbank-beta.siteone.cz/image-upload.php"
    filesCategories={filesCategories}
    {...allAPI}
  />
))

storiesOf('Media Library.Search', module).add('With image-only support', () => (
  <MediaLibrarySearchContainer
    getPage={getPage}
    config={config}
    onConfirm={onConfirm}
    uploadUrl="https://airbank-beta.siteone.cz/image-upload.php"
    filesCategories={filesCategories}
    /* LOTTIE: use constants */
    accept={['.png', '.jpg', '.jpeg', '.gif']}
    {...allAPI}
  />
))

storiesOf('Media Library.Search', module).add('With Lottie support', () => (
  <MediaLibrarySearchContainer
    getPage={getPage}
    config={config}
    onConfirm={onConfirm}
    uploadUrl="https://airbank-beta.siteone.cz/image-upload.php"
    filesCategories={filesCategories}
    /* LOTTIE: use constants */
    accept={['.png', '.jpg', '.jpeg', '.gif', '.json']}
    {...allAPI}
  />
))

storiesOf('Media Library.Search', module).add('With Image Provider', () => (
  <MediaLibrarySearchContainer
    getPage={getPage}
    config={config}
    onConfirm={onConfirm}
    uploadUrl="https://airbank-beta.siteone.cz/image-upload.php"
    filesCategories={filesCategories}
    imageProvider={{
      url: 'https://img.siteone.cz',
      baseUrl: 'http://airbank.cz',
    }}
  />
))

storiesOf('Media Library.Search', module).add('Editable with folders', () => (
  <MediaLibrarySearchContainer
    getPage={getPage}
    config={config}
    onConfirm={onConfirm}
    uploadUrl="https://airbank-beta.siteone.cz/image-upload.php"
    withFolders={true}
    multiselect={true}
    filesCategories={filesCategories}
    {...allAPI}
  />
))

storiesOf('Media Library.Search', module).add('Icons', () => (
  <MediaLibrarySearchContainer
    getPage={getPageIcon}
    config={configIcon}
    onConfirm={onConfirm}
    withControls={false}
  />
))