import { createContext, useState } from 'react';
import { Collapsible as CollapsibleBase } from '@base-ui/react/collapsible';
import * as stylex from '@stylexjs/stylex';

import type { ReactNode } from 'react';

import { collapsibleStyles } from './styles';

interface CollapsibleRootProps {
  defaultOpen?: boolean;
  children: ReactNode;
}

export const CollapsibleContext = createContext<{
  isOpen: boolean;
}>({
  isOpen: false,
});

export const CollapsibleRoot = ({
  children,
  defaultOpen,
}: CollapsibleRootProps) => {
  const [isOpen, setIsOpen] = useState(defaultOpen ?? false);

  return (
    <CollapsibleBase.Root
      onOpenChange={setIsOpen}
      defaultOpen={defaultOpen}
      {...stylex.props(collapsibleStyles.base)}
    >
      <CollapsibleContext.Provider value={{ isOpen }}>
        {children}
      </CollapsibleContext.Provider>
    </CollapsibleBase.Root>
  );
};