import React, { useState, useEffect } from "react";

import axios from "axios";
const { Twilio, Device } = require("twilio-client");


const VoiceCall = (props) => {

let device;
const [token, setToken] = useState([]);
const singleData = props.singleData;


const [showModal, setShowModal] = useState(false)

useEffect(() => {
if (typeof window !== 'undefined') {

// let bearer_token = localStorage.getItem("auth_token");
const headers = {
headers: {
Authorization: 'bearer_token',
},
};

let url = `http://localhost:3002/get-voice-token`;

try {


axios
.post(url, headers)
.then((response) => {
document.getElementById("button-call-" + singleData?.id).style.display =
"none";
document.getElementById(
"button-hangup-" + singleData?.id
).style.display = "none";
// Setup Twilio.Device
device = new Device(response.data.token, {
codecPreferences: ["opus", "pcmu"],
fakeLocalDTMF: true,
enableRingingState: true,
});

device.on("ready", function (device) {
document.getElementById(
"button-call-" + singleData?.id
).style.display = "";
document.getElementById(
"button-hangup-" + singleData?.id
).style.display = "none";
});

device.on("error", function (error) {
document.getElementById(
"button-call-" + singleData?.id
).style.display = "none";
document.getElementById(
"button-hangup-" + singleData?.id
).style.display = "none";
});

device.on("connect", function (conn) {
document.getElementById(
"button-call-" + singleData?.id
).style.display = "none";
document.getElementById(
"button-hangup-" + singleData?.id
).style.display = "flex";
});

device.on("disconnect", function (conn) {
document.getElementById(
"button-call-" + singleData?.id
).style.display = "flex ";
document.getElementById(
"button-hangup-" + singleData?.id
).style.display = "none";
});

document.getElementById("button-call-" + singleData?.id).onclick =
function () {
var params = {
To: props.phone,
};


try {



if (device) {
var outgoingConnection = device.connect(params);
outgoingConnection.on("ringing", function () {
document.getElementById(
"button-call-" + singleData?.id
).style.display = "none";
document.getElementById(
"button-hangup-" + singleData?.id
).style.display = "flex";
});
}
} catch (error) {
console.log('===============', error)
}
};

// Bind button to hangup call
document.getElementById("button-hangup-" + singleData?.id).onclick =
function () {
if (device) {
device.disconnectAll();
}
};
})
.catch(function (error) {
console.log("==========================>>>", error);
});
} catch (error) {
console.log('Catch Error ===>', error)
}
}
}, []);

return (
<>
<button
id={"button-call-" + singleData?.id}
className={`w-[129px] laptop-md:w-[110px] h-[34px] text-[#FCFCFC] desktop-sm:text-[11px] text-[12px] flex justify-center items-center gap-2 font-medium shadow-button-shadow bg-[#0052FF] rounded-[5px]`}
style={{ display: "flex" }}
onClick={() => setShowModal(!showModal)}
>

Start Call
</button>
<div onClick={() => setShowModal(!showModal)}
>
<div className={`${showModal ? 'flex justify-end tablet-xs:justify-center tablet-xs:pl-2 absolute right-20 top-20' : 'hidden'}`}>
<div className="mobile-sm:w-full w-[425px] flex h-[63px] justify-start px-4 items-center gap-3 rounded-[4px] border-[1px] border-solid border-[#189BFA] bg-[#EDF7FF]">
<div className="font-medium text-[#189BFA] tablet-xs:px-0 px-1 mobile-sm:text-xs text-base">
Ringing...
</div>
<div className="flex gap-4 px-2">

<span className="font-normal text-[#189BFA] mobile-sm:text-xs text-[19px]">
{singleData?.phone_tel}
</span>
</div>
<div className="pl-2">
<button
className="w-[91px] flex gap-2 mobile-sm:text-xs justify-center items-center h-[27px] text-[12px] text-[#C10808] font-normal bg-[#FFCECE] rounded-[4px]"
id={"button-hangup-" + singleData?.id}
onClick={() => setShowModal(!showModal)}
>

End Call
</button>
</div>
</div>
</div>
</div>
</>
);
};

export default VoiceCall;