import React, { useState } from "react";

import { View } from "../View";
import Input from "./Input";
import type { InputProps } from "./Input";

type Props = Exclude<"multiline", InputProps>;

const TextArea = (props: Props) => {
  const [height, setHeight] = useState(24);
  const onContentSizeChange = (e) => {
    const { height: contentHeight } = e.nativeEvent.contentSize;
    setHeight((prevVal) => {
      const newVal = Math.max(24, contentHeight);
      return prevVal < newVal ? newVal : prevVal;
    });
  };

  return (
    <View style={{ height }}>
      <Input
        {...props}
        multiline
        onContentSizeChange={onContentSizeChange}
        style={{ height }}
      />
    </View>
  );
};

export default TextArea;