import React, {
  memo,
  useCallback,
  useDebugValue,
  useEffect,
  useId,
  type FC,
  type PropsWithChildren,
  type ReactNode,
} from 'react';
import { useCompareEffect } from '@wener/reaction';
import { createStore } from 'zustand';
import { immer } from 'zustand/middleware/immer';
import { shallow } from 'zustand/shallow';
import { createStoreContext } from '../../zustand';

export interface SlotProps<
  S extends Record<string, string> = {},
  N extends string = keyof S & string,
  P extends string = S[N],
> {
  name: N;
  placement?: P;
  order?: number;
  children: ReactNode;
}
export interface SlotPlaceholderProps<
  S extends Record<string, string> = {},
  N extends string = keyof S & string,
  P extends string = S[N],
> {
  name: N;
  // aux
  placement?: P;
  // placeholder for missing slot content
  placeholder?: ReactNode;
}

export interface SlotData {
  id: string;
  name: string;
  placement: string;
  order: number;
  children: ReactNode;
}

interface SlotStore {
  slots: Record<string, SlotData[]>;
}

const createSlotStore = () => createStore<SlotStore>()(immer(() => ({ slots: {} })));

export function createSlotContext<SlotTypes extends Record<string, string> = {}>() {
  const { Provider, useStore, useStoreApi } = createStoreContext<ReturnType<typeof createSlotStore>>();
  const SlotProvider: FC<PropsWithChildren<{ name?: string }>> = ({ children }) => {
    return <Provider createStore={createSlotStore}>{children}</Provider>;
  };

  const Slot = memo<SlotProps<SlotTypes>>(({ name, placement = 'default', order = 0, children }) => {
    const api = useStoreApi();
    const slotId = useId();
    placement ||= 'default';
    order ||= 0;
    const slotPlace = `${name}/${placement}`;
    useCompareEffect(() => {
      // wrap children with key
      api.setState((s) => {
        const slots = (s.slots[slotPlace] ||= []);
        const slot = slots.find((v) => v.id === slotId);
        if (slot) {
          Object.assign(slot, {
            name,
            placement,
            order,
            children,
          });
        } else {
          slots.push({
            id: slotId,
            name,
            placement,
            order,
            children,
          });
        }
        slots.sort((a, b) => b.order - a.order);
      });
    }, [slotPlace, order, children]);
    useEffect(() => {
      return () => {
        api.setState((s) => {
          s.slots[slotPlace] = s.slots[slotPlace]?.filter((v) => v.id !== slotId);
        });
      };
    }, []);
    useDebugValue(`Slot ${slotPlace}@{${slotId}`);
    return null;
  });
  Slot.displayName = 'Slot';

  function useSlot({ name, placement }: { name: string; placement?: string }) {
    const slotPlace = `${name}/${placement || 'default'}`;
    return useStore(
      useCallback((s) => s.slots[slotPlace] || [], [slotPlace]),
      shallow,
    );
  }

  const SlotPlaceholder = memo<SlotPlaceholderProps<SlotTypes>>(({ name, placement, placeholder }) => {
    const slotPlace = `${name}/${placement || 'default'}`;
    const slot = useStore(
      useCallback((s) => s.slots[slotPlace] || [], [slotPlace]),
      shallow,
    );
    useDebugValue(`SlotPlaceholder ${name}${placement ? `@${placement}` : ''}`);
    const children = slot.length
      ? slot.map((v) => {
          return v.children;
        })
      : placeholder;
    return <>{children}</>;
  });
  SlotPlaceholder.displayName = 'SlotPlaceholder';
  return { Slot, useSlot, SlotPlaceholder, SlotProvider };
}

export const { Slot, SlotPlaceholder, SlotProvider, useSlot } = createSlotContext();