import Database from './database';
import modalHtml from '../html/login-modal.html?raw';
import confirmationModalHtml from '../html/confirmation-modal.html?raw';
import modalScript from '../html/login-modal.js?raw';
import confirmationModalScript from '../html/confirmation-modal.js?raw';
import Services from './service';


export default class Routing {
    private static instance: Routing;
    private database: any;
    private sdkClient: any;
    private currentPrd: any;
    private currentOutpoint?: string;
    private constructor() {}

    // Method to access the singleton instance of Services
    public static async getInstance(): Promise<Routing> {
        if (!Routing.instance) {
            Routing.instance = new Routing();
            await Routing.instance.init(); 
        }
        return Routing.instance;
    }

    public async init(): Promise<void> {
        this.sdkClient = await import("../../dist/pkg/sdk_client");
        this.database = Database.getInstance()
      }

    public openLoginModal(myAddress: string, receiverAddress: string) {
        const container = document.querySelector('.page-container');
        let html = modalHtml
        html = html.replace('{{device1}}', myAddress)
        html = html.replace('{{device2}}', receiverAddress)
        if (container) container.innerHTML += html;
        const modal = document.getElementById('login-modal')
        if (modal) modal.style.display = 'flex';
        const newScript = document.createElement('script');

        
        newScript.setAttribute('type', 'module')
        newScript.textContent  = modalScript;
        document.head.appendChild(newScript).parentNode?.removeChild(newScript);
    }

    public openConfirmationModal(pcd: any, outpointCommitment: string) {
        let roles = JSON.parse(pcd['roles']);// ['members'][0];
        console.log(roles);
        let members = roles['owner']['members'];
        console.log(members);
        let html = confirmationModalHtml;
        // html = html.replace('{{device1}}', members[0]['sp_addresses'][0]);
        // html = html.replace('{{device2}}', members[0]['sp_addresses'][1]);
        this.currentOutpoint = outpointCommitment as string;
        const container = document.querySelector('.page-container');

        if (container) container.innerHTML += html;
        const modal = document.getElementById('modal')
        if (modal) modal.style.display = 'flex';
        const newScript = document.createElement('script');
        newScript.setAttribute('type', 'module')
        newScript.textContent  = confirmationModalScript;
        document.head.appendChild(newScript).parentNode?.removeChild(newScript);
        
        // Add correct text

          // Close modal when clicking outside of it
        window.onclick = (event) => {
            const modal = document.getElementById('modal');
            if (event.target === modal) {
                this.confirm(this.currentPrd || pcd, outpointCommitment || this.currentOutpoint);
            }
        }
    }
    confirmLogin() {
        console.log('=============> Confirm Login')
        const loginTx = this.sdkClient.create_login_transaction(1)
        console.log("🚀 ~ Routing ~ confirmLogin ~ loginTx:", loginTx)
        this.sdkClient.login('LOGIN', loginTx)
    }
    async closeLoginModal() {
        const modal = document.getElementById('login-modal')
        if (modal) modal.style.display = 'none';
      }

    async confirm(prd?: any, outpointCommitment?: string) {
        const service = await Services.getInstance()
        const modal = document.getElementById('modal')
        console.log("🚀 ~ Routing ~ confirm ~ prd:", this.currentPrd || prd, outpointCommitment)
        if (modal) modal.style.display = 'none';
        if(this.currentPrd || prd) service.pairDevice(this.currentPrd || prd, outpointCommitment  || this.currentOutpoint as string)
      }
    async closeConfirmationModal() {
        const modal = document.getElementById('modal')
        if (modal) modal.style.display = 'none';
    }
}