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

const AnimatedPressable = Animated.createAnimatedComponent(Pressable);

const StyledContainer = styled(View)<{
  enableShadow: boolean;
}>(({ theme, enableShadow }) => ({
  ...StyleSheet.absoluteFillObject,
  shadowColor: enableShadow ? theme.__hd__.drawer.colors.shadow : 'transparent',
  shadowOffset: theme.__hd__.drawer.shadows.offset,
  shadowOpacity: theme.__hd__.drawer.shadows.opacity,
  shadowRadius: theme.__hd__.drawer.shadows.radius,
  overflow: 'hidden',
  zIndex: 9999,
  elevation: 9999,
}));

const StyledDragableContainer = styled(View)<{
  enableShadow: boolean;
}>(({ theme, enableShadow }) => ({
  ...StyleSheet.absoluteFillObject,
  shadowColor: enableShadow ? theme.__hd__.drawer.colors.shadow : 'transparent',
  shadowOffset: theme.__hd__.drawer.shadows.offset,
  shadowOpacity: theme.__hd__.drawer.shadows.opacity,
  shadowRadius: theme.__hd__.drawer.shadows.radius,
  overflow: 'hidden',
  zIndex: 9999,
  elevation: 9999,
  flexDirection: 'column-reverse',
}));

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

const StyledDrawerContainer = styled(Animated.View)<{
  enableShadow: boolean;
}>(({ theme, enableShadow }) => ({
  borderBottomLeftRadius: theme.__hd__.drawer.radii.default,
  borderBottomRightRadius: theme.__hd__.drawer.radii.default,
  backgroundColor: theme.__hd__.drawer.colors.background,
  elevation: enableShadow ? theme.__hd__.drawer.shadows.elevation : undefined,
  overflow: 'hidden',
}));

const StyledDragableDrawerContainer = styled(Animated.View)<{
  enableShadow: boolean;
}>(({ theme, enableShadow }) => ({
  borderTopLeftRadius: theme.__hd__.drawer.radii.default,
  borderTopRightRadius: theme.__hd__.drawer.radii.default,
  backgroundColor: theme.__hd__.drawer.colors.background,
  elevation: enableShadow ? theme.__hd__.drawer.shadows.elevation : undefined,
  overflow: 'hidden',
  maxHeight: '100%',
}));

const StyledHandlerContainer = styled(View)<ViewProps>(({ theme }) => ({
  backgroundColor: theme.__hd__.drawer.colors.background,
  paddingVertical: theme.__hd__.drawer.space.handlerPaddingVertical,
  alignItems: 'center',
}));

const StyledHandler = styled(View)<{ active?: boolean }>(({ theme }) => ({
  width: theme.__hd__.drawer.sizes.handlerWidth,
  height: theme.__hd__.drawer.sizes.handlerHeight,
  backgroundColor: theme.__hd__.drawer.colors.handler,
  borderRadius: theme.__hd__.drawer.radii.handler,
}));

export {
  StyledBackdrop,
  StyledContainer,
  StyledDrawerContainer,
  StyledHandlerContainer,
  StyledHandler,
  StyledDragableContainer,
  StyledDragableDrawerContainer,
};