import React, { useState } from 'react';
import {
  Platform,
  Pressable,
  StyleSheet,
  StyleProp,
  TextInput,
  TextInputProps,
  View,
  ViewStyle,
} from 'react-native';
import { AppIcon, type AppIconName } from './app-icon';
import { fonts, m3Colors, m3Shape, spacing } from '../theme/proulr-theme';

const webInputLock =
  Platform.OS === 'web'
    ? ({
        WebkitTextFillColor: m3Colors.onSurface,
        caretColor: m3Colors.onSurface,
      } as object)
    : null;

export function TextField(
  props: TextInputProps & {
    containerStyle?: StyleProp<ViewStyle>;
    focused?: boolean;
    inputRef?: React.Ref<TextInput>;
  },
) {
  const { containerStyle, focused, inputRef, style, multiline, ...rest } = props;
  return (
    <View
      style={[
        styles.field,
        multiline && styles.fieldMultiline,
        focused && { borderColor: m3Colors.primary, borderWidth: 2 },
        containerStyle,
      ]}
    >
      <TextInput
        ref={inputRef}
        placeholderTextColor={m3Colors.onSurfaceVariant}
        multiline={multiline}
        textAlignVertical={multiline ? 'top' : 'center'}
        style={[styles.fieldInput, multiline && styles.fieldInputMultiline, webInputLock, style]}
        {...rest}
      />
    </View>
  );
}

export function PasswordField(
  props: TextInputProps & {
    containerStyle?: StyleProp<ViewStyle>;
    inputRef?: React.Ref<TextInput>;
  },
) {
  const { containerStyle, inputRef, ...rest } = props;
  const [visible, setVisible] = useState(false);

  return (
    <View style={[styles.field, styles.passwordField, containerStyle]}>
      <TextInput
        ref={inputRef}
        placeholderTextColor={m3Colors.onSurfaceVariant}
        style={[styles.fieldInput, styles.passwordInput, webInputLock]}
        secureTextEntry={!visible}
        {...rest}
      />
      <Pressable
        onPress={() => setVisible((v) => !v)}
        hitSlop={8}
        style={styles.passwordToggle}
        accessibilityLabel={visible ? 'Ocultar senha' : 'Mostrar senha'}
        accessibilityRole="button"
      >
        <AppIcon
          name={(visible ? 'visibility-off' : 'visibility') as AppIconName}
          size={20}
          color={m3Colors.onSurfaceVariant}
        />
      </Pressable>
    </View>
  );
}

const styles = StyleSheet.create({
  field: {
    minHeight: 56,
    borderRadius: m3Shape.cornerExtraSmall,
    backgroundColor: 'transparent',
    borderWidth: 1,
    borderColor: m3Colors.outline,
    paddingHorizontal: spacing.sm,
    justifyContent: 'center',
  },
  fieldMultiline: {
    minHeight: 128,
    justifyContent: 'flex-start',
    paddingVertical: spacing.md,
  },
  fieldInput: { color: m3Colors.onSurface, fontSize: 16, fontFamily: fonts.regular },
  fieldInputMultiline: {
    fontSize: 18,
    lineHeight: 26,
    minHeight: 96,
    width: '100%',
  },
  passwordField: { flexDirection: 'row', alignItems: 'center', paddingRight: spacing.sm },
  passwordInput: { flex: 1 },
  passwordToggle: {
    width: 40,
    height: 40,
    alignItems: 'center',
    justifyContent: 'center',
  },
});