import styled from '@emotion/native';
import { TextInput, TouchableOpacity, View } from 'react-native';
import type { ViewProps } from 'react-native';
import Typography from '../Typography';
import type { TypographyColorIntent } from '../Typography/types';

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

const ToolbarWrapper = styled(View)<ViewProps>(({ theme }) => ({
  position: 'absolute',
  bottom: 0,
  left: 0,
  right: 0,
  zIndex: 9999,
  elevation: 9999,
  width: '100%',
  paddingHorizontal: theme.__hd__.toolbar.space.horizontalPadding,
  borderTopWidth: theme.__hd__.toolbar.borderWidths.default,
  borderColor: theme.__hd__.toolbar.colors.border,
  flexDirection: 'row',
  alignItems: 'center',
  backgroundColor: theme.__hd__.toolbar.colors.background,
}));

const alignment = {
  left: 'flex-start',
  center: 'center',
  right: 'flex-end',
} as const;

const ToolbarGroupWrapper = styled(View)<{
  align: 'left' | 'center' | 'right';
}>(({ align }) => ({
  flex: 1,
  flexDirection: 'row',
  justifyContent: alignment[align],
  alignItems: 'center',
}));

const ToolbarItemWrapper = styled(TouchableOpacity)(({ theme }) => ({
  height: theme.__hd__.toolbar.sizes.itemWrapperHeight,
  paddingVertical: theme.__hd__.toolbar.space.verticalPadding,
  paddingHorizontal: theme.__hd__.toolbar.space.horizontalPadding,
  alignItems: 'center',
  flexDirection: 'row',
}));

const IconButtonWrapper = styled(View)(({ theme }) => ({
  backgroundColor: theme.__hd__.toolbar.colors.iconButtonBackground,
  borderRadius: theme.__hd__.toolbar.radii.iconButtonWrapperBorderRadius,
  justifyContent: 'center',
  alignItems: 'center',
  flexDirection: 'row',
  padding: theme.__hd__.toolbar.space.iconButtonWrapperPadding,
}));

const IconButtonLabel = styled(Typography.Body)(({ theme }) => ({
  marginLeft: theme.__hd__.toolbar.space.iconButtonLabelMarginLeft,
}));

const StyledLabel = styled(Typography.Body)<{
  intent: TypographyColorIntent;
}>(({ theme, intent }) => ({
  color:
    intent === 'secondary'
      ? theme.__hd__.toolbar.colors.secondary
      : theme.__hd__.typography.colors[intent],
}));

const ToolbarMessageWrapper = styled(View)(({ theme }) => ({
  flex: 1,
  flexDirection: 'row',
  justifyContent: 'space-between',
  alignItems: 'center',
  height: theme.__hd__.toolbar.sizes.messageWrapperHeight,
  paddingVertical: theme.__hd__.toolbar.space.messageWrapperPaddingVertical,
  paddingHorizontal: theme.__hd__.toolbar.space.messageWrapperPaddingHorizontal,
}));

export const StyledInputContainer = styled(View)(({ theme }) => {
  return {
    flexDirection: 'row',
    alignItems: 'center',
    flex: 1,
    backgroundColor: theme.__hd__.toolbar.colors.inputContainerBackground,
    borderRadius: theme.__hd__.toolbar.radii.messageContainer,
    height: theme.__hd__.toolbar.sizes.messageInputHeight,
    paddingHorizontal: theme.__hd__.toolbar.space.messageInputPaddingHorizontal,
  };
});

export const StyledInput = styled(TextInput)(({ theme }) => ({
  textAlignVertical: 'center',
  fontSize: theme.__hd__.toolbar.fontSizes.text,
  alignSelf: 'stretch',
  flexGrow: 1,
  flexShrink: 1,
  fontFamily: theme.__hd__.toolbar.fonts.text,
  color: theme.__hd__.toolbar.colors.text,
}));

export const StyledPrefix = styled(View)(({ theme }) => ({
  marginRight: theme.__hd__.toolbar.space.affixInnerMargin,
  maxHeight: '100%',
}));

export const StyledSuffix = styled(View)(({ theme }) => ({
  marginLeft: theme.__hd__.toolbar.space.affixInnerMargin,
  maxHeight: '100%',
}));

export {
  ToolbarWrapper,
  ToolbarGroupWrapper,
  ToolbarItemWrapper,
  IconButtonWrapper,
  IconButtonLabel,
  StyledLabel,
  ToolbarMessageWrapper,
};