import * as Ariakit from '@ariakit/react';
import { getClassNames } from '@websolutespa/bom-core';
import { forwardRef, ReactNode, useContext } from 'react';
import styled from 'styled-components';
import { getVariantKey } from '../../variants';
import { UIStyledComponentProps } from '../types';
import { getCssResponsive } from '../utils';
import { DrawerContext } from './drawer.context';
import { drawerVariants, IDrawerVariants } from './drawer.variants';

const DrawerDialogStyle = styled(Ariakit.Dialog) <Omit<DrawerDialogProps, 'name'>>`
  ${props => getVariantKey('dialog', props.variant, props.variants)}
  ${props => getCssResponsive(props)}
`;

export type DrawerDialogPlacement = 'top' | 'right' | 'bottom' | 'left' | 'center';

export type DrawerDialogProps = Ariakit.DialogProps & UIStyledComponentProps<{
  placement?: DrawerDialogPlacement;
  className?: string;
  variant?: keyof typeof drawerVariants | (string & {});
  variants?: IDrawerVariants;
  children?: ReactNode;
}>;

export const DrawerDialog = forwardRef<HTMLDivElement, DrawerDialogProps>(
  function DrawerDialog({
    className,
    variant,
    variants,
    children,
    placement = 'right',
    ...props
  }: DrawerDialogProps, ref) {
    const classNames = getClassNames('drawer__dialog', className, placement);
    const context = useContext(DrawerContext);
    if (!context) {
      return;
    }
    return (
      <DrawerDialogStyle
        ref={ref}
        className={classNames}
        variant={variant || context.variant}
        variants={variants || context.variants}
        placement={placement}
        {...props}
        data-lenis-prevent
      >
        {children}
      </DrawerDialogStyle>
    );
  }
);