import { Container, StyleSystemThemedProps, TouchableWithoutFeedback } from 'components/layout';
import { Visible } from 'components/visible';
import { metrics } from 'config';
import { FC, useCallback } from 'react';
import { COLOR_VALUES } from 'theme/color';

const { Z_INDEX } = metrics;

export const UnderLay: FC<UnderLayType> = ({
  isTransparent,
  isActive,
  setIsActive,
  children,
  ...props
}) => {
  const closeSheet = useCallback(() => {
    setIsActive(false);
  }, [setIsActive]);

  const backgroundColor = isTransparent ? 'transparent' : COLOR_VALUES['underlay-dark-06'];

  return (
    <Visible if={isActive}>
      <TouchableWithoutFeedback onPress={closeSheet}>
        <Container
          style={{
            position: 'absolute',
            backgroundColor,
            top: 0,
            left: 0,
            right: 0,
            bottom: 0,
            zIndex: Z_INDEX.dialogUnderLay,
          }}
          {...props}
        >
          {children}
        </Container>
      </TouchableWithoutFeedback>
    </Visible>
  );
};
type UnderLayType = StyleSystemThemedProps & UnderLayProps;
export interface UnderLayProps {
  isActive: boolean;
  children: JSX.Element;
  isTransparent?: boolean;
  setIsActive: (value: boolean) => void;
}