import React, { CSSProperties } from 'react'
import { browserCheck } from '@ta-interaktiv/browsercheck'
import { placeholderString, getAspectRatioPadding } from '../assets'
import './styles.scss'

// Image with Mobile-Desktop-Switch
export interface ImageProps {
  /** File/s to be displayed */
  file?: string | [string, string]
  /** Alternate text for image.If none is provided image gets role presentation  */
  alt?: string
  /** CSS class for the Container */
  className?: string
  /** Inline css for the Image */
  style?: CSSProperties
  /** Title to show above the Image */
  title?: string | JSX.Element
  /** Subtitle to show below title */
  sub?: string | JSX.Element
  /** Source to show below the image */
  source?: string | JSX.Element
  /** Proportions for the Image f.e.: "16:9" */
  aspectRatio?: string
  /** Specific height for the Image both |  [mobile,desktop] */
  height?: string | [string, string]
  /** makes the image stick out of the text column */
  oversized?: boolean
  /** Child elements to be placed below subline and above image */
  children?: JSX.Element
  /** Places title and subline below image above source */
  imageFirst?: boolean
  /** any other properties get applied to the image */
  props?: any
  [key: string]: any
}
/** Displays an image element. If two image files have been provided one is rendered on desktop/tablets and one on mobile screens. Title, subtitle and source are displayed if provided. If no files are provided a placeholder is rendered.  */
export const Image = ({
  file,
  alt,
  className = 'cbImage',
  style,
  title,
  sub,
  source,
  height,
  aspectRatio,
  oversized,
  children,
  imageFirst = false,
  ...props
}: ImageProps) => {
  let src = ''
  let h = 'auto'

  if (file) {
    if (typeof file === 'object') {
      if (browserCheck.isMobile) {
        src = file[0].toString()
      } else {
        src = file[1].toString()
      }
    } else {
      src = file.toString()
    }
  }
  if (typeof height === 'object') {
    if (browserCheck.isMobile) {
      h = height[0]
    } else {
      h = height[1]
    }
  } else {
    h = height || '100%'
  }

  const ImgElement = ({ imageSrc }: { imageSrc?: string }) => {
    if (!imageSrc || imageSrc === '') {
      return (
        <img
          src={placeholderString}
          style={{
            ...{
              position: 'absolute',
              width: '100%',
              height: '100%'
            }
          }}
        />
      )
    }

    return (
      <img
        src={imageSrc}
        className='image'
        style={{
          ...style,
          ...(aspectRatio || height
            ? {
                position: 'absolute',
                top: '0',
                left: '0',
                right: '0',
                bottom: '0',
                height: '100%',
                width: '100%',
                objectFit: 'cover'
              }
            : { width: '100%' })
        }}
        alt={alt}
        role={alt ? undefined : 'presentation'}
        {...props}
      />
    )
  }

  const titleElement = <div className='title'>{title}</div>
  const subElement = <div className='sub'>{sub}</div>
  const sourceElement = <div className='source'>{source}</div>

  if (src === '' && !height && !aspectRatio) aspectRatio = '16:9'

  return (
    <div className={className + ' ' + (oversized ? 'oversized' : '')}>
      <figure>
        {!imageFirst && (
          <figcaption>
            {title && titleElement}
            {sub && subElement}
          </figcaption>
        )}
        {children && !imageFirst && children}

        <div
          style={
            aspectRatio || height
              ? {
                  paddingBottom: aspectRatio
                    ? getAspectRatioPadding(aspectRatio)
                    : h,
                  position: 'relative',
                  lineHeight: '0'
                }
              : { lineHeight: '0' }
          }
        >
          <ImgElement imageSrc={src} />
        </div>
        {children && imageFirst && children}
        {imageFirst && (
          <figcaption>
            {title && titleElement}
            {sub && subElement}
            {source && sourceElement}
          </figcaption>
        )}
        {source && !imageFirst && sourceElement}
      </figure>
    </div>
  )
}