/** @jsx hJSX */

import {Rx} from '@cycle/core';
import {hJSX} from '@cycle/dom'; // eslint-disable-line
import moleculeInput from '../molecule-input.js';
import moleculeTextarea from '../molecule-textarea.js';

function demo({DOM}) {
  const textInputLabel = moleculeInput({DOM, props$: Rx.Observable.just({
    label: `label`,
  })});

  const textInputPassword = moleculeInput({DOM, props$: Rx.Observable.just({
    label: `password`, type: `password`,
  })});

  const textInputNoFloatingLabel =
    moleculeInput({DOM, props$: Rx.Observable.just({
      label: `label (isNoFloatingLabel)`, isNoFloatingLabel: true,
    })});

  const textInputDisabled =
    moleculeInput({DOM, props$: Rx.Observable.just({
      label: `disabled`, isDisabled: true,
    })});

  const textareaLabel =
    moleculeTextarea({DOM, props$: Rx.Observable.just({
      label: `textarea label`,
    })});

  return {
    DOM: Rx.Observable.combineLatest(
      textInputLabel.DOM,
      textInputPassword.DOM,
      textInputNoFloatingLabel.DOM,
      textInputDisabled.DOM,
      textareaLabel.DOM,
      (
        textInputLabelVTree,
        textInputPasswordVTree,
        textInputNoFloatingLabelVTree,
        textInputDisabledVTree,
        textareaLabelVTree
      ) => ( // eslint-disable-line
        <div className={`template-DemoPages_sectionContainer isVertical`}>
          <h4>Text input</h4>
          <section className={`template-DemoPages_verticalSection`}>
            {textInputLabelVTree}
            {textInputPasswordVTree}
            {textInputNoFloatingLabelVTree}
            {textInputDisabledVTree}
          </section>

          <h4>Text area</h4>
          <section className={`template-DemoPages_verticalSection`}>
            {textareaLabelVTree}
          </section>
        </div>
      )
    ),
  };
}

export default demo;

@@ -882,16 +882,306 @@
  %7D)%7D);%0A%0A
+  const validationInputRequiredAutoValidate =%0A    moleculeInput(%7BDOM, props$: Rx.Observable.just(%7B%0A      label: %60inout validates on blur (required, autoValidate)%60,%0A      isRequired: true,%0A      autoValidate: true,%0A      pattern: /%5Ba-zA-Z%5D*/,%0A      errorMessage: %60letters only!%60,%0A    %7D)%7D);%0A%0A
   return
@@ -1183,16 +1183,16 @@
 eturn %7B%0A
-
     DOM:
@@ -1362,24 +1362,71 @@
 aLabel.DOM,%0A
+      validationInputRequiredAutoValidate.DOM,%0A
       (%0A    
@@ -1579,16 +1579,66 @@
 belVTree
+,%0A        validationInputRequiredAutoValidateVTree
 %0A      )
@@ -2104,32 +2104,32 @@
 ticalSection%60%7D%3E%0A
-
             %7Btex
@@ -2165,16 +2165,192 @@
 section%3E
+%0A%0A          %3Ch4%3EValidation%3C/h4%3E%0A          %3Csection className=%7B%60template-DemoPages_verticalSection%60%7D%3E%0A            %7BvalidationInputRequiredAutoValidateVTree%7D%0A          %3C/section%3E
 %0A       

add validation example