import React, { useCallback, useRef } from "react";
import { SipProvider } from "react-jssip-wrapper";
import { IStore, setSip } from "store";
import { useDispatch, useSelector } from "react-redux";

const Sip = () => {
  const dispatch = useDispatch();
  const ref = useRef<any>();
  const connectionConfig = useSelector(
    (state: IStore) => state.sip.connectionConfig
  );

  const onRefChange = useCallback((node: any) => {
    if (node === null) {
      // DOM node referenced by ref has been unmounted
    } else {
      dispatch(setSip({ ref: node }));
      ref.current = node;
    }
  }, []);

  if (!connectionConfig) {
    return null;
  }

  // const call = () =>
  //   ref.current?.startCall(`sip:${phone}@${connectionConfig.server}`);
  //
  // const transfer = () => {
  //   ref.current?.state?.rtcSession?.refer(
  //     `sip:${transferPhone}@${connectionConfig.server}`
  //   );
  // };

  return (
      <SipProvider
        host={connectionConfig.server as string}
        port={7443}
        pathname="" // Path in socket URI (e.g. wss://sip.example.com:7443/ws); "" by default
        user={connectionConfig.user as string}
        password={connectionConfig.password as string} // usually required (e.g. from ENV or props)
        autoRegister={false} // true by default, see jssip.UA option register
        // autoAnswer={true} // automatically answer incoming calls; false by default
        iceRestart={true} // force ICE session to restart on every WebRTC call; false by default
        sessionTimersExpires={30000}
        debug={false} // wh
        ref={onRefChange}
        iceServers={[
          {
            urls: [
              "stun:stun.l.google.com:19302",
              "stun:stun1.l.google.com:19302",
            ],
          },
        ]}
        setAction={(data: any) => {
          dispatch(setSip({ ...data, ref: ref.current }));
        }}
        audioId="newAudioId" // default 'sip-provider-audio' for output audio
      />
  );
};

export default Sip;

{
  sip: sipType,
  call: callType,

  registerSip: PropTypes.func,
  unregisterSip: PropTypes.func,

  answerCall: PropTypes.func,
  startCall: PropTypes.func,
  stopCall: PropTypes.func,
}

import {
  SIP_STATUS_DISCONNECTED,
  //SIP_STATUS_...,
  CALL_STATUS_IDLE,
  //CALL_STATUS_...,
  SIP_ERROR_TYPE_CONFIGURATION,
  //SIP_ERROR_TYPE_...,
  CALL_DIRECTION_INCOMING,
  CALL_DIRECTION_OUTGOING,
} from "react-jssip-wrapper";

import { callType, extraHeadersType, iceServersType, sipType } from "react-jssip-wrapper";