import type { ComponentPropsWithRef } from 'react'
import React, { useContext, createContext } from 'react'
import invariant from 'tiny-invariant'

export const IconContext = createContext<IconContextProps>({
  useIconProps(props) {
    return props
  },
})

export function useIconContext() {
  const context = useContext(IconContext)

  invariant(context, 'Make sure you are using VTEX icons under an IconProvider')

  return context
}

export function createIconProvider(props: IconContextProps) {
  const { useIconProps } = props

  function IconProvider(iconProps: { children?: React.ReactNode }) {
    const { children } = iconProps

    return (
      <IconContext.Provider value={{ useIconProps }}>
        {children}
      </IconContext.Provider>
    )
  }

  return IconProvider
}

export interface IconOptions {
  weight?: IconWeight
  mirrored?: boolean
  title?: string
}

export type IconProps = ComponentPropsWithRef<'svg'> & IconOptions
export type UseIconPropsReturn = ComponentPropsWithRef<'svg'> & IconOptions

export interface IconContextProps {
  useIconProps: (props: IconProps) => UseIconPropsReturn
}

export type IconWeight = 'outline' | 'fill'

export type Icon<T = IconProps> = React.ForwardRefExoticComponent<T>