import React from 'react';
import Icon from "@/jsx/Components/Icon.jsx";

export default class FloatNotification extends React.Component {
  constructor(props) {
    super(props);
    this.intervalId = null;
    this.timout = 3000;
    this.state = {
      queue: [],
    };
  }

  /**
   * Handle component mount
   */
  componentDidMount() {

    // Set notification to the queue
    const {uid,text, type} = this.props;
    if (text === undefined || text.length === 0) {
      return;
    }

    this.setState(
      {
        queue: [{
          uid: uid,
          text: text,
          type: type,
          timestamp: new Date().getTime(),
        }]
      }
    )

    this.runQueue();
  }

  /**
   * Handle component update
   * @param prevProps
   * @param prevState
   * @param snapshot
   */
  componentDidUpdate(prevProps, prevState, snapshot) {

    // If the notification is not shown, show it
    const {uid, text, type} = this.props;
    if (uid !== prevProps.uid && text !== undefined && text.length > 0) {

      // If queue already has the same text do nothing
      if (this.state.queue.some(item => item.uid === uid)) {
        return;
      }

      // Add the new notification to the queue
      this.setState(
        {
          queue: [
            ...this.state.queue,
            {
              uid: uid,
              text: text,
              type: type,
              timestamp: new Date().getTime(),
            }
          ]
        }
      )

      this.runQueue();

    }

  }

  /**
   * Run the queue
   */
  runQueue() {

    this.intervalId = setInterval(() => {

      // If the queue is empty, stop the interval
      const {queue} = this.state;
      if (queue.length === 0) {
        clearInterval(this.intervalId);
        this.intervalId = null;
        return;
      }

      // Remove outdated notifications
      queue.forEach((item, index) => {
        const now = new Date().getTime();
        if (now - item.timestamp > this.timout) {
          queue.splice(index, 1);
        }
      });

      // Update the state with the new queue
      this.setState({queue: queue});

    }, 500);

  }

  handleClose(index) {

    // Remove the notification from the queue
    const {queue} = this.state;
    queue.splice(index, 1);
    this.setState({queue: queue});

    // If the queue is empty, stop the interval
    if (queue.length === 0 && this.intervalId) {
      clearInterval(this.intervalId);
      this.intervalId = null;
    }

  }

  render() {

    if (!this.state.queue || this.state.queue.length === 0) {
      return null;
    }

    return (
      <div className="ra-notification-queue">
        {
          this.state.queue.map((item, index) => {
            return (
              <div key={index} className={`ra-notification float-notification ${item.type}`}>
                <span className="ra-notification-text">{item.text}</span>
                <button className="ra-notification-close" onClick={this.handleClose.bind(this, index)}>
                  <Icon strokeWidth={2.5}>close</Icon>
                </button>
              </div>
            );
          })
        }
      </div>
    );
  }

}