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

import type { ReactNode } from 'react';

import ChevronIconWrapper from '~/src/components/Icon/ChevronIcon';
import { Layout } from '~/src/ui/layouts/layout';
import { CollapsibleContext } from './CollapsibleRoot';
import { collapsibleSize, collapsibleStyles } from './styles';
import { CollapsibleSize } from './types';

interface CollapsibleTriggerProps {
  size?: CollapsibleSize;
  children: ReactNode;
}

export const CollapsibleTrigger = ({
  size = 'medium',
  children,
}: CollapsibleTriggerProps) => {
  const { isOpen: contextIsOpen } = useContext(CollapsibleContext);

  return (
    <CollapsibleBase.Trigger
      {...stylex.props(collapsibleStyles.trigger, collapsibleSize[size])}
    >
      <Layout gap="4" align="center" justify="space-between">
        <Layout minWidth={0}>{children}</Layout>
        <ChevronIconWrapper
          direction={contextIsOpen ? 'up' : 'down'}
          size={size === 'small' ? 18 : 24}
          style={{ flexShrink: 0 }}
        />
      </Layout>
    </CollapsibleBase.Trigger>
  );
};