const toast = Toast.makeText(document.body, "Hello Toast", Toast.LENGTH_SHORT).show();

const successToast = Toast.makeText(document.body, "✅ Success! Your action was completed successfully.", Toast.LENGTH_SHORT);

    successToast.setStyle("success") // Toast.STYLE_SUCCESS
    .setPosition(Toast.POSITION_BOTTOM_CENTER)
    .setAnimation(Toast.WAVE_IN,Toast.WAVE_OUT)    
    .show();

const errorToast = Toast.makeText(
  document.body,
  "Oops! Something went wrong. Please try again later.",
  Toast.LENGTH_LONG
);
    errorToast.setStyle(Toast.STYLE_ERROR)
    .setPosition(Toast.POSITION_TOP_RIGHT)
    .setAnimation(Toast.SLIDE_IN_TOP,Toast.SLIDE_OUT_TOP)
    .setDismissible(true,"#fff")
    errorToast.show();

const infoToast = Toast.makeText(document.body, "ℹ️ Here's an important update for you!", Toast.LENGTH_SHORT);

    infoToast.setStyle("info"); // Toast.STYLE_INFO
    infoToast.setPosition(Toast.POSITION_TOP_LEFT);
    infoToast.setAnimation(Toast.FADE);
    infoToast.show();

const toast = Toast.makeText(
  document.body,
  " This is a beautifully styled custom toast!",
  Toast.LENGTH_LONG
);

let toastStyle = {
  background: "linear-gradient(90deg, #ff7eb3, #ff758c)",
  color: "#fff",
  borderRadius: "10px",
  padding: "15px",
  fontSize: "16px",
  boxShadow: "0 5px 15px rgba(0, 0, 0, 0.3)",
};

toast
  .setStyle(toastStyle)
  .setIcon("./assets/custom-icon.svg", Toast.ICON_SIZE.EXTRA_LARGE) // You Can Add An Image Using Link
  .setPosition(Toast.POSITION_BOTTOM_RIGHT)
  .setAnimation(Toast.SLIDE_BOTTOM_RIGHT, Toast.SLIDE_BOTTOM_OUT)
  .show();

let iconUrl =
  "https://soufianodev.github.io/Toast-JS/assets/checkmark_150x150.webm";

const toastIcon = Toast.makeText(document.body, "Hello Toast Icon");
toastIcon.setStyle(Toast.STYLE_DEFAULT_2); // you can use   toastIcon.setStyle("defult_1")
toastIcon.setIcon(iconUrl); //Supported formats: .svg , .png, .jpg, .jpeg, .gif, .webm, .mp4.
toastIcon.show();

const customDurationToast1 = Toast.makeText(
  document.body,
  "This toast will be visible for 9 seconds.",
  9000
); // 9 seconds
customDurationToast1.setStyle("info");
customDurationToast1.setPosition(Toast.POSITION_BOTTOM_LEFT);
customDurationToast1.show();

const customDurationToast2 = Toast.makeText(
  document.body,
  "This toast will be visible for 15 seconds.",
  Toast.LENGTH_SHORT
); // LEGTH_SHORT = 3000 But now Duration = 15000
customDurationToast2.setDuration(15000); // 15 seconds
customDurationToast2.show();

const toast = Toast.makeText(document.body, "Hello Toast", Toast.LENGTH_SHORT);
toast.setDismissible(true);
toast.show();

const customCloseToast = Toast.makeText(
  document.body, "This toast has a custom close button color!", 7000); //Note: Toast notification will be automatically hidden if duration < 6.5 seconds.

customCloseToast.setStyle(Toast.STYLE_LIGHT_MODE)
.setPosition(Toast.POSITION_TOP_CENTER)
.setDismissible(true,"#000000") // Set close button color to black);
customCloseToast.show();

const toast = Toast.makeText(document.body, "Hello Toast", Toast.LENGTH_SHORT);

// Listen for events
toast.on('show', function(t) {
  console.log('Toast is visible!');
});

toast.on('hide', function(t) {
  console.log('Toast was hidden!');
});

toast.on('dismiss', function(t) {
  console.log('User dismissed the toast!');
});

toast.show();

const toast = Toast.makeText(document.body, "This is a very long message that might overflow the toast container", Toast.LENGTH_LONG);

// Options: 'ellipsis' (default), 'wrap', 'clip'
toast.setTextOverflow('wrap');  // Text will wrap to multiple lines
toast.setTextOverflow('ellipsis'); // Text will be truncated with ...
toast.setTextOverflow('clip'); // Text will be clipped without ellipsis
toast.show();

// Instead of toast.show(), use Toast.Manager.show() for automatic queuing
const toast1 = Toast.makeText(document.body, "First toast", Toast.LENGTH_SHORT);
const toast2 = Toast.makeText(document.body, "Second toast", Toast.LENGTH_SHORT);
const toast3 = Toast.makeText(document.body, "Third toast", Toast.LENGTH_SHORT);

// These will be queued and displayed one after another (max 3 visible at once)
Toast.Manager.show(toast1);
Toast.Manager.show(toast2);
Toast.Manager.show(toast3);

import React from 'react';
import ReactDOM from 'react-dom';

class App extends React.Component {
  showToast = () => {
    const toast = Toast.makeText(
      document.body,
      "Hello I'm a Toast From React!",
      Toast.LENGTH_SHORT
    );
    toast.setStyle(Toast.STYLE_SUCCESS);
    toast.setPosition(Toast.POSITION_TOP_CENTER);
    toast.show();
  };

  render() {
    return (
      <div>
        <button onClick={this.showToast}>Show Toast</button>
      </div>
    );
  }
}

ReactDOM.render(<App />, document.getElementById('root'));