const url = 'https://my.dittoai.app/9aFkapXLVansfLrkocv8';
const mainDiv = document.createElement('div');
Object.assign(mainDiv.style,{
    userSelect: 'none',
    cursor: 'pointer',
    position: 'fixed',
    right: '16px',
    bottom: '16px',
    zIndex: '1000',
    backgroundColor: 'white',
    width: '56px',
    height: '56px',
    borderRadius: '100px',
    boxShadow: '0px 0px 3px 0px #b4b4b4'
});
const chatBubbleIcon = document.createElement('img');
mainDiv.appendChild(chatBubbleIcon);
chatBubbleIcon.src = 'https://framerusercontent.com/images/vLIcTOeOHhSOsN9TiwpRZ3izqkk.png';
Object.assign(chatBubbleIcon.style, {
    width: '100%',
    height: '100%',
    filter: 'grayscale(1)',
    position: 'absolute',
    transform: 'translate(-50%, -50%)',
    top: '50%',
    left: '50%'
});
chatBubbleIcon.addEventListener('mouseenter', () => {
    Object.assign(chatBubbleIcon.style, {
        filter: 'grayscale(0)'
    });
});
chatBubbleIcon.addEventListener('mouseleave', () => {
    Object.assign(chatBubbleIcon.style, {
        filter: 'grayscale(1)'
    });
});
// mainDiv.innerText = 'Hello, World!!!!!';
document.body.appendChild(mainDiv);

let iframe

let open = false;

const createIframe = () => {
    iframe = document.createElement('iframe');
    iframe.style = 'position: fixed; bottom: 16px; right: 88px; width: 400px; height: 600px; border: none; box-shadow: 0px 0px 3px 0px #b4b4b4; border-radius: 16px; z-index: 1000;';
    iframe.src = url;
    mainDiv.appendChild(iframe);
}

const openIframe = () => {
    open = true;
    chatBubbleIcon.src = 'https://static.thenounproject.com/png/5027711-200.png';
    if (!iframe) {
        createIframe();
    }
    iframe.style.display = 'block';
    chatBubbleIcon.style.width = '20px';
    chatBubbleIcon.style.height = '20px';
};

const closeIframe = () => {
    open = false;
    chatBubbleIcon.src = 'https://framerusercontent.com/images/vLIcTOeOHhSOsN9TiwpRZ3izqkk.png';
    iframe.style.display = 'none';
    chatBubbleIcon.style.width = '100%';
    chatBubbleIcon.style.height = '100%';
}

mainDiv.onclick = () => {
    if (window.outerWidth < 500) {
        window.open(url, '_blank');
        return;
    }
    if (!open) {
        openIframe();
        return;
    }
    closeIframe();
};