Untitled

import { IBlock } from "../../../framework/src/IBlock";
import { Message } from "../../../framework/src/Message";
import { BlockComponent } from "../../../framework/src/BlockComponent";
import MessageEnum, {
  getName
} from "../../../framework/src/Messages/MessageEnum";
import { runEngine } from "../../../framework/src/RunEngine";
import { AsyncStorage } from "react-native";

// Customizable Area Start

import { GiftedChat } from "react-native-gifted-chat";

// import AsyncStorage from "@react-native-async-storage/async-storage";

//@ts-ignore
import { ActionCable, Cable } from "@kesha-antonov/react-native-action-cable";

// Customizable Area End

export const configJSON = require("./config");

export interface Props {
  navigation: any;
  id: string;
  // Customizable Area Start
  // Customizable Area End
}

interface S {
  // Customizable Area Start
  txtInputValue: string;
  txtSavedValue: string;
  enableField: boolean;
  messages: any;
  token: any;
  cableCon: any;
  chatHistory:any;
  // Customizable Area End
}

interface SS {
  id: any;
}

// const actionCable = (token: string) => ActionCable.createConsumer(
//   `wss://lamsah-35220-ruby.35220.dev.ap-southeast-1.aws.svc.builder.ai//cable?token=${token}&customer_app=true`
// );

// const cable = new Cable({
//   channel: "ActiveAdmin::Chat::UserChannel",
//   conversation_id: 1
// });

export default class LiveChatController extends BlockComponent<Props, S, SS> {
  actionCable: any;
  getHistoryDataa:any;
  constructor(props: Props) {
    super(props);
    this.receive = this.receive.bind(this);

    this.onSend = this.onSend.bind(this);
    // Customizable Area Start
    this.subScribedMessages = [
      getName(MessageEnum.RestAPIResponceMessage),
      getName(MessageEnum.SessionResponseMessage),
      getName(MessageEnum.CountryCodeMessage)
    ];


    this.state = {
      txtInputValue: "",
      txtSavedValue: "A",
      enableField: false,
      messages: [],
      token: null,
      cableCon: [],
      chatHistory:[]
    };
    // Customizable Area End
    runEngine.attachBuildingBlock(this as IBlock, this.subScribedMessages);
  }

    async receive(from: String, message: Message) {
    if (
      getName(MessageEnum.RestAPIResponceMessage) === message.id &&
      this.getHistoryDataa != null &&
      this.getHistoryDataa === message.getData(getName(MessageEnum.RestAPIResponceDataMessage))
    ) {

      var responseJson = message.getData(
        getName(MessageEnum.RestAPIResponceSuccessMessage)
      );

          if ( responseJson !== undefined && responseJson?.errors === undefined) {
                // you have response 

                console.log(responseJson.data)
                if (responseJson.data !== null) {

                  const messages = responseJson.data.map((item: any) => ({
                  _id: item.attributes.id,
                  text: item.attributes.content,
                  createdAt: new Date(item.attributes.created_at),
                  user: {
                    _id: item.attributes.sender_type,
                    name: "Manager",
               
                  },
                  
                }))
                console.log(messages,"messages")
                this.setState({
                  messages: messages 
                });
                  
                } 


               

 
                // const messages = responseJson.data.map((item: any) => ({
                //   _id: item.attributes.id,
                //   text: item.attributes.content,
                //   createdAt: new Date(item.attributes.created_at),
                //   user: {
                //     _id: item.attributes.sender_type,
                //     name: "Manager",
               
                //   },
                  
                // }))
                
                // this.setState({
                //   messages: messages === null ? "hello" : message
                // });
      } else {
        var errorReponse = message.getData(
          getName(MessageEnum.RestAPIResponceErrorMessage)
        );

        console.log(responseJson,"error")

        this.parseApiCatchErrorResponse(errorReponse);
      }
     
    
  }

    
  }

  async componentDidMount() {
    this._cableCable();
    this.getHistoryData()
  }


  async componentWillUnmount(){
    this._disConnectChat()
  }

  _cableCable = async () => {
    console.log("Creating cable now");
    var token = await AsyncStorage.getItem("token");
    console.log(token, "token");
    this.actionCable = ActionCable.createConsumer(
      `wss://lamsah-35220-ruby.b35220.dev.eastus.az.svc.builder.ai/cable?token=${token}&customer_app=true`
    );
    // console.log(actionCable);

    const cable = new Cable({
      channel: "ActiveAdmin::Chat::UserChannel",
      conversation_id: 2
    }); 

    console.log(this.actionCable)

    

    this.setState({ cableCon: cable });

    const channel = cable.setChannel(
      `ActiveAdmin::Chat::UserChannel`,
      // channel name to which we will pass data from Rails app with `stream_from`
      this.actionCable.subscriptions.create({
        channel: "ActiveAdmin::Chat::UserChannel", // from Rails app app/channels/chat_channel.rb
        conversation_id: 2
      })
    );
    channel
      .on("received", (e: any) => 
      this.onRecieved(e)
      
      
      // console.log(e, "handleReceived")
      )
      .on("connected", (e: any) => console.log(e, "connected"))
      .on("rejected", (e: any) => console.log(e, "rejected"))
      .on("disconnected", () => {
        console.log("dissconnect");
        this.actionCable.disconnect();
      });

    this.setState({
      messages: [
        {
          _id: 1,
          text: "Hello developer",
          createdAt: new Date(Date.UTC(2016, 7, 30, 17, 20, 0)),
          user: {
            _id: 2,
            name: "Manager",
            avatar: "https://facebook.github.io/react/img/logo_og.png"
          }
        }
      ]
    });
  };

  onSend(messages = []) {
    console.log(messages);

    this.state.cableCon
      .channel("ActiveAdmin::Chat::UserChannel")
      .perform("speak", { message: messages[0].text });

    this.setState(previousState => {
      return {
        messages: GiftedChat.append(previousState.messages, messages)
      };
    });

  }


  // async receive(from: string, message: Message) {
  //   // Customizable Area Start
  //   runEngine.debugLog("Message Recived", message);

  //   // Customizable Area End
  // }

  // Customizable Area Start

  _disConnectChat = () => {
    this.actionCable.disconnect();
    console.log("discccnected");
  };

  getHistoryData = async () => {
    const token = await AsyncStorage.getItem("token");
    const header = {
      token: token
    };
    const requestMessage = new Message(
      getName(MessageEnum.RestAPIRequestMessage)
    );
    this.getHistoryDataa = requestMessage.messageId;
    requestMessage.addData(
      getName(MessageEnum.RestAPIResponceEndPointMessage),
      'bx_block_live_chat/chats/message_history?merchant_id=48&per_page=15'
    );
    requestMessage.addData(
      getName(MessageEnum.RestAPIRequestHeaderMessage),
      JSON.stringify(header)
    );
    requestMessage.addData(
      getName(MessageEnum.RestAPIRequestMethodMessage),
      'GET'
    );
    runEngine.sendMessage(requestMessage.id, requestMessage);
  };

  onRecieved = (e:any)=>{
    console.log(e.is_admin, "dkjdkdjkdj")
    if (e.is_admin) {
      const message = {
        _id: e.id,
        text: e.message,
        createdAt: new Date(e.date),
        user: {
        _id: "Admin",
        name: "",
        avatar: "",
      },
    }

    console.log(message)
    
    this.setState({messages: [ message, ...this.state.messages]});
    }

  }





  // Customizable Area End
}