# vim:fileencoding=utf-8
# License: GPL v3 Copyright: 2015, Kovid Goyal <kovid at kovidgoyal.net>
from __python__ import hash_literals

from elementmaker import E

from book_list.theme import get_font_size, get_color
from dom import build_rule, svgicon, add_extra_css, clear

CLASS_NAME = 'generic-items-list'

add_extra_css(def ():
    sel = '.' + CLASS_NAME + ' '
    style = ''
    style += build_rule(sel, padding='0.75rem 1rem')
    style += build_rule(sel + ' > p',
        margin='0 0 0.75rem 0',
        padding='0.6rem 0.75rem',
        border='var(--calibre-border-style-subtle)',
        border_radius='12px',
        background_color='rgba(0,0,0,0.02)',
        font_style='normal',
        opacity='0.8'
    )
    style += build_rule(sel + ' ul', list_style='none', margin='0', padding='0', display='flex', flex_direction='column', gap='0.5rem')
    style += build_rule(sel + 'li',
        padding='0',
        border='var(--calibre-border-style-subtle)',
        border_radius='14px',
        background_color=get_color('window-background'),
        box_shadow='0 1px 2px rgba(0,0,0,0.06)',
        cursor='pointer',
        overflow='hidden'
    )
    style += build_rule(sel + 'li:hover',
        background_color='var(--calibre-color-primary-light)',
        box_shadow='0 8px 20px rgba(0,0,0,0.10)',
        transform='translateY(-1px)'
    )
    style += build_rule(sel + 'li:active', transform='translateY(0px)')
    style += build_rule(sel + ' .item-title-body .item-title',
        font_size=get_font_size('item-list-title'), font_weight='700')
    style += build_rule(sel + ' .item-subtitle',
        font_size=get_font_size('item-list-subtitle'), font_style='normal', opacity='0.78')
    sel += ' li > div:nth-child(1)'
    style += build_rule(sel,
        padding='0.85rem 0.95rem',
        position='relative',
        display='flex',
        align_items='flex-start',
        flex_wrap='wrap',
        gap='0.5rem',
        box_sizing='border-box',
    )
    style += build_rule(sel + ' .item-title-body',
        display='flex',
        align_items='center',
        gap='0.5rem',
        min_width='0',
        flex='1 1 auto',
    )
    style += build_rule(sel + ' .item-title-body > span:not(.item-title)', opacity='0.8')
    style += r'''
@media (max-width: 420px) {
  .generic-items-list { padding: 0.6rem 0.75rem; }
  .generic-items-list ul { gap: 0.45rem; }
  .generic-items-list li > div:nth-child(1) { padding: 0.75rem 0.75rem; }
}
'''
    return style
)


def side_action(action, ev):
    ev.stopPropagation(), ev.preventDefault()
    if action:
        li = ev.currentTarget.closest('li')
        action(li)


def add_classes(elem, class_names):
    for cls in (class_names or '').toString().split(/\s+/):
        if cls:
            elem.classList.add(cls)


def build_list(container, items, subtitle):
    c = container
    clear(c)
    c.classList.add(CLASS_NAME)
    if subtitle:
        c.appendChild(E.p(subtitle, style='font-style:normal; font-weight:700; padding: 1em 1ex; border-bottom: solid 1px currentColor'))
    ul = E.ul()
    c.appendChild(ul)
    has_icons = False
    for item in items:
        if item.icon:
            has_icons = True
            break

    for item in items:
        title_body = E.div(class_='item-title-body')
        if has_icons:
            ic = ''
            if item.icon:
                ic = svgicon(item.icon)
            title_body.appendChild(E.span(ic, '\xa0'))
        tit = item.title
        if jstype(tit) is 'string':
            title_body.appendChild(E.span((tit or '') + '', class_='item-title'))
        else:
            title_body.appendChild(tit)
        row = E.div(class_='item-first-row')
        add_classes(row, item.row_class)
        row.appendChild(title_body)
        nm = item.nav_list_meta
        if nm and (nm.rating or nm.count):
            stack = E.div(class_='item-subtitle item-subtitle-nav')
            if nm.rating:
                stack.appendChild(E.div(nm.rating, class_='item-subtitle-rating'))
            if nm.count:
                stack.appendChild(E.div(nm.count, class_='item-subtitle-count'))
            row.appendChild(stack)
        elif item.subtitle:
            row.appendChild(E.div(item.subtitle, class_='item-subtitle', style='padding-top:1ex'))
        li = E.li(row)
        add_classes(li, item.li_class)
        ul.appendChild(li)
        if item.action:
            li.addEventListener('click', item.action)
        if item.data:
            li.dataset.userData = item.data
        if item.side_actions?.length:
            s = li.style
            s.display = 'flex'
            s.alignItems = 'center'
            li.firstChild.style.flexGrow = '10'
            li.appendChild(E.div(
                style='display: flex; align-items: center; margin-left: 0.5rem'
            ))
            for x in item.side_actions:
                li.lastChild.appendChild(E.div(
                    class_='simple-link',
                    style='padding: 0.5rem',
                    title=x.tooltip or '',
                    onclick=side_action.bind(None, x.action),
                    svgicon(x.icon)
                ))


def create_side_action(icon, action=None, tooltip=None):
    return {'icon': icon, 'action': action, 'tooltip': tooltip}


def create_item(title, action=None, subtitle=None, icon=None, data=None, side_actions=None, nav_list_meta=None, li_class=None, row_class=None):
    return {
        'title': title, 'action': action, 'subtitle': subtitle, 'icon': icon, 'data': data,
        'side_actions': side_actions or [], 'nav_list_meta': nav_list_meta,
        'li_class': li_class, 'row_class': row_class,
    }


def create_item_list(container, items, subtitle=None):
    build_list(container, items, subtitle)
