import type { ComputedRef, InjectionKey, PropType } from 'vue';
import { computed, defineComponent, inject, provide } from 'vue';
import type { Key } from '../_util/type';

export interface OverflowContextProviderValueType {
  prefixCls: string;
  responsive: boolean;
  order: number;
  registerSize: (key: Key, width: number | null) => void;
  display: boolean;

  invalidate: boolean;

  // Item Usage
  item?: any;
  itemKey?: Key;

  // Rest Usage
  className?: string;
}

const OverflowContextProviderKey: InjectionKey<
  ComputedRef<OverflowContextProviderValueType | null>
> = Symbol('OverflowContextProviderKey');

export const OverflowContextProvider = defineComponent({
  compatConfig: { MODE: 3 },
  name: 'OverflowContextProvider',
  inheritAttrs: false,
  props: {
    value: { type: Object as PropType<OverflowContextProviderValueType> },
  },
  setup(props, { slots }) {
    provide(
      OverflowContextProviderKey,
      computed(() => props.value),
    );
    return () => slots.default?.();
  },
});

export const useInjectOverflowContext =
  (): ComputedRef<OverflowContextProviderValueType | null> => {
    return inject(
      OverflowContextProviderKey,
      computed(() => null),
    );
  };