Untitled

import React, { useState, useEffect } from 'react';
import Modal from 'react-modal';
import DatePicker from 'react-datepicker';
import 'react-datepicker/dist/react-datepicker.css';
import { getAllTickets } from '../../services/TicketService';

function AgentTicket() {
  const [modalIsOpen, setModalIsOpen] = useState(false);
  const [selectedTicket, setSelectedTicket] = useState(null);
  const [selectedAction, setSelectedAction] = useState(null);
  const [tickets, setTickets] = useState([]);
  const [message, setMessage] = useState('');
  const [chatMessages, setChatMessages] = useState([]);
  const [selectedDate, setSelectedDate] = useState(new Date());
  const [interactions, setInteractions] = useState([]);

  useEffect(() => {
    loadTickets();
  }, []);

  const loadTickets = async () => {
    try {
      const ticketsData = await getAllTickets();
      setTickets(ticketsData.data.$values);
    } catch (error) {
      console.error('Error Loading tickets', error);
    }
  };

  const handleActionClick = (ticketId, action) => {
    setSelectedTicket(ticketId);
    setSelectedAction(action);
    setModalIsOpen(true);
  };

  const handleChat = (chat) => {
    // Update interactions table with chat message
    const newInteraction = {
      interaction_type: 'Chat',
      ticketId: selectedTicket,
      interaction_id: chat,
      interaction_details: message,
    };
    setInteractions([...interactions, newInteraction]);
    setChatMessages([...chatMessages, message]);
    setMessage('');
    setSelectedAction(chat);
  };

  const sendMessage = () => {
    if (message.trim() !== '') {
      handleChat('chat');
    }
  };

  const handleCall = (call) => {
    // Update interactions table with call
    const newInteraction = {
      interaction_type: 'Call',
      ticketId: selectedTicket,
      interaction_id: call,
      interaction_details: 'Call made',
    };
    setInteractions([...interactions, newInteraction]);
    setSelectedAction(call);
  };

  const handleScheduleMeeting = (meet) => {
    console.log('Selected Date:', selectedDate);
    setSelectedAction(meet);
  };

  const closeModal = () => {
    setModalIsOpen(false);
  };

  return (
    <div>
      <table className="table">
        <thead className="thead-dark">
          <tr>
            <th scope="col">Customer Id</th>
            <th scope="col">Product Id</th>
            <th scope="col">Status</th>
            <th scope="col">Action</th>
          </tr>
        </thead>
        <tbody>
          {tickets.map((ticket) => (
            <tr key={ticket.id}>
              <td scope="row">{ticket.customerId}</td>
              <td scope="row">{ticket.productId}</td>
              <td scope="row">{ticket.status}</td>
              <td scope="row">
                <button
                  className="btn btn-primary"
                  data-toggle="button"
                  aria-pressed="false"
                  autoComplete="off"
                  onClick={() => handleActionClick(ticket.id, 'Action')}
                >
                  Action
                </button>
              </td>
            </tr>
          ))}
        </tbody>
      </table>

      <Modal isOpen={modalIsOpen} onRequestClose={closeModal}>
        <h2>
          {selectedAction} functionality for Ticket {selectedTicket}
        </h2>

        {selectedAction === 'chat' && (
          <div>
            <div>
              {chatMessages.map((msg, index) => (
                <div key={index}>{msg}</div>
              ))}
            </div>
            <input
              type="text"
              value={message}
              onChange={(e) => setMessage(e.target.value)}
              placeholder="Type your message..."
            />
            <button onClick={sendMessage}>Send</button>
          </div>
        )}

        <div style={{ marginTop: '30px' }}>
          <button
            style={{ marginLeft: '10px', marginRight: '10px' }}
            className="btn btn-lg btn-primary"
            onClick={() => handleChat('chat')}
          >
            Chat
          </button>
          <button
            style={{ marginLeft: '10px', marginRight: '10px' }}
            className="btn btn-lg btn-primary ml-2"
            onClick={() => handleCall('call')}
          >
            Call
          </button>
          <button
            style={{ marginLeft: '10px', marginRight: '10px' }}
            className="btn btn-lg btn-primary ml-2"
            onClick={() => handleScheduleMeeting('meet')}
          >
            Schedule Meeting
          </button>
        </div>

        {selectedAction === 'meet' && (
          <div>
            <DatePicker
              selected={selectedDate}
              onChange={(date) => setSelectedDate(date)}
              showTimeSelect
              timeFormat="HH:mm"
              timeIntervals={15}
              dateFormat="MMMM d, yyyy h:mm aa"
            />
            <button onClick={handleScheduleMeeting}>Schedule Meeting</button>
          </div>
        )}

        <button
          style={{ position: 'absolute', top: '20px', right: '20px' }}
          className="btn btn-secondary btn-lg"
          onClick={closeModal}
        >
          Close
        </button>
      </Modal>
    </div>
  );
}

export default AgentTicket;