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';
 
// const tickets = [
//   { id: 1, customerId: 'Cust123', agentId: 'Agent456', productId: 'Prod789', description: 'abc', status: 'Open', action: 'chat' },
//   { id: 2, customerId: 'Cust234', agentId: 'Agent789', productId: 'Prod123', description: 'edf', status: 'Closed', action: 'call' },
//   // Add more ticket data as needed
// ];
 
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());


    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) => {
        // Add chat functionality
        console.log('Chat functionality for Ticket', selectedTicket);
        setSelectedAction(chat);
      };
 
      const sendMessage = () => {
        if (message.trim() !== '') {
          setChatMessages([...chatMessages, message]);
          setMessage('');
        }
      };
 
      const handleCall = (call) => {
        const contactNumber = '9812345678';
        window.prompt('Contact Number:', contactNumber);
        setSelectedAction(call);
      };
 
      const handleScheduleMeeting = (meet) => {
        console.log('Selected Date:', selectedDate);
        setSelectedAction(meet);
      };
 
    const closeModal = () => {
      setModalIsOpen(false);
    };
 
  return (
    <div>
    <table class="table">
      <thead class="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 class="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'}} class="btn btn-lg btn-primary" onClick={() => handleChat('chat')}>Chat</button>
          <button style={{'marginLeft' : '10px', 'marginRight': '10px'}} class="btn btn-lg btn-primary ml-2" onClick={() => handleCall('call')}>Call</button>
          <button style={{'marginLeft' : '10px', 'marginRight': '10px'}} class="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'}} class="btn btn-secondary btn-lg" onClick={closeModal}>Close</button>
      </Modal>
 
    </div>
  );
}
 
export default AgentTicket;