import { useState } from 'react';

function TextShare({ textHistory, setTextHistory, dataChannels, useFallback, socket, code, copied, setCopied }) {
  const [textInput, setTextInput] = useState('');

  const handleSend = () => {
    if (!textInput.trim()) return;
    console.log('handleSend:', { dataChannels, useFallback, code });
    if (!useFallback && Object.keys(dataChannels).length > 0) {
      Object.keys(dataChannels).forEach((peerId) => {
        if (dataChannels[peerId].readyState === 'open') {
          dataChannels[peerId].send(JSON.stringify({ type: 'text', text: textInput }));
          console.log(`Sent text to peer ${peerId}`);
        }
      });
    } else if (useFallback && socket && code) {
      socket.emit('text', { code, text: textInput });
      console.log(`Sending text via socket for room ${code}: ${textInput}`);
    }
    setTextHistory((prev) => [...prev, textInput]); // Update sender's textHistory
    setTextInput('');
  };

  const handleKeySend = (e) => {
    if (e.key === 'Enter' && !e.shiftKey) {
      e.preventDefault(); // Prevent adding a new line
      handleSend(); // Trigger send action
    }
  };

  const selectText = (x) => {
    const element = document.getElementById(`msg-${x}`);
    if (element) {
    //--if (element && window.getSelection) {
    //--  const selection = window.getSelection();
    //--  selection.removeAllRanges();
    //--  const range = document.createRange();
    //--  range.selectNodeContents(element);
    //--  selection.addRange(range); // for marking only
      //document.execCommand('copy') // deprecated
      navigator.clipboard.writeText(element.textContent); // new way
      setCopied(`msg-${x}`);
      setTimeout(() => setCopied(null), 2000); // Reset after 2 seconds
    } else {
      console.warn(`Element msg-${x} not found or selection API unavailable`);
    }
  };

  return (
    <div className="mb-4">
      <h2 className="text-xl font-semibold mb-2">Share Text</h2>
      <textarea
        className="w-full p-2 border rounded bg-pink-100 text-purple-900"
        value={textInput}
        onChange={(e) => setTextInput(e.target.value)}
        onKeyDown={handleKeySend}
        placeholder="Enter text to share"
      />
      <button
        className="bg-emerald-600 text-darkPurple px-4 py-2 rounded hover:bg-emerald-500"
        onClick={handleSend}
      >
        Send
      </button>
      <br />
      <div className="mt-2" id="textview">
        <h3 className="text-lg font-semibold">Messages</h3>
        <ul className="list-disc pl-5">
          {textHistory?.length > 0 ? (
            textHistory.map((msg, index) => (
              <li key={index}>
                <button
                  className="bg-sky-600 text-darkPurple px-4 py-2 rounded hover:bg-sky-500"
                  onClick={() => selectText(index)}
                >
                  {copied === `msg-${index}` ? 'Copied!' : `{}`}
                </button>
                <pre id={`msg-${index}`}>{msg}</pre></li>
            ))
          ) : (
            <li><pre>No messages yet</pre></li>
          )}
        </ul>
      </div>
    </div>
  );
}

export default TextShare;
