import React from 'react';
import './WhatsAppConv.Styles.css';
//import './devices.min.css';
//import './devices.min.sass';
import utils from '../../utils';
const { getAssetType, mimeTypes } = utils;
import { getUrlExtension } from './../../utils';
import IcomoonReact from "icomoon-react"
import iconSet from "../../assets/icon-fonts/selection.json";

const WhatsAppConv = (props) => {
  if (!props.messages) props.messages = [
    { type: 'received', text: 'We hope you are having a great day. Please reply if you want to receive our current deals.' },
    { type: 'sent', text: 'Yes!' },
    { type: 'received', text: 'Hello! Your new daily requested product is "Deal Name". You can share the product information below with your customers:' },
    { type: 'received', text: 'These are the deal details and you can include a lengthy text describing your product in here', mediaSrc: 'https://media.sproutsocial.com/uploads/meme-example.jpg' },
  ];
  const currentTime = new Date();
  const currentTimeString = ("0" + currentTime.getHours()).slice(-2) + ":" + ("0" + currentTime.getMinutes()).slice(-2);

  const renderAsset = (fileUrl, fileType) => {
    if (!fileType) return;

    if (mimeTypes[fileType]) fileType = mimeTypes[fileType];
    if (getAssetType(fileType) == 'application')
      return <embed className="wa-embed" src={fileUrl + '#toolbar=0&navpanes=0&scrollbar=0&statusbar=0&messages=0&scrollbar=0'} width="200px" height="240px" scrolling="no" />

    else if (getAssetType(fileType) == 'video')
      return <video width="310" height="180" src={fileUrl} controls>
        Your browser does not support the video tag.
      </video>
    else if (getAssetType(fileType) == 'image')
      return <img className="deal-image" src={fileUrl}></img>
    return "";
  }

  /**
   * 
   * @param {*} messagesArray 
   * message: {
   *  type: received || sent
   * }
   */
  const printMessages = (messagesArray) => {
    let htmlObject = [];
    htmlObject.push(messagesArray.map((messageDetails, index) => {

      return (
        <div className={'message ' + messageDetails.type} key={index}>          
          {messageDetails.mediaSrc ? renderAsset(messageDetails.mediaSrc, getUrlExtension(messageDetails.mediaSrc)) : ""}
          <span className="message-text">{messageDetails.text}</span>
          <span className="metadata"><span className="time">{currentTimeString}</span>
            {messageDetails.type == 'sent' ?
              (<span className="tick"><svg xmlns="http://www.w3.org/2000/svg" width="16" height="15" id="msg-dblcheck-ack" x="2063" y="2076"><path d="M15.01 3.316l-.478-.372a.365.365 0 0 0-.51.063L8.666 9.88a.32.32 0 0 1-.484.032l-.358-.325a.32.32 0 0 0-.484.032l-.378.48a.418.418 0 0 0 .036.54l1.32 1.267a.32.32 0 0 0 .484-.034l6.272-8.048a.366.366 0 0 0-.064-.512zm-4.1 0l-.478-.372a.365.365 0 0 0-.51.063L4.566 9.88a.32.32 0 0 1-.484.032L1.892 7.77a.366.366 0 0 0-.516.005l-.423.433a.364.364 0 0 0 .006.514l3.255 3.185a.32.32 0 0 0 .484-.033l6.272-8.048a.365.365 0 0 0-.063-.51z" fill="#4fc3f7" /></svg></span>) : ""}
          </span>
        </div>
      );
    }));
    return htmlObject;
  }

  return (

    <div className="page">
      <script src="https://code.iconify.design/1/1.0.7/iconify.min.js"></script>
      <div className="marvel-device note8">
        <div className="top-bar"></div>
        <div className="sleep"></div>
        <div className="volume"></div>
        <div className="camera"></div>
        <div className="screen">
          <div className="screen-container">
            <div className="status-bar">
              <div className="time">{currentTimeString}</div>
              <div className="battery">
                <IcomoonReact iconSet={iconSet} size={13} icon="battery_full" />
              </div>
              <div className="network">
                <IcomoonReact iconSet={iconSet} size={13} icon="network_cell" />
              </div>
              <div className="wifi">
                <IcomoonReact iconSet={iconSet} size={13} icon="signal_wifi_4_bar" />
              </div>
              <div className="star">
                <IcomoonReact iconSet={iconSet} size={13} icon="star" />
              </div>
            </div>
            <div className="chat">
              <div className="chat-container">
                <div className="user-bar">
                  <div className="back">
                    <IcomoonReact iconSet={iconSet} size={13} icon="arrow_back" />
                  </div>
                  <div className="avatar">
                    {props.avatar ? (
                      <img src={props.avatar} alt="Avatar" />                      
                    ): (
                      <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 212 212" width="36" height="36"><path fill="#DFE5E7" className="background" d="M106.251.5C164.653.5 212 47.846 212 106.25S164.653 212 106.25 212C47.846 212 .5 164.654.5 106.25S47.846.5 106.251.5z"></path><path fill="#FFF" className="primary" d="M173.561 171.615a62.767 62.767 0 0 0-2.065-2.955 67.7 67.7 0 0 0-2.608-3.299 70.112 70.112 0 0 0-3.184-3.527 71.097 71.097 0 0 0-5.924-5.47 72.458 72.458 0 0 0-10.204-7.026 75.2 75.2 0 0 0-5.98-3.055c-.062-.028-.118-.059-.18-.087-9.792-4.44-22.106-7.529-37.416-7.529s-27.624 3.089-37.416 7.529c-.338.153-.653.318-.985.474a75.37 75.37 0 0 0-6.229 3.298 72.589 72.589 0 0 0-9.15 6.395 71.243 71.243 0 0 0-5.924 5.47 70.064 70.064 0 0 0-3.184 3.527 67.142 67.142 0 0 0-2.609 3.299 63.292 63.292 0 0 0-2.065 2.955 56.33 56.33 0 0 0-1.447 2.324c-.033.056-.073.119-.104.174a47.92 47.92 0 0 0-1.07 1.926c-.559 1.068-.818 1.678-.818 1.678v.398c18.285 17.927 43.322 28.985 70.945 28.985 27.678 0 52.761-11.103 71.055-29.095v-.289s-.619-1.45-1.992-3.778a58.346 58.346 0 0 0-1.446-2.322zM106.002 125.5c2.645 0 5.212-.253 7.68-.737a38.272 38.272 0 0 0 3.624-.896 37.124 37.124 0 0 0 5.12-1.958 36.307 36.307 0 0 0 6.15-3.67 35.923 35.923 0 0 0 9.489-10.48 36.558 36.558 0 0 0 2.422-4.84 37.051 37.051 0 0 0 1.716-5.25c.299-1.208.542-2.443.725-3.701.275-1.887.417-3.827.417-5.811s-.142-3.925-.417-5.811a38.734 38.734 0 0 0-1.215-5.494 36.68 36.68 0 0 0-3.648-8.298 35.923 35.923 0 0 0-9.489-10.48 36.347 36.347 0 0 0-6.15-3.67 37.124 37.124 0 0 0-5.12-1.958 37.67 37.67 0 0 0-3.624-.896 39.875 39.875 0 0 0-7.68-.737c-21.162 0-37.345 16.183-37.345 37.345 0 21.159 16.183 37.342 37.345 37.342z"></path></svg>
                    )}
                  </div>
                  <div className="name">
                    <span>Customer Name</span>
                    <span className="status">online</span>
                  </div>
                  <div className="actions more">
                    <IcomoonReact iconSet={iconSet} size={13} icon="more_vert" />
                  </div>
                  <div className="actions attachment">
                    <IcomoonReact iconSet={iconSet} size={13} icon="attach_file" />
                  </div>
                  <div className="actions">
                    <IcomoonReact iconSet={iconSet} size={13} icon="call" />
                  </div>
                </div>
                <div className="conversation">
                  <div className="conversation-container">
                    {printMessages(props.messages)}
                  </div>
                  <div className="conversation-compose">
                    <div className="emoji">
                      <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" id="smiley" x="3147" y="3209"><path fillRule="evenodd" clipRule="evenodd" d="M9.153 11.603c.795 0 1.44-.88 1.44-1.962s-.645-1.96-1.44-1.96c-.795 0-1.44.88-1.44 1.96s.645 1.965 1.44 1.965zM5.95 12.965c-.027-.307-.132 5.218 6.062 5.55 6.066-.25 6.066-5.55 6.066-5.55-6.078 1.416-12.13 0-12.13 0zm11.362 1.108s-.67 1.96-5.05 1.96c-3.506 0-5.39-1.165-5.608-1.96 0 0 5.912 1.055 10.658 0zM11.804 1.01C5.61 1.01.978 6.034.978 12.23s4.826 10.76 11.02 10.76S23.02 18.424 23.02 12.23c0-6.197-5.02-11.22-11.216-11.22zM12 21.355c-5.273 0-9.38-3.886-9.38-9.16 0-5.272 3.94-9.547 9.214-9.547a9.548 9.548 0 0 1 9.548 9.548c0 5.272-4.11 9.16-9.382 9.16zm3.108-9.75c.795 0 1.44-.88 1.44-1.963s-.645-1.96-1.44-1.96c-.795 0-1.44.878-1.44 1.96s.645 1.963 1.44 1.963z" fill="#7d8489" /></svg>
                    </div>
                    <input disabled className="input-msg" name="input" placeholder="Type a message" autoComplete="off" autoFocus></input>
                    <div className="photo">
                      <IcomoonReact iconSet={iconSet} size={13} icon="camera_alt" />
                    </div>
                    <div disabled className="send">
                      <div className="circle">
                        <IcomoonReact iconSet={iconSet} size={13} icon="send" />
                      </div>
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  );
};

export default WhatsAppConv;