import React from 'react'

import type { TopperFragment } from '@financial-times/cp-content-pipeline-client'

import {
  AliasedBreakpoints,
  BreakpointGetter,
  Sources,
} from '../content-tree/ImageSet'
import { PictureOverrideWrapper } from '../ImageOverrideWrappers'
import { ContentTree } from '@financial-times/content-tree'

const topperGetBreakpointsMap: Partial<
  Record<TopperFragment['__typename'], BreakpointGetter>
> = {
  SplitTextTopper(image) {
    switch (image.format) {
      case 'square':
        return [{ maxWidth: 490 }, { minWidth: 740, maxWidth: 1220 }]
      case 'standard':
        return { minWidth: 491, maxWidth: 739 }
      case 'wide':
        return {
          normal: { minWidth: 1221, maxWidth: 1440 },
          widest: { minWidth: 1441 },
        }
    }
  },

  FullBleedTopper(image) {
    switch (image.format) {
      case 'square':
        return { maxWidth: 490 }
      case 'standard':
        return { minWidth: 491, maxWidth: 1219 }
      case 'wide':
        return {
          normal: { minWidth: 1220, maxWidth: 1439 },
          wide: { minWidth: 1440, maxWidth: 1919 },
          wideL: { minWidth: 1920 },
        }
    }
  },

  DeepPortraitTopper(image) {
    switch (image.format) {
      case 'portrait':
        return {
          small: { maxWidth: 490 },
          normal: { minWidth: 491, maxWidth: 1440 },
          wide: { minWidth: 1441 },
        }
    }
  },

  DeepLandscapeTopper(image): AliasedBreakpoints | undefined {
    switch (image.format) {
      case 'portrait':
        return {
          small: { maxWidth: 490 },
          tablets: { minWidth: 491, maxWidth: 980 },
        }
      case 'landscape':
        return {
          normal: { minWidth: 981, maxWidth: 1440 },
          wide: { minWidth: 1441 },
        }
    }
  },
}

export type PictureProps = {
  topper: TopperFragment
  alt?: string
}

const Picture: React.FC<PictureProps> = (props) => {
  const { topper, alt = '' } = props
  if (!('images' in topper) || !topper.fallbackImage) {
    return null
  }

  return (
    <figure className="o-topper__visual">
      <picture className="o-topper__picture" key="responsive-images">
        <PictureOverrideWrapper {...props}>
          <Sources
            images={topper.images as readonly ContentTree.Image[]}
            getBreakpoints={topperGetBreakpointsMap[topper.__typename]}
          />

          <img
            alt={alt}
            className="o-topper__image"
            src={topper.fallbackImage.sourceSet[0]?.url}
            key="fallback-image"
          />
        </PictureOverrideWrapper>
      </picture>
      {topper.fallbackImage.caption ||
      topper.__typename === 'DeepPortraitTopper' ||
      topper.__typename === 'DeepLandscapeTopper' ? (
        <figcaption className="o-topper__image-caption">
          {topper.fallbackImage.caption} {topper.fallbackImage.credit}
        </figcaption>
      ) : (
        topper.fallbackImage.credit && (
          <figcaption className={'o-topper__image-credit'}>
            {topper.fallbackImage.credit}
          </figcaption>
        )
      )}
    </figure>
  )
}

export default Picture