import React, { useRef, useState } from 'react'
import GridItem from '../Grid/GridItem'
import ItemCard from '../Card/ItemCard'
import ButtonWrapper from '../Buttons/ButtonWrapper'
import Button from '../Buttons/Button'
import ImportSingleTemplate from '../Buttons/ImportSingleTemplate'
import TemplatePreviewModal from '../Modal/TemplatePreviewModal'
import styles from './TemplateItemCardWrapper.module.scss'

const TemplateItemCardWrapper = ({ template }) => {
  const [isActivationModelOpen, setOpenActivationModal] = useState(false)
  const cardRef = useRef(null)
  const templateId = template.id
  const templateKitId = template.template_kit_id
  const templateName = template.name
  const templateScreenShotUrl = template.screenshot_url
  const templateExistingImports = template.imports

  const [blockImport, setBlockImport] = useState(template.unmet_requirements && template.unmet_requirements.length > 0)

  const description = template.metadata.additional_template_information ? template.metadata.additional_template_information.join(' ') : ''

  return (
    <GridItem colWidthPercentage={33} key={templateId}>
      <ItemCard
        Images={(
          <div className={styles.imageWrapper}>
            <img src={templateScreenShotUrl} alt={templateName} className={styles.image} />
            <div
              className={styles.expandButton}
              ref={cardRef}
              onClick={(e) => {
                if (e.target === cardRef.current) {
                  setOpenActivationModal(true)
                }
              }}
            >
              {isActivationModelOpen
                ? (
                  <TemplatePreviewModal
                    templateScreenShotUrl={templateScreenShotUrl}
                    templatePreviewTitle={templateName}
                    templateKitId={templateKitId}
                    templateId={templateId}
                    existingImports={templateExistingImports}
                    onCloseCallback={() => {
                      setOpenActivationModal(false)
                    }}
                    installRequirements={blockImport}
                  />
                  )
                : null}
              <Button
                type='ghost'
                icon='expand'
                onClick={() => {
                  setOpenActivationModal(true)
                }}
              />
            </div>
          </div>
        )}
        Buttons={(
          <>
            {blockImport
              ? (
                <>
                  <p className={styles.unmetRequirementsMessage}>
                    {template.unmet_requirements.join(' ')}
                  </p>
                  <Button type='warning' label='Ignore Requirements' icon='cross' onClick={() => setBlockImport(false)} />
                </>
                )
              : (
                <ButtonWrapper>
                  <ImportSingleTemplate
                    templateKitId={templateKitId}
                    templateId={templateId}
                    existingImports={templateExistingImports}
                  />
                </ButtonWrapper>
                )}
          </>
        )}
        title={templateName}
        description={description}
      />
    </GridItem>
  )
}

export default TemplateItemCardWrapper