import m from "mithril"
import {iTag} from "../models/tag"

/**
 * Der Vnode der Komponente 'TagBadge' akzeptiert die folgenden Parameter:
 *  @property {iTag} tagData - Der darzustellende Tag. Achtung: Das Attribut
 *                  darf nicht 'tag' heißen — Mithril behandelt ein attrs-
 *                  Objekt mit einer 'tag'-Property als Vnode und verschiebt
 *                  es in die children (siehe hyperscriptVnode.js).
 *  @property {boolean} compact (optional) - kompakte Darstellung für dichte
 *                  Listen/Tabellen (kleinere Schrift, engeres Padding);
 *                  Default ist die Standarddarstellung (fett)
 *  @property {string} title (optional) - Tooltip des Farbchips
 *                  (Default: Tag-Name)
 */
export interface iTagBadge {
    tagData: iTag
    compact?: boolean
    title?: string
}

/**
 * Farbige Badge-Komponente für einen Tag: rendert den Tag-Namen als Chip in
 * der Tag-Farbe und dahinter automatisch die Workflow-Zusatzicons —
 * back_hand (rot) für erledigende Tags, schedule + Tagesabstand (blau) für
 * Tags, die eine Wiedervorlage auslösen (jeweils mit Tooltip). Parent-Tags
 * erhalten keine Zusatzicons.
 *
 * Die Komponente kapselt die Darstellung zentral, damit alle Stellen
 * (Notiz-Listen, Workflow-Liste, Historie, Auswahl-Modals, Tag-Liste)
 * einheitlich aussehen. Aufrufer geben nur den Tag an; Name, Farbe und
 * Zusatzicons ergeben sich aus den Tag-Daten.
 */
export const TagBadge: m.ClosureComponent<iTagBadge> = () => {
    return {
        view: (vnode) => {
            const tag = vnode.attrs.tagData
            const compact = vnode.attrs.compact === true
            // Farbiger Chip mit dem Tag-Namen. Bei fehlender Farbe grau.
            const chip = m("span", {
                style: {
                    backgroundColor: tag.color || '#999',
                    color: 'white',
                    padding: compact ? '1px 5px' : '2px 6px',
                    'border-radius': '3px',
                    'font-size': compact ? '11px' : undefined,
                    fontWeight: compact ? undefined : 'bold',
                    display: 'inline-block',
                    marginRight: '4px'
                },
                title: vnode.attrs.title || tag.name
            }, tag.name)
            // Workflow-Zusatzicons hinter dem Chip — fest programmiert aus
            // den Tag-Flags, nicht per Attribut steuerbar. Parent-Tags sind
            // nicht zuordenbar und erhalten daher keine Icons.
            const icons: m.Child[] = []
            if (!tag.is_parent) {
                if (tag.is_erledigend) {
                    icons.push(m("i.material-icons", {
                        title: "Erledigend: Kontakt gilt als erledigt",
                        style: {
                            verticalAlign: 'middle',
                            fontSize: '16px',
                            color: '#d32f2f'
                        }
                    }, "back_hand"))
                }
                if (tag.loest_wiedervorlage_aus) {
                    icons.push(m("span", {
                        title: "Löst Wiedervorlage aus: " + (tag.wiedervorlage_abstand_tage ?? 0) + " Tage",
                        style: {
                            verticalAlign: 'middle',
                            fontSize: '12px',
                            color: '#1565c0'
                        }
                    },
                        m("i.material-icons", {
                            style: {
                                verticalAlign: 'middle',
                                marginRight: '2px',
                                fontSize: '16px'
                            }
                        }, "schedule"),
                        tag.wiedervorlage_abstand_tage != null ? tag.wiedervorlage_abstand_tage + "d" : ""))
                }
            }
            return m("span", {
                style: {
                    display: 'inline-flex',
                    alignItems: 'center',
                    marginLeft: '4px',
                    whiteSpace: 'nowrap'
                }
            }, chip, icons)
        }
    }
}