import styled from '@emotion/native';
import { Pressable, TextInput, View } from 'react-native';
import Typography from '../Typography';

export const StyledWrapper = styled(View)(() => ({
  alignContent: 'flex-start',
}));

export const StyledPinWrapper = styled(Pressable)(() => ({
  flexDirection: 'row',
}));

export type State = 'default' | 'disabled' | 'error';

export const StyledCell = styled(View)<{
  themeFocused: boolean;
  themeState: State;
}>(({ theme, themeFocused, themeState }) => ({
  justifyContent: 'center',
  alignItems: 'center',
  width: theme.__hd__.pinInput.sizes.cellWidth,
  height: theme.__hd__.pinInput.sizes.cellHeight,
  borderWidth: themeFocused
    ? theme.__hd__.pinInput.borderWidths.focused
    : theme.__hd__.pinInput.borderWidths.default,
  borderRadius: theme.__hd__.pinInput.radii.cell,
  borderColor: theme.__hd__.pinInput.colors[themeState],
}));

export const StyledCellText = styled(Typography.Title)<{
  themeState: State;
}>(({ theme, themeState }) => ({
  color: theme.__hd__.pinInput.colors[themeState],
}));

export const StyledSpacer = styled(View)(({ theme }) => ({
  marginLeft: theme.__hd__.pinInput.space.spacer,
}));

export const StyledMask = styled(View)<{
  themeState: State;
}>(({ theme, themeState }) => ({
  width: theme.__hd__.pinInput.sizes.mask,
  height: theme.__hd__.pinInput.sizes.mask,
  borderWidth: theme.__hd__.pinInput.borderWidths.default,
  borderRadius: theme.__hd__.pinInput.radii.mask,
  borderColor: theme.__hd__.pinInput.colors[themeState],
}));

export const StyledFilledMask = styled(View)<{
  themeState: State;
}>(({ theme, themeState }) => ({
  width: theme.__hd__.pinInput.sizes.mask,
  height: theme.__hd__.pinInput.sizes.mask,
  borderWidth: theme.__hd__.pinInput.borderWidths.default,
  borderRadius: theme.__hd__.pinInput.radii.mask,
  borderColor: theme.__hd__.pinInput.colors[themeState],
  backgroundColor: theme.__hd__.pinInput.colors[themeState],
}));

export const StyledHiddenInput = styled(TextInput)<{ themePinLength: number }>(
  ({ themePinLength, theme }) => {
    const { cellWidth } = theme.__hd__.pinInput.sizes;
    const spacerWidth = theme.__hd__.pinInput.space.spacer;

    return {
      position: 'absolute',
      // Opacity must be > 0.01 to receive touch events on iOS in RN 0.76.7.
      // See https://github.com/facebook/react-native/issues/50465 for details.
      opacity: 0.01001,
      left: 0,
      top: 0,
      right: 0,
      width: themePinLength * cellWidth + (themePinLength - 1) * spacerWidth,
      height: '100%',
      minHeight: 1, // workaround fix the issue https://employmenthero.atlassian.net/browse/PS-2042
      fontSize: theme.__hd__.pinInput.fontSizes.hiddenInputText,
      letterSpacing: theme.__hd__.pinInput.space.hiddenInputText,
      paddingHorizontal:
        theme.__hd__.pinInput.space.hiddenInputHorrizontalPadding,
    };
  }
);

export const StyledErrorContainer = styled(View)(({ theme }) => ({
  flexDirection: 'row',
  paddingTop: theme.__hd__.pinInput.space.errorMessagePadding,
  alignItems: 'center',
}));

export const StyledErrorMessage = styled(Typography.Caption)(({ theme }) => ({
  color: theme.__hd__.pinInput.colors.error,
  paddingLeft: theme.__hd__.pinInput.space.errorMessagePadding,
}));