import React, { useEffect, useState } from 'react'
import Button from './Button'
import useGlobalConfig from '../Contexts/useGlobalConfig'
import ExternalLinkButton from './ExternalLinkButton'
import ImportElementorTemplateImages from '../Actions/ImportElementorTemplateImages'
import { getImportedTemplateUrl } from '../../utils/linkGenerator'
import importFreeBlock from '../../api/importFreeBlock'

const ImportTemplateInBackground = ({ blockId, jsonUrl, importAgain, insertToPage, completeCallback }) => {
  const { loading, error, data } = importFreeBlock({ blockId, jsonUrl, importAgain, insertToPage })

  useEffect(() => {
    if (!loading && !error && data && data.imported_template_id) {
      // If we have finished loading (i.e. importing the template has finished)
      completeCallback(data)
    }
  }, [loading])

  return null
}

const GetTemplateData = ({ jsonUrl, completeCallback }) => {
  const [jsonData, setJsonData] = useState(null)

  useEffect(() => {
    if (jsonData) {
      completeCallback(jsonData)
    }
  }, [jsonData])

  useEffect(() => {
    fetch(jsonUrl, {
      method: 'get'
    }).then(response => {
      response.json().then(responseJson => {
        setJsonData(responseJson)
      })
    })
  }, [])

  return null
}

/**
 * Helper to render a series of buttons to install a template kit.
 *
 * @param blockId
 * @param jsonUrl
 * @param importedBlockId
 * @returns {*}
 * @constructor
 */
const ImportFreeBlockButton = ({ blockId, jsonUrl, importedBlockId }) => {
  // Determines what type of mode we're in, this changes the button we choose to render on each templates kit.
  const { addDownloadedItem, getMagicButtonMode } = useGlobalConfig()
  const magicButtonMode = getMagicButtonMode()
  const isElementorMagicMode = magicButtonMode && magicButtonMode.mode === 'elementorMagicButton'

  // Here we store the ID number of the latest imported template.
  // We use this ID further down to generate a URL to the installed template and show that in a button to the user
  const [importedTemplateId, setImportedTemplateId] = useState(importedBlockId)
  // This is the JSON data for the Template we wish to import:
  const [templateDataToImport, setTemplateDataToImport] = useState(null)
  // This is the progress percent (stored as 0.4 for 40%) for the import process, reflected in the button label:
  const [importProgress, setImportProgress] = useState(0)
  // This is the import state we used to control what buttons are visible / what react hooks we mount in:
  const [importState, setImportState] = useState('idle')
  // This decides if we should import the templatea gain a second time.
  const [importTemplateAgain, setImportTemplateAgain] = useState(false)

  // This is the button the user clicks when they wish to start importing a template:
  let StartImportButton = null
  if (isElementorMagicMode) {
    // We're in magic button mode. Always show a 'insert template' button even if already imported before
    StartImportButton = (
      <Button
        type='primary'
        label='Insert Template'
        icon='plus'
        onClick={() => {
          setImportProgress(0)
          setImportState('importingFetchJsonData')
        }}
      />
    )
  } else if (importedTemplateId) {
    // We've imported this blog before, show an import again button
    StartImportButton = (
      <Button
        type='ghost'
        label='Import Again'
        icon='plus'
        onClick={() => {
          setImportProgress(0)
          setImportTemplateAgain(true)
          setImportState('importingFetchJsonData')
        }}
      />
    )
  } else {
    StartImportButton = (
      <Button
        type='primary'
        label='Import Template'
        icon='plus'
        onClick={() => {
          setImportProgress(0)
          setImportState('importingFetchJsonData')
        }}
      />
    )
  }
  // This is the importing button we display to the user during the import process:
  const ImportingButton = <Button type='primary' label={`Importing ${Math.round(importProgress * 100)}%`} icon='updateSpinning' disabled />
  // This is the button that goes to imported template:
  const ImportedTemplateButton = <ExternalLinkButton href={getImportedTemplateUrl({ importedTemplateId })} type='primary' label='View Template' icon='eye' openNewWindow />

  return (
    <>
      {importedTemplateId && !isElementorMagicMode ? ImportedTemplateButton : null}
      {importState === 'idle' ? StartImportButton : null}
      {importState === 'importingFetchJsonData' || importState === 'importingImages' || importState === 'importingTemplate' ? ImportingButton : null}

      {importState === 'importingFetchJsonData'
        ? (
          <GetTemplateData
            jsonUrl={jsonUrl}
            completeCallback={(data) => {
            // This means we've collected the Elementor JSOn data correctly, time to import these images:
              setTemplateDataToImport(data)
              setImportState('importingImages')
            }}
          />
          )
        : null}
      {importState === 'importingImages'
        ? (
          <ImportElementorTemplateImages
            templateData={templateDataToImport}
            progressCallback={(importProgress) => {
              setImportProgress(importProgress)
            }}
            completeCallback={() => {
            // This means we've imported the template images correctly, time to fire off the final json import.
              setImportState('importingTemplate')
            }}
          />
          )
        : null}
      {importState === 'importingTemplate'
        ? (
          <ImportTemplateInBackground
            blockId={blockId}
            jsonUrl={jsonUrl}
            importAgain={importTemplateAgain}
            insertToPage={isElementorMagicMode}
            completeCallback={(data) => {
            // This means the final template import has been completed and we have a template ID ready to go
              if (data && data.imported_template_id) {
                setImportProgress(1)
                addDownloadedItem({ humaneId: blockId, importedId: data.imported_template_id })
                setTimeout(() => {
                  setImportedTemplateId(data.imported_template_id)
                  setImportState('idle')
                }, 300)

                // Fire off the magic button insert callback if it exists
                if (isElementorMagicMode && magicButtonMode.insertCallback && typeof magicButtonMode.insertCallback === 'function') {
                  magicButtonMode.insertCallback(data)
                }
              }
            }}
          />
          )
        : null}
    </>
  )
}

export default ImportFreeBlockButton