# coding: utf-8


def autocomplete_typeahead_widget(f, v, **kwargs):
    table_name = f._tablename
    field_name = f.name
    field_requires = f.requires
    field_value = v
    options = {'_data-provide': 'typeahead', '_autocomplete': 'off'}
    options.update(kwargs)

    return CAT(
        INPUT(_type="text", _class="string",
                _name=field_name, _value=field_value, requires=field_requires,
                _id="%s_%s_ac" % (table_name, field_name), **options),
        #INPUT(_type="hidden", _id="%s_%s" % (table_name, field_name),
        #        _name=field_name, _value=field_value, requires=field_requires),

        SCRIPT("""jQuery(document).ready(function(){
            var mapped = {}
            $(function() { $('#%(table_name)s_%(field_name)s_ac').typeahead(
                { minLength: 0,
                  items: 10,
                  source: function (query, process) {
                    $.get('%(url)s',
                        { q: query },
                        function (data) {
                            var labels = []
                            $.each(data.options, function (i, item) {
                                mapped[item.option] = item.id
                                labels.push(item.option)
                                })
                            process(labels)
                            }
                        )
                  },
                  updater:function(item){
                    $('#%(table_name)s_%(field_name)s').val(mapped[item]);
                    return item;
                    }
                })
            });
            $('input#%(table_name)s_%(field_name)s_ac').blur(
                function(){
                    if($(this).val().length==0) {
                        $('#%(table_name)s_%(field_name)s').val('')
                    }
                    else if($('#%(table_name)s_%(field_name)s').val() != mapped[$(this).val()]) {
                        $('#%(table_name)s_%(field_name)s').val('')
                    }
                });
            });""" % {
                'url': URL(f='autocomplete_typeahead_widget_json_feed.json'),
                'table_name': table_name,
                'field_name': field_name
                })
    )


db = DAL('sqlite://storage.sqlite')
db.define_table('test',
                Field('f1', requires=IS_IN_SET(('a1',)))
                )

if db(db.test).count() == 0:
    db.test.insert(f1='a1')
    db.test.insert(f1='a2')
    db.test.insert(f1='a3')

# Init of the widget
db.test.f1.widget = autocomplete_typeahead_widget
#db.test.f1.widget = lambda field, value: \
#        autocomplete_typeahead_widget(field, value)


def index():
    js_jquery = SCRIPT(_src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js")
    js_bootstrap = SCRIPT(_src="//netdna.bootstrapcdn.com/twitter-bootstrap/2.3.1/js/bootstrap.min.js")
    css_bootstrap = LINK(_rel="stylesheet",
                        _href=("//netdna.bootstrapcdn.com/twitter-bootstrap"
                                "/2.3.1/css/bootstrap-combined.min.css"))

    form = SQLFORM(db.test)
    if form.process(dbio=False).accepted:
        return BEAUTIFY(form.vars)

    head = HEAD(css_bootstrap, js_jquery, js_bootstrap)
    body = BODY(DIV(
                    DIV(form, _class="row"), _class="container")
                )

    return HTML(head, body)


# Generating JSON function
def autocomplete_typeahead_widget_json_feed():
    rows = db(db.test.f1 > 0).select()
    options = []

    for i, row in enumerate(rows):
        options.append({'option': row.f1, 'id': row.id})

    from gluon.contrib import simplejson
    return simplejson.dumps({'options': options})