import * as React from 'react'
import classNames from 'classnames'
import { Product } from '@dollarshaveclub/types'
import Imgix from 'react-imgix'

type Props = Readonly<{
  product?: Product
  title?: string
  subtitle?: string
  productTileName?: string
  miscContent?: JSX.Element | string
}>

export default function ProductTilePlain({
  product,
  title,
  subtitle,
  productTileName,
  miscContent,
}: Props) {
  const textArea = (
    <div
      className={classNames('ui-v-align__container ui-fill--vertical', {
        [`${productTileName}__text`]: productTileName,
      })}
    >
      {title && <div className="ui-v-align__item ui-text--md">{title}</div>}
      {subtitle && (
        <div className="ui-v-align__item ui-text--xs ui-color--paper-dark">
          {subtitle}
        </div>
      )}
    </div>
  )
  const productImage = product?.assets.productTile.file.url

  if (product) {
    return (
      <div
        className={classNames(
          'ui-product-tile--plain ui-bg__paper--supreme ui-border ui-border--light ui-border-radius ui-text--center',
          {
            [`${productTileName}__product-tile--plain`]: productTileName,
          }
        )}
      >
        <Imgix
          htmlAttributes={{
            alt: product.name,
          }}
          className={`ui-img ui-img--fluid${
            productTileName ? ` ${productTileName}__product-tile--plain` : ''
          }`}
          disableLibraryParam
          imgixParams={{ fit: 'crop' }}
          src={productImage}
          sizes="auto"
        />
        {textArea}
      </div>
    )
  } else if (miscContent) {
    return (
      <div
        className={classNames(
          'ui-product-tile--plain ui-fill ui-bg__paper-lightest ui-border ui-border--light ui-border-radius ui-text--center',
          {
            [`${productTileName}__product-tile--plain`]: productTileName,
          }
        )}
      >
        <div className="ui-product-tile__expand-height ui-product-tile__full-width">
          {miscContent}
        </div>
      </div>
    )
  } else {
    return (
      <div
        className={classNames(
          'ui-product-tile--plain ui-fill ui-bg__paper-lightest ui-border ui-border--light ui-border-radius ui-border--dashed',
          {
            [`${productTileName}__product-tile--plain`]: productTileName,
          }
        )}
      />
    )
  }
}