import type { ImageResizeMode } from 'react-native';
import { View } from 'react-native';
import styled from '@emotion/native';
import Typography from '../Typography';
import Image from '../Image';
import Box from '../Box';
import PageControl from '../PageControl';

const StyledBackDrop = styled(View)<{
  themeSlideBackground: string;
}>(({ themeSlideBackground }) => ({
  position: 'absolute',
  backgroundColor: themeSlideBackground,
  top: 0,
  bottom: 0,
  right: 0,
  left: 0,
}));

const StyledCarouselView = styled(View)(() => ({
  flexGrow: 2,
  justifyContent: 'space-between',
}));

const StyledCarouselHeading = styled(Typography.Title)(({ theme }) => ({
  marginBottom: theme.__hd__.carousel.space.headingMarginBottom,
}));

const StyledCarouselImage = styled(Image)(() => ({
  flexGrow: 2,
  flex: 1,
  width: '100%',
  resizeMode: 'contain',
}));

const StyledCustomSizeCarouselImage = styled(Image)<{
  themeHeight?: number | `${number}%`;
  themeWidth?: number | `${number}%`;
  themeResizeMode?: ImageResizeMode;
}>(({ themeHeight, themeResizeMode = 'contain', themeWidth }) => ({
  alignSelf: 'center',
  width: themeWidth,
  height: themeHeight,
  resizeMode: themeResizeMode,
}));

const StyledCarouselContentWrapper = styled(Box)<{
  width: number;
}>(({ width }) => ({
  width,
}));

const StyledCarouselFooterWrapper = styled(View)(({ theme }) => ({
  paddingHorizontal: theme.__hd__.carousel.space.footerPaddingHorizontal,
  flexDirection: 'row',
  justifyContent: 'space-between',
  paddingVertical: theme.__hd__.carousel.space.footerPaddingVertical,
  marginBottom: theme.__hd__.carousel.space.footerMarginBottom,
}));

const StyledPageControl = styled(PageControl)(({ theme }) => ({
  paddingVertical: theme.__hd__.carousel.space.pageControlPaddingVertical,
}));

const StyledPageControlWrapper = styled(View)(({ theme }) => ({
  alignItems: 'center',
  justifyContent: 'center',
  height: theme.__hd__.carousel.space.pageControlWrapperHeight,
}));

export {
  StyledBackDrop,
  StyledCarouselView,
  StyledCarouselHeading,
  StyledCarouselImage,
  StyledCarouselContentWrapper,
  StyledCarouselFooterWrapper,
  StyledCustomSizeCarouselImage,
  StyledPageControl,
  StyledPageControlWrapper,
};