import React from 'react';
import { QueryLeafElem, QueryLeafBy, QueryLeafOp, QueryElem } from '../../lib/Query';
import { Chip, Typography } from '@material-ui/core';
import { QBQueryPlaceholder } from './QBQueryPlaceholder';

export interface ElemChipProps {
    label: any
}

export function LabeledElemChip(props: ElemChipProps) {
    const label = <Typography>{props.label}</Typography>
    return <Chip label={label} />
}

export interface LeafProps {
    elem: QueryLeafElem
    onReplace: (q: QueryElem) => void
}

export function QBQueryElemArtistEquals(props: LeafProps) {
    return <LabeledElemChip label={"By " + props.elem.b}/>
}

export function QBQueryElemArtistLike(props: LeafProps) {
    return <LabeledElemChip label={"Artist like \"" + props.elem.b + "\""}/>
}

export function QBQueryElemTitleEquals(props: LeafProps) {
    return <LabeledElemChip label={"\"" + props.elem.b + "\""}/>
}

export function QBQueryElemTitleLike(props: LeafProps) {
    return <LabeledElemChip label={"Title like \"" + props.elem.b + "\""}/>
}

export function QBQueryLeafElem(props: LeafProps) {
    let e = props.elem;

    if (e.a == QueryLeafBy.ArtistName &&
        e.leafOp == QueryLeafOp.Equals &&
        typeof e.b == "string") {
        return <QBQueryElemArtistEquals {...props} />
    } else if (e.a == QueryLeafBy.ArtistName &&
        e.leafOp == QueryLeafOp.Like &&
        typeof e.b == "string") {
        return <QBQueryElemArtistLike {...props} />
    } if (e.a == QueryLeafBy.SongTitle &&
        e.leafOp == QueryLeafOp.Equals &&
        typeof e.b == "string") {
        return <QBQueryElemTitleEquals {...props} />
    } else if (e.a == QueryLeafBy.SongTitle &&
        e.leafOp == QueryLeafOp.Like &&
        typeof e.b == "string") {
        return <QBQueryElemTitleLike {...props} />
    } else if (e.leafOp == QueryLeafOp.Placeholder) {
        return <QBQueryPlaceholder
            onReplace={props.onReplace}
        />
    }

    throw "Unsupported leaf element";
}