Emerald Booking Widget

import { useEffect, useRef } from 'react';

export default function BookingWidget({
  widgetBaseUrl = 'https://booking.emerald-system.id',
  propertyCode = 'DEMO',
  database = 'DEMO',
  primaryColor = '#8B0000',
  mode = 'full',
  openInNewTab = false
}) {
  const containerRef = useRef(null);
  const scriptRef = useRef(null);
  
  useEffect(() => {
    // Cek apakah script sudah dimuat
    if (!scriptRef.current) {
      // Buat script element
      const script = document.createElement('script');
      script.src = '/widget/booking-widget.js';
      script.async = true;
      script.onload = initializeWidget;
      
      // Simpan referensi ke script
      scriptRef.current = script;
      
      // Tambahkan script ke document
      document.body.appendChild(script);
    } else {
      // Jika script sudah dimuat, langsung inisialisasi widget
      initializeWidget();
    }
    
    // Cleanup function
    return () => {
      if (window.EmeraldBookingWidget && containerRef.current) {
        containerRef.current.innerHTML = '';
      }
    };
  }, [widgetBaseUrl, propertyCode, database, primaryColor, mode, openInNewTab]);
  
  const initializeWidget = () => {
    if (containerRef.current && window.EmeraldBookingWidget) {
      containerRef.current.innerHTML = '';
      
      window.EmeraldBookingWidget.init({
        container: containerRef.current,
        widgetBaseUrl: widgetBaseUrl,
        propertyCode: propertyCode,
        database: database,
        primaryColor: primaryColor,
        mode: mode,
        openInNewTab: openInNewTab
      });
    }
  };
  
  return <div ref={containerRef} className="booking-widget-container" />;
}

'use client';

import BookingWidget from '@/components/BookingWidget';

export default function BookingPage() {
  return (
    <main className="container mx-auto px-4 py-8">
      <h1 className="text-3xl font-bold mb-6">Booking Hotel</h1>
      
      <div className="mb-8">
        <BookingWidget 
          widgetBaseUrl="https://booking.emerald-system.id"
          propertyCode="DEMO"
          database="DEMO"
          primaryColor="#8B0000"
          mode="full"
        />
      </div>
    </main>
  );
}

// CONTOH KODE DART - HANYA UNTUK REFERENSI
// PERHATIAN: Ini adalah kode Dart untuk Flutter Web, bukan JavaScript
import 'dart:html' as html;
import 'dart:ui' as ui;
import 'package:flutter/material.dart';

class BookingWidget extends StatefulWidget {
  final String widgetBaseUrl;
  final String propertyCode;
  final String database;
  final String primaryColor;
  final String mode;
  final bool openInNewTab;
  final double height;

  const BookingWidget({
    Key? key,
    this.widgetBaseUrl = 'https://booking.emerald-system.id',
    this.propertyCode = 'DEMO',
    this.database = 'DEMO',
    this.primaryColor = '#8B0000',
    this.mode = 'full',
    this.openInNewTab = false,
    this.height = 500,
  }) : super(key: key);

  @override
  State<BookingWidget> createState() => _BookingWidgetState();
}

class _BookingWidgetState extends State<BookingWidget> {
  final String viewId = 'booking-widget-view-' + DateTime.now().millisecondsSinceEpoch.toString();
  bool _isScriptLoaded = false;

  @override
  void initState() {
    super.initState();
    // Initialize UI views after the first frame is rendered
    WidgetsBinding.instance.addPostFrameCallback((_) {
      _loadBookingWidget();
    });
  }

  void _loadBookingWidget() {
    // Register the view factory
    ui.platformViewRegistry.registerViewFactory(viewId, (int viewId) {
      final container = html.DivElement()
        ..id = 'booking-widget-container'
        ..style.width = '100%'
        ..style.height = '100%';

      _loadScript(container);
      return container;
    });
  }

  void _loadScript(html.Element container) {
    // Check if script is already loaded
    if (!_isScriptLoaded) {
      final script = html.ScriptElement()
        ..src = '/widget/booking-widget.js'
        ..type = 'text/javascript';

      script.onLoad.listen((event) {
        _isScriptLoaded = true;
        _initializeWidget(container);
      });

      html.document.head!.append(script);
    } else {
      _initializeWidget(container);
    }
  }

  void _initializeWidget(html.Element container) {
    // Call the JavaScript function using dart:html JS interop
    html.window.callMethod('eval', ['''
      if (window.EmeraldBookingWidget) {
        window.EmeraldBookingWidget.init({
          container: document.getElementById('booking-widget-container'),
          widgetBaseUrl: '${widget.widgetBaseUrl}',
          propertyCode: '${widget.propertyCode}',
          database: '${widget.database}',
          primaryColor: '${widget.primaryColor}',
          mode: '${widget.mode}',
          openInNewTab: ${widget.openInNewTab}
        });
      }
    ''']);
  }

  @override
  Widget build(BuildContext context) {
    return SizedBox(
      height: widget.height,
      child: HtmlElementView(viewType: viewId),
    );
  }
}