package org.vaadin.elements.demo;

import java.util.Arrays;

import org.vaadin.elements.Element;
import org.vaadin.elements.ElementIntegration;
import org.vaadin.elements.Elements;
import org.vaadin.elements.Root;

import com.vaadin.ui.Component;
import com.vaadin.ui.CssLayout;
import com.vaadin.ui.HorizontalLayout;
import com.vaadin.ui.NativeSelect;
import com.vaadin.ui.Notification;
import com.vaadin.ui.VerticalLayout;

public class Html5InputDemo extends AbstractElementsDemo {

    private final NativeSelect typeSelector = new NativeSelect(
            "Select input type", Arrays.asList("text", "search", "email",
                    "url", "tel", "number", "range", "date", "month", "week",
                    "time", "datetime", "datetime-local", "color"));
    private final Element input = Elements.create("input");
    private final CssLayout playground = new CssLayout();

    @Override
    protected String getDemoDescription() {
        return "This demo shows how to create an HTML element,"
                + " modify its attributes and send attribute values back to the server when an event occurs.";
    }

    @Override
    protected Component getDemoView() {
        input.bindAttribute("value", "change");
        input.addEventListener(
                "change",
                arguments -> {
                    Notification.show("Value changed to "
                            + input.getAttribute("value"));
                });

        typeSelector.setNullSelectionAllowed(false);
        typeSelector.addValueChangeListener(event -> {
            String type = String.valueOf(typeSelector.getValue());

            input.setAttribute("value", "");
            input.setAttribute("type", type);

            playground.setCaption("input type=" + type);
        });
        typeSelector.setValue("text");

        Root root = ElementIntegration.getRoot(playground);
        root.appendChild(input);
        HorizontalLayout layout = new HorizontalLayout(typeSelector, playground);
        layout.setSpacing(true);
        return layout;
    }

}

@@ -384,45 +384,8 @@
 ion;
-%0Aimport com.vaadin.ui.VerticalLayout;
 %0A%0Apu
@@ -1784,20 +1784,21 @@
 tValue(%22
-text
+range
 %22);%0A%0A   

Change default demo type to something more interestiong