import mithrilSelect from "mithril-select"
// var mithrilSelect = require("mithril-select").default

// Data to be used in select
const colours = [
  {id: 'red', text: 'Red'},
  {id: 'blue', text: 'Blue'},
  {id: 'green', text: 'Green'},
  {id: 'yellow', text: 'Yellow'},
  {id: 'orange', text: 'Orange'},
  {id: 'pink', text: 'Pink'}
]

let colour = ""

const component = {
  view() {
    return m(mithrilSelect, {
      options: [
        {value: null, view: 'Select a colour...'}
      ].concat(
        colours.map(c => ({value: c.id, view: c.text}))
      ),
      // A CSS class to add to the root element of the select
      class: 'my-select',
      // Respond to selection changes
      onchange: (val) => {
        colour = val != null
          ? colours.find(c => c.id === val).text
          : ""
      }
    })
  }
}

/** Represents a single option in a select */
interface Option {
  /**
   * Unique value that identifies this option.
   * Can be any type except `undefined`.
   */
  value: any
  /**
   * Either a string to display for the option or a callback
   * that renders vnodes.
   */
  view?: string | (() => m.Children)
}

/** Attrs object for Select component */
interface Attrs {
  /**
   * Array of `Option` objects
   */
  options: Option[]
  /**
   * Optional prompt to display until the user selects an option.
   * Supply either a string to display or a callback that renders vnodes.
   */
  promptView?: string | (() => m.Children)
  /**
   * Optional value to use for element id attribute.
   */
  id?: string
  /**
   * Optional name of hidden input for form. If none supplied, no hidden
   * input will be rendered. Hidden input value will be coerced to string.
   */
  name?: string
  /**
   * Current selected option value. Omitting or setting to `undefined`
   * is the same as supplying no value. (`null` can be a value.)
   */
  value?: any
	/**
   * Optional aria-labelledby attribute
   */
	ariaLabelledby?: string
  /**
   * Value of option that will be selected on creation. Overridden
   * by `value` if supplied, otherwise will be first option.
   */
  initialValue?: any
  /**
   * Additional class string to use on containing element.
   */
  class?: string
  /**
   * Callback that will be passed the value of the selected option
   * when selection changes.
   */
  onchange?(value: any): void
}