import React from "react";
import { TextInput } from "react-native";
import type { F2TextInputProps } from "./types";
import { FlipColors } from "@flip.id/ui-kit";
import { useKeyboard } from "../../hooks";
import { TextUtils } from "../../utils";

const ScalableTextInput: React.FC<F2TextInputProps> = ({
  style,
  onRef,
  children,
  decoration,
  placeholderTextColor,
  isScaled = true,
  ...props
}) => {
  useKeyboard();
  const texInputUtils = TextUtils.getTextInputStyle(
    style,
    decoration || "medium",
    placeholderTextColor || ""
  );
  const scaledStyle = isScaled
    ? {
        fontSize: texInputUtils.scaledFontSize,
        lineHeight: texInputUtils.scaledLineHeight,
      }
    : {};

  return (
    <TextInput
      accessibilityLabel={props.accessibilityLabel}
      ref={onRef}
      placeholderTextColor={texInputUtils.placeholderTextColor}
      style={[
        { color: FlipColors.neutral.MainText },
        style,
        { fontFamily: texInputUtils.fontFamily },
        scaledStyle,
      ]}
      {...props}
    >
      {children}
    </TextInput>
  );
};

export default ScalableTextInput;