Live language feedback (#1071)

* Add live language detection using 'lande' in TrackedTextarea.

* Remove 'Disable Language Detection'.

* Re-run linter.

website/src/components/Survey/TrackedTextarea.tsx

@@ -1,4 +1,23 @@
-import { Progress, Stack, Textarea, TextareaProps, useColorModeValue } from "@chakra-ui/react";
+import {} from "@chakra-ui/react";
+import lande from "lande";
+import { LanguageAbbreviations } from "src/lib/iso6393";
+import { useCookies } from "react-cookie";
+import React from "react";
+import {
+  Progress,
+  Stack,
+  Textarea,
+  TextareaProps,
+  useColorModeValue,
+  Button,
+  Modal,
+  ModalBody,
+  ModalCloseButton,
+  ModalContent,
+  ModalHeader,
+  ModalOverlay,
+  useDisclosure,
+} from "@chakra-ui/react";
 
 interface TrackedTextboxProps {
   text: string;
@@ -11,10 +30,55 @@ interface TrackedTextboxProps {
   onTextChange: (event: React.ChangeEvent<HTMLTextAreaElement>) => void;
 }
 
-export const TrackedTextarea = (props: TrackedTextboxProps) => {
-  const backgroundColor = useColorModeValue("gray.100", "gray.900");
+const killEvent = (e) => e.stopPropagation();
 
+export const TrackedTextarea = (props: TrackedTextboxProps) => {
+  const [wordLimitForLangDetection, setWordLimitForLangDetection] = React.useState(10);
+  const backgroundColor = useColorModeValue("gray.100", "gray.900");
+  const [cookies] = useCookies(["NEXT_LOCALE"]);
   const wordCount = (props.text.match(/\w+/g) || []).length;
+  const { isOpen, onOpen, onClose } = useDisclosure();
+  const currentLanguage = cookies["NEXT_LOCALE"];
+
+  const closeTemporaryIgnoreLanguageDetection = () => {
+    setWordLimitForLangDetection(2 * wordCount);
+    onClose();
+  };
+
+  console.log("", wordCount, wordLimitForLangDetection);
+  if (wordCount > wordLimitForLangDetection) {
+    let mostProbableLanguage;
+    try {
+      mostProbableLanguage = LanguageAbbreviations[lande(props.text)[0][0]];
+    } catch (error) {
+      mostProbableLanguage = "";
+    }
+
+    /*const mostProbableLanguage = lande(props.text);*/
+    if (mostProbableLanguage !== currentLanguage) {
+      setTimeout(() => {
+        onOpen();
+      }, 200);
+
+      return (
+        <>
+          <Modal isOpen={isOpen} onClose={closeTemporaryIgnoreLanguageDetection} size="xl" scrollBehavior={"inside"}>
+            {/* we kill the event here to disable drag and drop, since it is in the same container */}
+            <ModalOverlay onMouseDown={killEvent}>
+              <ModalContent alignItems="center">
+                <ModalHeader>Switch Language?</ModalHeader>
+                <ModalCloseButton />
+                <ModalBody>
+                  Do you want to switch language? The detected language is <b>{mostProbableLanguage}</b>, whereas your
+                  chosen language is <b>{currentLanguage}</b>. The language can be changed on the top right.
+                </ModalBody>
+              </ModalContent>
+            </ModalOverlay>
+          </Modal>
+        </>
+      );
+    }
+  }
 
   let progressColor: string;
   switch (true) {