import React, { useState } from 'react'
import { useParams } from 'react-router-dom'
import TemplateModalWrapper from './TemplateModalWrapper'
import MissingRequirements from '../Banners/MissingRequirements'
import fetchIndividualTemplates from '../../api/fetchIndividualTemplates'
import styles from './TemplatePreviewModal.module.scss'

const TemplatePreviewModal = ({ onCloseCallback, templateId, templateKitId, existingImports, templateScreenShotUrl, templatePreviewTitle, installRequirements }) => {
  // This gets the Installed Template Kit ID number from the URL string:
  const { id } = useParams()
  // We use a 'refresh' timestamp to allow easy page reloading. We just have to setRefresh(timestamp) and the
  // data on this page will get a refresh from the server. We do a data refresh after any missing requirements
  // are installed in the modal.
  const [refresh, setRefresh] = useState(null)
  // This gets the Installed Kit details from an API call:
  const installedKit = fetchIndividualTemplates({ id, refresh })

  return (
    <TemplateModalWrapper templateId={templateId} templateKitId={templateKitId} existingImports={existingImports} templatePreviewTitle={templatePreviewTitle} isOpen onCloseCallback={onCloseCallback}>
      {installRequirements && !installedKit.loading && !installedKit.error && installedKit.data ? (
        <div className={styles.missingRequirementsWrapper}>
          <MissingRequirements
            settings={installedKit.data.requirements.settings}
            theme={installedKit.data.requirements.theme}
            plugins={installedKit.data.requirements.plugins}
            requiredCss={installedKit.data.requirements.css}
            templateKitId={id}
            completeCallback={() => {
              // When missing requirements are actioned we get a callback here.
              // We set a new refresh value which results in a new API call and a complete data refresh of this page
              // (which includes updated state on missing plugin requirements from our vendored import code)
              setRefresh(new Date().getTime())
            }}
          />
        </div>
      ) : null}
      <img className={styles.previewTemplate} src={templateScreenShotUrl} alt={templatePreviewTitle} />
    </TemplateModalWrapper>
  )
}

export default TemplatePreviewModal
