import React, { useState } from "react";
const { __ } = wp.i18n;
import '../../../scss/settings/shortcode-tab.scss';
import { langString } from "../../../Helpers";
import { Tooltip } from 'react-tooltip';
import 'react-tooltip/dist/react-tooltip.css';

const shortcodes = [
  {
    title: "Microsoft Teams Meeting List",
    description: "Display a list of all Microsoft Teams meetings",
    code: '[mhub-msteams-meeting-list available="true"]',
    tooltip: "This shortcode displays all your upcoming Microsoft Teams meetings in a list format. Simply copy and paste it into any page or post.",
    parameterInfo: {
      title: "Available Parameters:",
      items: [
        { param: 'available', description: 'Filter list to show only available (upcoming) meetings. Use available="true"' }
      ]
    }
  },
  {
    title: "Upcoming Microsoft Teams Meetings",
    description: "Display upcoming Microsoft Teams meetings only",
    code: "[mhub-msteams-upcoming]",
    tooltip: "This shortcode displays upcoming Microsoft Teams meetings only. Simply copy and paste it into any page or post."
  },
];

const ShortcodesTab = () => {
  const [copiedIndex, setCopiedIndex] = useState(null);

  const handleCopyShortcode = (shortcode, index) => {
    const tempTextArea = document.createElement('textarea');
    tempTextArea.value = shortcode;
    document.body.appendChild(tempTextArea);

    tempTextArea.select();
    document.execCommand('copy');

    document.body.removeChild(tempTextArea);

    setCopiedIndex(index);

    // Reset copy status after a short delay
    setTimeout(() => setCopiedIndex(null), 1500);
  };

  return (
    <div className="shortcodes-tab">
      <h2>Microsoft Teams {langString('shortcodes')}</h2>
      <p>Use these shortcodes to display Microsoft Teams meetings on your website pages and posts.</p>
      <div className="shortcodes-list">
        {shortcodes.map((shortcode, index) => (
          <div key={index} className="shortcode-item shortcode-item-simple">
            <div className="shortcode-content">
              <div className="shortcode-header">
                <h3>{shortcode.title}</h3>
              </div>
              <p className="shortcode-description-simple">
                {shortcode.description}
                {shortcode.tooltip && (
                  <>
                    <a className="mhub-info" data-tooltip-id={`shortcode-${index}`} data-tooltip-content={shortcode.tooltip}>
                      <i className="dashicons dashicons-info"></i>
                    </a>
                    <Tooltip id={`shortcode-${index}`} place="right" type="info" effect="float" style={{ fontSize: '14px', maxWidth: '400px' }} />
                  </>
                )}
              </p>

              <div className="shortcode-code-wrapper">
                <code className="main-shortcode">{shortcode.code}</code>
                <button
                  onClick={() => handleCopyShortcode(shortcode.code, index)}
                  className="copy-shortcode-btn"
                >
                  {copiedIndex === index ? (<span> {langString('copied_success')}</span>) : (<><i className='dashicons dashicons-admin-page'></i> <span> {langString('copy_shortcode')}</span> </>)}
                </button>
              </div>

              {shortcode.parameterInfo && (
                <div className="shortcode-parameters">
                  <div className="parameters-header">
                    <strong>{shortcode.parameterInfo.title}</strong>
                  </div>
                  <div className="parameters-list">
                    {shortcode.parameterInfo.items.map((item, paramIndex) => (
                      <div key={paramIndex} className="parameter-item">
                        <code className="parameter-name">{item.param}</code>
                        <span className="parameter-description">{item.description}</span>
                      </div>
                    ))}
                  </div>
                </div>
              )}
            </div>
          </div>
        ))}
      </div>
    </div>
  );
};

export default ShortcodesTab;