import * as Ariakit from '@ariakit/react';
import { ReactNode, useContext } from 'react';
import styled from 'styled-components';
import { getVariantKey } from '../../variants';
import { DrawerContext } from './drawer.context';
import { IDrawerVariants, drawerVariants } from './drawer.variants';

const DrawerDismissStyle = styled(Ariakit.DialogDismiss) <DrawerDismissProps>`
  ${props => getVariantKey('dismiss', props.variant, props.variants)}
`;

export type DrawerDismissProps = Ariakit.DialogDismissProps & {
  className?: string;
  variant?: keyof typeof drawerVariants | (string & {});
  variants?: IDrawerVariants;
  children?: ReactNode;
};

export const DrawerDismiss = ({ children, className, variant, variants, ...props }: DrawerDismissProps) => {
  const context = useContext(DrawerContext);
  if (!context) {
    return;
  }
  return (
    <DrawerDismissStyle
      {...props}
      variant={variant || context.variant}
      variants={variants || context.variants}
    >{children}</DrawerDismissStyle>
  );
};