/* eslint-disable @typescript-eslint/ban-ts-comment */
// @ts-nocheck
import { Container, StyleSystemThemedProps } from 'components/layout';
import { metrics } from 'config';
import { useSafeAreaInsets } from 'react-native-safe-area-context';
import { BASE_SIZE } from 'theme/size';
const { STYLES } = metrics;

export const SideBarRight: React.FC<SideBarType> = ({ variant, children, ...props }) => {
  const { top } = useSafeAreaInsets();
  const isSurface = variant === 'surface';
  const topMargin = isSurface ? undefined : top + STYLES.topBarHeight + BASE_SIZE['20'];
  const zIndex = isSurface ? undefined : 10;
  const right = isSurface ? undefined : 'm';
  const width = isSurface ? undefined : STYLES.happeningBarWidth;
  const position = isSurface ? 'relative' : 'absolute';
  const px = isSurface ? 's' : undefined;
  return (
    <Container
      width={width}
      overflow="hidden"
      position={position}
      top={topMargin}
      zIndex={zIndex}
      right={right}
      bottom={0}
      px={px}
      {...props}
    >
      {children}
    </Container>
  );
};

type SideBarType = StyleSystemThemedProps & SideBarRightProps;
type HappeningNowVariant = 'float' | 'surface';
interface SideBarRightProps {
  variant: HappeningNowVariant;
}