import { StyleSheet, TextInput, ViewStyle, type TextInputProps } from 'react-native';

import { useThemeColor } from '@/hooks/use-theme-color';

export type ThemedTextInputProps = TextInputProps & {
  lightColor?: string;
  darkColor?: string;
  reverse?:boolean;
  lvl?:number;
  border?:number;
  opacity?:string;
  type?: 'default' | 'title' | 'defaultSemiBold' | 'subtitle' | 'link';
};

//nb : pour border ne pas oublier de mettre en plus "borderWidth" dans le style du composant /!\
export function ThemedTextInput({style, lightColor, darkColor, reverse=false, lvl=1,border=-1,opacity="FF",type = 'default', ...rest}: ThemedTextInputProps) {

  var text:string = 'text'
  if(reverse){
    text += '_';
  }
  const color = useThemeColor({ light: lightColor, dark: darkColor}, text as 'text'|'text_');

  var lvlStr:string = "background";
  var borderColor ="";
  if(lvl>=0 && lvl<6){
    lvlStr+=lvl;
  }
  else lvlStr+='5';

  const backgroundColor = useThemeColor({ light: lightColor, dark: darkColor },lvlStr as 'background0'|'background1'|'background2'|'background3'|'background4'|'background5')+opacity;


  if(border!=-1){
    if(border>=0 && border<6){
      const borderStr="background"+border;
      borderColor = useThemeColor({ light: lightColor, dark: darkColor },borderStr as 'background0'|'background1'|'background2'|'background3'|'background4'|'background5');
    }
    else{
      borderColor = backgroundColor
    }
  }

  return (
    <TextInput
      style={[
        { color,backgroundColor,borderColor },
        type === 'default' ? styles.default : undefined,
        type === 'title' ? styles.title : undefined,
        type === 'defaultSemiBold' ? styles.defaultSemiBold : undefined,
        type === 'subtitle' ? styles.subtitle : undefined,
        type === 'link' ? styles.link : undefined,
        style,
      ]}
      {...rest}
      placeholderTextColor="#808080"
    />
  );
  
}

const styles = StyleSheet.create({
  default: {
    fontSize: 16,
    lineHeight: 24,
  },
  defaultSemiBold: {
    fontSize: 16,
    lineHeight: 24,
    fontWeight: '600',
  },
  title: {
    fontSize: 32,
    fontWeight: 'bold',
    lineHeight: 32,
  },
  subtitle: {
    fontSize: 20,
    fontWeight: 'bold',
  },
  link: {
    lineHeight: 30,
    fontSize: 16,
    color: '#0a7ea4',
  },
});