import styled from '@emotion/native';
import { TextInput, View } from 'react-native';
import type { BadgeProps } from '../Badge';
import Badge from '../Badge';

export type State = 'default' | 'filled' | 'disabled' | 'readonly';

type Variant = 'basic' | 'reversed';

export const StyledContainer = styled(View)(() => ({
  width: '100%',
}));

export const StyledInputContainer = styled(View)<{ themeVariant: Variant }>(
  ({ theme, themeVariant }) => {
    return {
      flexDirection: 'row',
      alignItems: 'center',
      paddingHorizontal: theme.__hd__.search.space.containerHorizontalPadding,
      paddingVertical: theme.__hd__.search.space.containerVerticalPadding,
      backgroundColor:
        theme.__hd__.search.colors[themeVariant].containerBackground,
      height: 56,
      borderRadius: theme.__hd__.search.radii.container,
      borderWidth: theme.__hd__.search.borderWidths.container.default,
      borderColor: theme.__hd__.search.colors[themeVariant].border,
      ...(themeVariant === 'reversed' && {
        ...theme.__hd__.search.shadows.container,
      }),
    };
  }
);

export const StyledAffixContainer = styled(View)(({ theme }) => ({
  paddingHorizontal: theme.__hd__.search.space.prefixHorizontalPadding,
}));

export const StyledSuffixContainer = styled(View)(({ theme }) => ({
  display: 'flex',
  justifyContent: 'center',
  alignItems: 'center',
  width: theme.__hd__.search.sizes.surfixSize,
  height: theme.__hd__.search.sizes.surfixSize,
  backgroundColor: theme.__hd__.search.colors.suffixBackground,
  borderRadius: theme.__hd__.search.radii.surfix,
}));

export const StyledInput = styled(TextInput)(({ theme }) => ({
  textAlignVertical: 'center',
  fontSize: theme.__hd__.search.fontSizes.text,
  color: theme.__hd__.textInput.colors.text.default,
  alignSelf: 'stretch',
  flexGrow: 1,
  flexShrink: 1,
  marginHorizontal: theme.__hd__.search.space.inputHorizontalMargin,
  paddingVertical: 0,
  fontFamily: theme.__hd__.search.fonts.text,
}));

export const StyledHandlerContainer = styled(View)(({ theme }) => ({
  display: 'flex',
  flexDirection: 'column',
  justifyContent: 'space-between',
  alignItems: 'flex-start',
  flexGrow: 1,
  height: '100%',
  marginHorizontal: theme.__hd__.search.space.inputHorizontalMargin,
  paddingVertical: theme.__hd__.search.space.inputVerticalPadding,
}));

export const StyledBadge = styled(Badge)<BadgeProps>(({ theme }) => ({
  position: 'absolute',
  top: theme.__hd__.search.space.badgeTop,
  right: theme.__hd__.search.space.badgeRight,
  zIndex: 2,
}));