import { useEffect, useState } from "@wordpress/element";

const TabPreview = ({messages, icons, delays, imgDir, enabled}) => {
  // const [messages, setMessages] = useState("");
  const orginalTabTitle = "Best Product Design Agency";
  const [msgIndex, setMsgIndex] = useState(0);
  const msgDelay = delays?.message ?? 1000;
  const iconDelay = delays?.icon ?? 1000;
  const musicDelay = delays?.music ?? 1000;

  let prevMessages = JSON.parse(JSON.stringify(messages));
  prevMessages.unshift(orginalTabTitle);

  const [iconIndex, setIconIndex] = useState(0);

  const selectedIcons = icons.map((iconGroup) => {
    return iconGroup.filter((icon) => icon.selected).map((icon) => icon.url);
  }).flat();

  const [musicPlaying, setMusicPlaying] = useState(false);


  useEffect(() => {
     const msgInterval = setInterval(() => {
      setMsgIndex((prevIndex) => {
        return ((prevIndex + 1) < prevMessages.length) ? (prevIndex + 1) : 0;
      })
     }, msgDelay)
     
     const iconInterval = setInterval(() => {
      setIconIndex((prevIndex) => {
        return ((prevIndex + 1) < selectedIcons.length) ? (prevIndex + 1) : 0;
      })
     }, iconDelay)

     const musicInterval = setInterval(() => {
      setMusicPlaying((prevState) => {
        return !prevState;
      });
     }, musicDelay);

     return () => {
      clearInterval(msgInterval);
      clearInterval(iconInterval);
      clearInterval(musicInterval);
     }
  }, [messages, icons, delays])

  return (
    <div className="container tab_preview tabrecall_mb_20">
      <h4 className="tabrecall_heading_2 tabrecall_mb_24">Tab Preview</h4>

      <div className="main_tab_preview">
        <div className="browser-tabs">
          <div className="tab active">
            <div className="tab-icon">A</div>
            <div className="tab-title">Best Product Design Agency</div>
            <div className="close-button">×</div>
          </div>
          {
            enabled ? (
                      <div className="tab inactive">
                        <img className="tab-icon" src={selectedIcons[iconIndex]} />
                        <div className="tab-title">{prevMessages[msgIndex]}</div>
                        <img className="audio-icon" src={imgDir + "tab-audio.png"} style={{
                          opacity: musicPlaying ? 1 : 0,
                        }} width="18px" />
                        <div className="close-button">×</div>
                      </div>
            ) : (
              <div className="tab inactive">
                  <img className="tab-icon" src={selectedIcons[0]} />
                  <div className="tab-title">{prevMessages[0]}</div>
                  <div className="close-button">×</div>
                </div>
            )
          }
        </div>
        <div className="previewLine"></div>
        <div className="content_area"></div>
        <div className="previewLine previewLine_2"></div>
      </div>
    </div>
  );
};

export default TabPreview;