import { createMedia as artsyCreateMedia } from "@artsy/fresnel"
import { useContextSelector } from "use-context-selector"
import { Size, createSizeProvider } from "./createSizeProvider"

type CreateMediaOptions<TSize extends Partial<Size>> = {
  initialWindowSize?: TSize
}

export function createMedia<
  TBreakpoints extends Record<string, number>,
  TSize extends Partial<Size>,
>(breakpoints: TBreakpoints, options: CreateMediaOptions<TSize> = {}) {
  const { createMediaStyle, Media, MediaContextProvider } = artsyCreateMedia({
    breakpoints,
  })

  const { SizeProvider, SizeContext } = createSizeProvider<TSize>(options)

  type SizeWithInitialSize = TSize & Partial<Size>

  function useSizeContextSelector<Selected>(
    selector: (value: SizeWithInitialSize) => Selected,
  ) {
    return useContextSelector<SizeWithInitialSize, Selected>(
      SizeContext,
      selector,
    )
  }

  return {
    createMediaStyle,
    breakpoints,
    SizeProvider,
    useSizeContextSelector,
    Media,
    MediaContextProvider,
  }
}