import { formDataGenerator, other helpers... } from '@mbs-dev/react-helpers';

  const myObject = {
  username: 'johndoe',
  profile: {
      firstName : 'John',
      lasttName : 'Doe',
    },
  };

  const formData = new FormData();
  formDataGenerator(myObject, '', formData);

  const myObject = {
  name: "John Doe",
  address: {
        street: "123 Main St",
        city: "Anytown",
    }
  };

  const formData = new FormData();
  formDataGenerator(myObject, "user", formData); // "user" is the prefix

  const randomKey = randomKeyGenerator(16); 
  console.log(randomKey); // Output: Example: "oF291n3LKJ4t7B5q" 

  const reference = referenceGenerator(undefined, "hours", "day");
  console.log(reference); // Output: Example: "1805" (This includes the current hours, day)

  const reference = referenceGenerator(3, "day", "month", "year");
  console.log(reference); // Output: Example: "24052024" (This includes the current day, month, and year)

  const referenceWithRandom = referenceGenerator(5, "day", "month", "year", "randomNumber");
  console.log(referenceWithRandom); // Output: Example: "2405202412345" (Includes date and a random number)

  const title = "The following text is used as an example";
  const slug = slugGenerator(title);
  console.log(slug); // Output: "the-following-text-is-used-as-an-example"

  const arabicTitle = "يتم استعمال النص التالي كمثال";
  const arabicSlug = arabicSlugGenerator(arabicTitle);
  console.log(arabicSlug); // Output : "يتم-استعمال-النص-التالي-كمثال" 

  const App: React.FC = () => {
    const exportData = async () => {
      const response = await apiRequest({
        route: 'data-to-export',
        method: 'GET',
      });
      if (response.status === 200) {
        await exportDataToExcel(response.data, 'UserData' )
      }
    }
    return (
        <main>
            <button onClick={exportData}>Export Data</button>
        </main>
    );
    };

    export default App;

  const sentence = "Hello World, how are you?";
  const firstWord = getFirstWord(sentence);
  console.log(firstWord); // Output: "Hello"

  const number = 10;
  const isNumberEven = isEven(number);
  console.log(isNumberEven); // Output: true

  const encodedHtml = encodeHtmlTags("<div>Hello</div>");
  console.log(encodedHtml); // Output: "&lt;div&gt;Hello&lt;/div&gt;"

  const decodedHtml = decodeHtmlTags("<div>Hello</div>");
  console.log(decodedHtml); // Output: "<div>Hello</div>"

  // This can be called from an onClick event handler of a button
  import { handleScrollTop } from '@mbs-dev/react-helpers'
  const App: React.FC = () => {
    return (
        <main>
            <button onClick={handleScrollTop}>Back To Top</button>
        </main>
    );
    };

    export default App;

  const productPrice = "1234.5678";
  const formattedPrice = formatPrice(productPrice);
  console.log(formattedPrice); // Output: "1 234.57"

  import { DateFormatTemplate } from '@mbs-dev/react-helpers'
  const myDate = "2024-05-01";
  const customTemplate: DateFormatTemplate = ({ day, month, year }) => `${month}/${day}/${year}`;

  // Option 1: Using default template (YYYY-MM-DD)
  const formattedDate = formatDate(myDate);

  // Option 2: Using custom template
  // const customTemplate = (date) => `${date.day}/${date.month}/${date.year}`;
  const formattedDateWithCustomTemplate = formatDate(myDate, customTemplate);

  // Option 3: Formatting for input value
  const formattedDateForInput = formatDate(myDate, undefined, true);

  const longText = "This is a very long text that needs to be truncated.";
  const truncatedText = TruncateText({ text: longText, maxLength: 20 });
  console.log(truncatedText); // Output: "This is a very lon..."

  const todaysDate = getTodayDate();
  console.log(todaysDate); // Output: "01-05-2024" (assuming all elements are included)

  const todaysDateShort = getTodayDate(["day", "month"]);
  console.log(todaysDateShort); // Output: "01-05" (includes only day and month)

  const htmlString = "This is a text with <b>bold</b> and <i>italic</i>.";
  const plainText = removeHtmlTags(htmlString);
  console.log(plainText); // Output: "This is a text with bold and italic." (HTML tags are removed)

  postNotify(entity):
  Displays a success notification for adding a new entity. 
  e.g. 'Product ajouté avec succès' , 'User ajouté avec succès'
  
  updateNotify(entity):
  Displays a success notification for updating an entity.
  e.g. 'Product modifié avec succès' , 'User modifié avec succès'
  
  deleteNotify(entity):
  Displays a success notification for deleting an entity.
  e.g. 'Product supprimé avec succès' , 'User supprimé avec succès'
  
  successNotify(text):
  Displays a general success notification with custom text.
  
  errorNotify(text):
  Displays an error notification with custom text.
  
  infoNotify(text):
  Displays an informational notification with custom text.
  
  warningNotify(text):
  Displays a warning notification with custom text.
  
  enCustomeErrorNotify():
  Displays a custom error notification in English ("Something wrong, try again").
  
  frCustomeErrorNotify():
  Displays a custom error notification in French ("Une erreur est survenue, réessayez").

  import { Outlet } from 'react-router-dom'
  import { LayoutProvider } from '../_metronic/layout/core'
  import { ToastContainer , notify} from '@mbs-dev/react-helpers'
  import "react-toastify/dist/ReactToastify.css";

  const App = () => {
    console.log(notify.successNotify('Access the successNotify from notify'));
    console.log(notify.frCustomeErrorNotify());

    return (
          <LayoutProvider>
            <ToastContainer />
            <Outlet />
          </LayoutProvider>
    )
  }

  export { App }