/*
 * Smart GWT (GWT for SmartClient)
 * Copyright 2008 and beyond, Isomorphic Software, Inc.
 *
 * Smart GWT is free software; you can redistribute it and/or modify it
 * under the terms of the GNU Lesser General Public License version 3
 * as published by the Free Software Foundation.  Smart GWT is also
 * available under typical commercial license terms - see
 * http://smartclient.com/license
 *
 * This software is distributed in the hope that it will be useful,
 * but WITHOUT ANY WARRANTY; without even the implied warranty of
 * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the GNU
 * Lesser General Public License for more details.
 */

import com.google.gwt.dom.client.Document;
import com.google.gwt.dom.client.Element;
import com.smartgwt.client.types.Alignment;
import com.smartgwt.client.types.DrawPosition;
import com.smartgwt.client.types.ListGridFieldType;
import com.smartgwt.client.types.Overflow;
import com.smartgwt.client.types.SelectionStyle;
import com.smartgwt.client.widgets.Canvas;
import com.smartgwt.client.widgets.viewer.DetailViewer;
import com.smartgwt.client.widgets.events.DrawEvent;
import com.smartgwt.client.widgets.events.DrawHandler;
import com.smartgwt.client.widgets.form.DynamicForm;
import com.smartgwt.client.widgets.form.fields.SelectItem;
import com.smartgwt.client.widgets.form.fields.events.ChangedEvent;
import com.smartgwt.client.widgets.form.fields.events.ChangedHandler;
import com.smartgwt.client.widgets.grid.ListGrid;
import com.smartgwt.client.widgets.grid.ListGridField;
import com.smartgwt.client.widgets.grid.ListGridRecord;
import com.smartgwt.client.widgets.grid.events.SelectionChangedHandler;
import com.smartgwt.client.widgets.grid.events.SelectionEvent;
import com.smartgwt.client.widgets.layout.HStack;
import com.smartgwt.client.widgets.viewer.DetailViewerField;
import com.smartgwt.sample.showcase.client.data.CountrySampleData;

import java.util.ArrayList;
import java.util.LinkedHashMap;
import java.util.List;

import com.google.gwt.core.client.EntryPoint;

public class MatchElementEmbedSample implements EntryPoint {

public void onModuleLoad() {

// --- SmartGWT widgets ---
        // Each widget sets matchElement:true so it sizes itself to fill
        // its placeholder, and htmlPosition:"afterBegin" so it renders
        // inside the element in document flow.

final ListGridRecord[] allRecords = CountrySampleData.getRecords();

final ListGrid embedGrid = new ListGrid();
        embedGrid.setAutoDraw(false);
        embedGrid.setMatchElement(true);
        embedGrid.setHtmlPosition(DrawPosition.AFTERBEGIN);
        embedGrid.setPersistentMatchElement(true);
        embedGrid.setSelectionType(SelectionStyle.SINGLE);
        embedGrid.setAlternateRecordStyles(true);
        embedGrid.setData(allRecords);

ListGridField flagField = new ListGridField("countryCode", "Flag", 40);
        flagField.setAlign(Alignment.CENTER);
        flagField.setType(ListGridFieldType.IMAGE);
        flagField.setImageURLPrefix("flags/24/");
        flagField.setImageURLSuffix(".png");
        ListGridField nameField = new ListGridField("countryName", "Country", 120);
        ListGridField capitalField = new ListGridField("capital", "Capital", 110);
        ListGridField continentField = new ListGridField("continent", "Continent", 100);
        ListGridField popField = new ListGridField("population", "Population");
        ListGridField areaField = new ListGridField("area", "Area (km\u00B2)");
        ListGridField g8Field = new ListGridField("member_g8", "G8", 40);
        embedGrid.setFields(flagField, nameField, capitalField,
                            continentField, popField, areaField, g8Field);

final DetailViewer embedDetail = new DetailViewer();
        embedDetail.setAutoDraw(false);
        embedDetail.setMatchElement(true);
        embedDetail.setHtmlPosition(DrawPosition.AFTERBEGIN);
        embedDetail.setPersistentMatchElement(true);
        embedDetail.setEmptyMessage("Select a country in the grid.");
        embedDetail.setFields(
            new DetailViewerField("countryName", "Country"),
            new DetailViewerField("capital", "Capital"),
            new DetailViewerField("continent", "Continent"),
            new DetailViewerField("population", "Population"),
            new DetailViewerField("area", "Area (km\u00B2)"),
            new DetailViewerField("gdp", "GDP (T USD)"),
            new DetailViewerField("government", "Government")
        );

embedGrid.addSelectionChangedHandler(new SelectionChangedHandler() {
            @Override
            public void onSelectionChanged(SelectionEvent event) {
                ListGridRecord record = event.getSelectedRecord();
                if (record != null) {
                    embedDetail.setData(new ListGridRecord[] { record });
                }
            }
        });

final DynamicForm embedFilter = new DynamicForm();
        embedFilter.setAutoDraw(false);
        embedFilter.setMatchElement(true);
        embedFilter.setHtmlPosition(DrawPosition.AFTERBEGIN);
        embedFilter.setPersistentMatchElement(true);
        embedFilter.setNumCols(4);
        embedFilter.setColWidths(80, 170, 80, 170);

LinkedHashMap<String, String> continentMap = new LinkedHashMap<String, String>();
        continentMap.put("North America", "North America");
        continentMap.put("South America", "South America");
        continentMap.put("Europe", "Europe");
        continentMap.put("Asia", "Asia");
        continentMap.put("Africa", "Africa");
        continentMap.put("Australia/Oceania", "Australia/Oceania");

SelectItem continentItem = new SelectItem("continent", "Continent");
        continentItem.setValueMap(continentMap);
        continentItem.setAllowEmptyValue(true);
        continentItem.setEmptyDisplayValue("All");

LinkedHashMap<String, String> g8Map = new LinkedHashMap<String, String>();
        g8Map.put("true", "Yes");
        g8Map.put("false", "No");

SelectItem g8Item = new SelectItem("member_g8", "G8?");
        g8Item.setValueMap(g8Map);
        g8Item.setAllowEmptyValue(true);
        g8Item.setEmptyDisplayValue("Any");

// shared filter logic applied by both items
        final ChangedHandler filterHandler = new ChangedHandler() {
            @Override
            public void onChanged(ChangedEvent event) {
                String continent = (String) embedFilter.getValue("continent");
                String g8Str = (String) embedFilter.getValue("member_g8");
                List<ListGridRecord> filtered =
                    new ArrayList<ListGridRecord>();
                for (ListGridRecord rec : allRecords) {
                    if (continent != null &&
                        !continent.equals(rec.getAttribute("continent")))
                    {
                        continue;
                    }
                    if (g8Str != null) {
                        boolean wantG8 = "true".equals(g8Str);
                        if (rec.getAttributeAsBoolean("member_g8") !=
                            wantG8)
                        {
                            continue;
                        }
                    }
                    filtered.add(rec);
                }
                embedGrid.setData(filtered.toArray(
                    new ListGridRecord[0]));
            }
        };
        continentItem.addChangedHandler(filterHandler);
        g8Item.addChangedHandler(filterHandler);
        embedFilter.setFields(continentItem, g8Item);

// --- HTML page with placeholder <div>s ---
        // In a real application this HTML could come from a CMS, a
        // server-rendered template, or a static HTML file.  Here it
        // is the contents of a parent Canvas so the Showcase can
        // display the Java source alongside the running sample.

Canvas dashboardPage = new Canvas();
        dashboardPage.setWidth100();
        dashboardPage.setHeight100();
        dashboardPage.setOverflow(Overflow.AUTO);
        dashboardPage.setContents(
            "<div style=\"max-width:960px; margin:0 auto;" +
            "     font-family:system-ui, sans-serif;" +
            "     padding:10px\">" +

// Page header
                "<div style=\"background:" +
                "     linear-gradient(135deg," +
                "         #1a5276, #2e86c1);" +
                "     color:white; padding:16px 24px;" +
                "     border-radius:8px 8px 0 0;" +
                "     margin-bottom:16px\">" +
                    "<h2 style=\"margin:0 0 4px 0\">" +
                        "World Data Dashboard</h2>" +
                    "<p style=\"margin:0; opacity:0.85;" +
                    "     font-size:13px\">" +
                        "SmartGWT widgets embedded via " +
                        "htmlElement + matchElement</p>" +
                "</div>" +

// Two-column area: grid + sidebar
                "<div style=\"display:flex; gap:16px;" +
                "     margin-bottom:16px\">" +

// Main grid placeholder
                    "<div id=\"gridSlot\"" +
                    "     style=\"flex:2; min-width:0;" +
                    "     height:300px;" +
                    "     border-radius:6px;" +
                    "     box-shadow:" +
                    "         0 1px 4px rgba(0,0,0,.12);" +
                    "     overflow:hidden\"></div>" +

// Sidebar detail placeholder
                    "<div style=\"flex:1;" +
                    "     min-width:220px\">" +
                        "<div style=\"background:#f8f9fa;" +
                        "     border-radius:6px;" +
                        "     box-shadow:" +
                        "       0 1px 4px rgba(0,0,0,.12);" +
                        "     overflow:hidden\">" +
                            "<div style=\"padding:10px 14px;" +
                            "     background:#e9ecef;" +
                            "     font-weight:600;" +
                            "     font-size:13px;" +
                            "     border-bottom:" +
                            "       1px solid #dee2e6\">" +
                                "Country Detail</div>" +
                            "<div id=\"detailSlot\"" +
                            "     style=\"padding:10px;" +
                            "     min-height:240px\">" +
                            "</div>" +
                        "</div>" +
                    "</div>" +

"</div>" +

// Bottom bar: filter form placeholder
                "<div style=\"border-radius:6px;" +
                "     box-shadow:" +
                "         0 1px 4px rgba(0,0,0,.12);" +
                "     overflow:hidden\">" +
                    "<div style=\"padding:10px 14px;" +
                    "     background:#e9ecef;" +
                    "     font-weight:600;" +
                    "     font-size:13px;" +
                    "     border-bottom:" +
                    "         1px solid #dee2e6\">" +
                        "Filter</div>" +
                    "<div id=\"filterSlot\"" +
                    "     style=\"padding:10px\"></div>" +
                "</div>" +

"</div>"
        );

// After the Canvas draws its contents, the placeholder divs
        // exist in the DOM.  Connect each widget to its placeholder
        // via setHtmlElement(), then draw.
        dashboardPage.addDrawHandler(new DrawHandler() {
            @Override
            public void onDraw(DrawEvent event) {
                Object[][] slots = {
                    { embedGrid,   "gridSlot" },
                    { embedDetail, "detailSlot" },
                    { embedFilter, "filterSlot" }
                };
                for (Object[] slot : slots) {
                    Canvas widget = (Canvas) slot[0];
                    Element el = Document.get().getElementById(
                        (String) slot[1]);
                    widget.setHtmlElement(el);
                    widget.draw();
                }
            }
        });

HStack wrapper = new HStack();
        wrapper.setWidth100();
        wrapper.setHeight100();
        wrapper.addMember(dashboardPage);
        wrapper.draw();
    }

}