import { Animated, Pressable, View } from 'react-native';
import styled from '@emotion/native';
import type { ComponentProps } from 'react';
import type { ViewProps } from 'react-native';
import FAB from '../FAB';
import Box from '../../Box';

const StyledContainer = styled(View)<ViewProps>({
  position: 'absolute',
  left: 0,
  right: 0,
  top: 0,
  bottom: 0,
  alignItems: 'flex-end',
  justifyContent: 'flex-end',
});

const StyledContainerInModal = styled(View)<ViewProps>({
  position: 'absolute',
  left: 0,
  right: 0,
  top: 0,
  bottom: 0,
  alignItems: 'flex-end',
  justifyContent: 'flex-end',
});

const StyledActionGroupContainer = styled(Animated.View)<
  ComponentProps<typeof Animated.View>
>({
  alignItems: 'flex-end',
  justifyContent: 'flex-end',
  width: '70%',
});

const StyledFAB = styled(FAB)(({ theme }) => ({
  marginRight: theme.__hd__.fab.space.buttonMarginRight,
  marginTop: theme.__hd__.fab.space.buttonMarginTop,
  alignSelf: 'flex-end',
}));

const StyledBackdropPressable = styled(Pressable)(() => ({
  position: 'absolute',
  left: 0,
  right: 0,
  top: 0,
  bottom: 0,
  backgroundColor: 'transparent',
}));

const StyledBackdrop = styled(Box)(({ theme }) => ({
  position: 'absolute',
  left: 0,
  right: 0,
  top: 0,
  bottom: 0,
  opacity: 0.4,
  backgroundColor: theme.__hd__.fab.colors.backdropBackground,
}));

export {
  StyledActionGroupContainer,
  StyledBackdrop,
  StyledBackdropPressable,
  StyledContainer,
  StyledContainerInModal,
  StyledFAB,
};