import { MessageHandler } from './MessageHandler';
import { MessageSchema } from './MessageSchema';
import { ElementTransformer } from '../../client/dom/ElementTransformer';
import { AgentInitiator } from '../AgentInitiator';
import { EnvironmentReader } from '../../client/environment/EnvironmentReader';

export class ChatWidgetShowMessageHandler implements MessageHandler {
    constructor(private readonly elementTransformer: ElementTransformer,
                private readonly environmentReader: EnvironmentReader) {}

    public shouldHandle(message: MessageEvent<MessageSchema>): boolean {
        return message.data.show !== undefined;
    }

    public async handleMessage(message: MessageEvent<MessageSchema>): Promise<void> {
        const iframe = document.getElementById(AgentInitiator.CHAT_WIDGET_IFRAME_ID) as HTMLIFrameElement;

        if(!iframe) {
            return;
        }

        console.log(`message.data: ${JSON.stringify(message.data)}`)

        const chatWidgetStyle = this.getChatWidgetIframeStyle(message.data.show!);
        iframe.style.width = chatWidgetStyle.width;
        iframe.style.height = chatWidgetStyle.height;
        iframe.style.margin = chatWidgetStyle.margin?? '0';
        iframe.style.boxShadow = message.data.show! ? '0 0.4rem 0.8rem rgba(0, 0, 0, 0.1)' : 'none';
    }

    public getChatWidgetIframeStyle(show: boolean) {
        if (this.environmentReader.isMobile()) {
            return show ? {
                width: '100%', height: '100%', margin: '0'
            } : {
                width: '120px', height: '120 px'
            };
        }

        return show ? {
            width: '400px', height: '700px', margin: '20px'
        } : {
            width: '120px', height: '120px'
        };
    }
}