import React from 'react';
import Header from './TicketHeader.js';
import Data from './TicketData.js';
import Modal from 'react-modal';
import './Ticket.scss';
import EditAlerts from '../../../editAlert/EditAlerts';

export default class Ticket extends React.Component{

  constructor(props) {
    super(props);
    this.state = {showEditModal: false,data:{}};
  }

   
    handleEdit = (data) => {
      console.log('edit btn clicked', new Date().getTime());
        this.setState({'showEditModal': true});
        debugger
        this.setState({
            data: data
        });
        this.props.onModalOpen(data);
    }

    handleModalClose = () => {
        this.setState({showEditModal: false});
    }

   render(){
    const props = this.props;
    console.log("the props in ticket is {}",props);
    let ticketData = props.ticketData;
    let url = `${this.props.hostUrls.primePanelNewUrl}tickets?ticketType=${ticketData.header.ticketType}&ticketId=${ticketData.entireData.ticketId}`;
  return( <div >

               <div className="ticket-body">
                   <Header {...ticketData.header} completeTicketData={ticketData.entireData} onClick={this.handleEdit.bind(this)} data={ticketData.data} notificationRead= {ticketData.read} hostUrls={this.props.hostUrls}/>
                   <a href={url} target="_blank">
                        <Data fields={props.fields} data={ticketData.data} notificationRead= {ticketData.read} />
                   </a>
               </div>
        </div>
        
  
  )
  }

  
}