import { Text, TextInput, View } from "react-native";
import React, { useState } from "react";
import { commonStyles } from "../../../../styles/commonStyle";
import { appColors, windowHeight, windowWidth } from "@src/themes";
import { external } from "../../../../styles/externalStyle";
import { styles } from "./styles";
import { useValues } from "@src/utils/context/index";
import { description, fiveBoxes } from "../../../../constant/index";
import { useSelector } from "react-redux";

export function DescriptionText({ onTextChange }: { onTextChange: any }) {
  const { bgContainer, textColorStyle, textRTLStyle, isDark } = useValues();
  const [inputValue, setInputValue] = useState("");

  const handleTextChange = (text: string) => {
    setInputValue(text);
    onTextChange(text);
  };
  const { translateData } = useSelector((state: any) => state.setting)

  return (
    <View style={[external.mt_10]}>
      <Text
        style={[
          styles.weightText,
          { color: textColorStyle, textAlign: textRTLStyle },
        ]}
      >
        {translateData?.descriptionn}
      </Text>
      <View
        style={[
          styles.container,
          {
            backgroundColor: isDark
              ? appColors.primaryText
              : appColors.whiteColor,
            borderColor: isDark ? appColors.darkBorder : appColors.border,
          },
        ]}
      >
        <TextInput
          multiline={true}
          autoFocus={false}
          placeholderTextColor={appColors.iconColor}
          style={[
            external.pv_10,
            external.ph_10,
            commonStyles.regularText,
            { textAlign: textRTLStyle },
            { color: isDark ? appColors.darkText : appColors.blackColor },
          ]}
          placeholder={translateData?.fiveBoxes}
          onChangeText={handleTextChange}
          value={inputValue}
        />
      </View>
    </View>
  );
}
