import { createContext, PropsWithChildren } from 'react'

import type {
  FallbackImageProps,
  ImageSetProps,
} from './components/content-tree/ImageSet'
import type { PictureProps } from './components/Topper/Picture'

export type PresentationOverrideTypes = {
  FallbackImage: React.FC<PropsWithChildren<FallbackImageProps>>
  ImageSet: React.FC<PropsWithChildren<ImageSetProps>>
  Picture: React.FC<PropsWithChildren<PictureProps>>
}

// HACK:20240618:IM we're still not at the point where all components behave
// correctly across all consumers. this context allows consumers to
// conditionally change certain component presentation logic. we should aim to
// minimise the number of flags and ultimately remove the context entirely when
// it's no longer necessary.
export interface PresentationFlags {
  reduceFullBleedImages?: boolean
}
export const PresentationFlagsContext = createContext<PresentationFlags>({})

// COMPLEX:20240815:RB similarly to PresentationFlags, some consumers need
// to customise the presentation and behaviour of some components. This should be
// replaced by more transparent support in the consumer with the aim of removing
// this context.
export interface PresentationOverrides {
  FallbackImage?: PresentationOverrideTypes['FallbackImage']
  ImageSet?: PresentationOverrideTypes['ImageSet']
  Picture?: PresentationOverrideTypes['Picture']
}
export const PresentationOverridesContext =
  createContext<PresentationOverrides>({})