import styled from '@emotion/native';
import type { ComponentProps } from 'react';
import type { ViewProps, KeyboardAvoidingViewProps } from 'react-native';
import {
  Animated,
  KeyboardAvoidingView,
  Pressable,
  SafeAreaView,
  StyleSheet,
  TouchableOpacity,
  View,
} from 'react-native';

const AnimatedPressable = Animated.createAnimatedComponent(Pressable);
const AnimatedSafeAreaView = Animated.createAnimatedComponent(SafeAreaView);

const StyledWrapper = styled(View)<ViewProps>({
  ...StyleSheet.absoluteFillObject,
  flexDirection: 'column-reverse',
});

const StyledKeyboardAvoidingView = styled(
  KeyboardAvoidingView
)<KeyboardAvoidingViewProps>(() => ({
  flex: 1,
  flexDirection: 'column-reverse',
}));

const StyledFloatingWrapper = styled(AnimatedSafeAreaView)(({ theme }) => ({
  margin: theme.__hd__.bottomSheet.space.floatingContentMargin,
}));

const StyledFloatingBottomSheet = styled(Animated.View)(({ theme }) => ({
  width: '100%',
  backgroundColor: theme.__hd__.bottomSheet.colors.background,
  borderRadius: theme.__hd__.bottomSheet.radii.floating,
  maxHeight: '100%',
  padding: theme.__hd__.bottomSheet.space.floatingInnerPadding,
}));

const StyledBottomSheet = styled(AnimatedSafeAreaView)<
  ComponentProps<typeof AnimatedSafeAreaView>
>(({ theme }) => ({
  borderTopLeftRadius: theme.__hd__.bottomSheet.radii.default,
  borderTopRightRadius: theme.__hd__.bottomSheet.radii.default,
  backgroundColor: theme.__hd__.bottomSheet.colors.background,
  width: '100%',
  maxHeight: '94%',
}));

const StyledBackdrop = styled(AnimatedPressable)<
  ComponentProps<typeof AnimatedPressable>
>(({ theme }) => ({
  ...StyleSheet.absoluteFillObject,
  backgroundColor: theme.__hd__.bottomSheet.colors.backdrop,
  opacity: 0.4,
}));

const StyledHeaderWrapper = styled(View)(({ theme }) => ({
  flexDirection: 'row',
  minHeight: theme.__hd__.bottomSheet.sizes.headerMinHeight,
  paddingVertical: theme.__hd__.bottomSheet.space.headerWrapperVerticalPadding,
  paddingHorizontal:
    theme.__hd__.bottomSheet.space.headerWrapperHorizontalPadding,
}));

const StyledHeader = styled(View)<ViewProps>({
  flex: 1,
  justifyContent: 'center',
});

const StyledFooter = styled(View)<ViewProps>(({ theme }) => ({
  paddingHorizontal: theme.__hd__.bottomSheet.space.footerHorizontalPadding,
  paddingVertical: theme.__hd__.bottomSheet.space.footerVerticalPadding,
  alignItems: 'center',
  justifyContent: 'flex-end',
  flexDirection: 'row',
}));

const StyledIconWrapper = styled(View)<ViewProps>(({ theme }) => ({
  alignItems: 'center',
  justifyContent: 'center',
  width: theme.__hd__.bottomSheet.sizes.closeIcon,
  height: theme.__hd__.bottomSheet.sizes.closeIcon,
  marginLeft: theme.__hd__.bottomSheet.space.closeIconMargin,
}));

const StyledFloatingHeaderWrapper = styled(TouchableOpacity)(({ theme }) => ({
  padding: theme.__hd__.bottomSheet.space.floatingHeaderIconPadding,
  backgroundColor: theme.__hd__.bottomSheet.colors.floatingHeaderIconBackground,
  borderRadius: theme.__hd__.bottomSheet.radii.floatingHeaderIcon,
}));

export {
  StyledBackdrop,
  StyledBottomSheet,
  StyledFloatingBottomSheet,
  StyledFloatingHeaderWrapper,
  StyledFloatingWrapper,
  StyledFooter,
  StyledHeader,
  StyledHeaderWrapper,
  StyledIconWrapper,
  StyledKeyboardAvoidingView,
  StyledWrapper,
};