import Autocomplete


type alias Model =
  { autoState : Autocomplete.State -- Own the State of the menu in your model
  , query : String -- Perhaps you want to filter by a string?
  , people : List Person -- The data you want to list and filter
  }

-- Let's filter the data however we want
acceptablePeople : String -> List Person -> List Person
acceptablePeople query people =
  let
      lowerQuery =
          String.toLower query
  in
      List.filter (String.contains lowerQuery << String.toLower << .name) people

-- Set up what will happen with your menu updates
updateConfig : Autocomplete.UpdateConfig Msg Person
updateConfig =
    Autocomplete.updateConfig
        { toId = .name
        , onKeyDown =
            \code maybeId ->
                if code == 13 then
                    Maybe.map SelectPerson maybeId
                else
                    Nothing
        , onTooLow = Nothing
        , onTooHigh = Nothing
        , onMouseEnter = \_ -> Nothing
        , onMouseLeave = \_ -> Nothing
        , onMouseClick = \id -> Just <| SelectPerson id
        , separateSelections = False
        }

type Msg
  = SetAutocompleteState Autocomplete.Msg

update : Msg -> Model -> Model
update msg { autoState, query, people, howManyToShow } =
  case msg of
    SetAutocompleteState autoMsg ->
      let
        (newState, maybeMsg) =
          Autocomplete.update updateConfig autoMsg howManyToShow autoState (acceptablePeople query people)
      in
        { model | autoState = newState }

-- setup for your autocomplete view
viewConfig : Autocomplete.ViewConfig Person
viewConfig =
  let
    customizedLi keySelected mouseSelected person =
      { attributes = [ classList [ ("autocomplete-item", True), ("is-selected", keySelected || mouseSelected) ] ]
      , children = [ Html.text person.name ]
      }
  in
    Autocomplete.viewConfig
      { toId = .name
      , ul = [ class "autocomplete-list" ] -- set classes for your list
      , li = customizedLi -- given selection states and a person, create some Html!
      }

-- and let's show it! (See an example for the full code snippet)
view : Model -> Html Msg
view { autoState, query, people } =
  div []
      [ input [ onInput SetQuery ] []
      , Html.App.map SetAutocompleteState (Autocomplete.view viewConfig 5 autoState (acceptablePeople query people))
      ]