import React, { useEffect, useCallback } from "react";
import { Input } from "@flip.id/ui-kit";
import WriteNotes from "../../../icons/function/WriteNotes";
import { VStack, Box, Flex } from "native-base";
import type { AccessibilityProps } from "react-native";
import type { InterfaceInputProps } from "native-base/lib/typescript/components/primitives/Input/types";

export interface INotesContainer {
  note: string;
  onChangeNote?: (text: string) => void;
  inputRef?: InterfaceInputProps["ref"];
}

export const NotesContainer: React.FC<INotesContainer & AccessibilityProps> = (
  props
) => {
  const { note, onChangeNote, inputRef } = props;

  const onChangeText = useCallback(
    (text: string) => {
      onChangeNote?.(text);
    },
    [onChangeNote]
  );

  useEffect(() => {
    onChangeText(`${note}`);
  }, [note, onChangeText]);

  return (
    <VStack>
      <Box
        pt="8px"
        pl="8px"
        pr="8px"
        pb="8px"
        bg={"neutral.Container"}
        borderRadius="16px"
      >
        <Flex direction="row" alignItems="center">
          <WriteNotes color="neutral.Container" size="6" />
          <Input
            ref={inputRef}
            fontSize="sm"
            placeholder={note}
            borderWidth={0}
            onChangeText={onChangeText}
            fontStyle="italic"
          />
        </Flex>
      </Box>
    </VStack>
  );
};

export default NotesContainer;