import React, { useState, useContext, useEffect, useCallback } from 'react'
import { styled, Element } from '@siteone/system-core'
import { LoadingIcon } from '@siteone/pagebuilder-components'
import { Text } from '@siteone/pagebuilder-ui'
import Directory from './Directory'
import AddFolder from './AddFolder'
import get from 'lodash/fp/get'

import Context from '../EventsContext'

const getCatAplCode = get('selectedCat.aplCode')
// const getFirstFolder = get('0.aplCode')
const getIsEditable = get('selectedCat.isEditable')

const Base = styled(Element)`
  width: 20%;
  border-right: 1px solid #ccc;
`

const Loading = styled(Element)`
  padding: 24px;
`

const DirectoryList = () => {
  const ctx = useContext(Context)
  const [directoryList, setDirectoryList] = useState([])
  const [selected, selectFolder] = useState({})
  const [isLoading, setIsLoading] = useState(false)
  const [error, setError] = useState(null)
  const isEditable = getIsEditable(ctx)
  const canAddFolder = isEditable && ctx.onCreateFolder

  /**
   * Realod list of folders
   * @param {string} selectFolder select this folder after reload list
   */
  const reloadList = useCallback(async (selectFolder = {}) => {
    console.log('--- reloadList ---')
    setIsLoading(true)
    // empty folder list
    setDirectoryList([])
    // load new list of folders
    try {
      const res = await ctx.onLoadFolderList(getCatAplCode(ctx))
      // set folder list
      setDirectoryList(Array.isArray(res) ? res : [])
      // select predefined folder or the first one
      onSelectFolder(selectFolder)
    } catch (e) {
      console.log(e)
      setError('Adresář se nepodařilo načíst')
      setTimeout(setError, 2000)
    }
    setIsLoading(false)
  }, [])

  /**
   * Select the folder and load new images.
   * Here you can load child folders in case of tree folder list
   * @param {string} aplCode
   */
  const onSelectFolder = item => {
    // setIsLoading(true)
    // onLoadFolderList(getCatAplCode(ctx), aplCode)
    if (item.id !== selected.id) {
      selectFolder(item)
      // load new media
      ctx.onSelectFolder(item)
    } else {
      selectFolder({})
      ctx.onSelectFolder({})
    }
    //.then(setIsLoading)
  }

  /**
   * Remove folder and reselect the first one
   * @param {string} id of folder
   */
  const onRemoveFolder = async id => {
    setIsLoading(true)
    try {
      await ctx.onRemoveFolder({ id, category: getCatAplCode(ctx) })
      // reload folder list
      reloadList()
    } catch (e) {
      console.log(e)
      setError('Adresář se nepodařilo smazat')
      setTimeout(setError, 2000)
    }
    setIsLoading(false)
  }

  const onCreateFolder = folderName => {
    return ctx.onCreateFolder(folderName).then(() => reloadList(selected))
  }

  // if file category is changed, load new directory list
  useEffect(() => {
    reloadList()
  }, [reloadList])

  if (directoryList.length === 0 && !canAddFolder) {
    return null
  }

  return (
    <Base>
      {directoryList.map((dir, key) => (
        <Directory
          {...dir}
          key={`dir-${key}`}
          onSelectFolder={onSelectFolder}
          removeFolder={onRemoveFolder}
          selected={selected}
        />
      ))}
      <Element>
        {canAddFolder && !isLoading && (
          <AddFolder
            onCreateFolder={onCreateFolder}
            selectedCat={getCatAplCode(ctx)}
          />
        )}
        {isLoading && (
          <Loading>
            <LoadingIcon size={24} />
          </Loading>
        )}
        {error && <Text type="danger" />}
      </Element>
    </Base>
  )
}

export default DirectoryList