MuDBase/client/src/components/querybuilder/QBLeafElem.tsx

import React from 'react';
import { QueryLeafElem, QueryLeafBy, QueryLeafOp, QueryElem, TagQueryInfo, isTagQueryInfo } from '../../lib/query/Query';
import { Chip, Typography, IconButton, Box } from '@material-ui/core';
import { QBPlaceholder } from './QBPlaceholder';
import DeleteIcon from '@material-ui/icons/Delete';
import { Requests } from './QueryBuilder';
import stringifyList from '../../lib/stringifyList';

export interface ElemChipProps {
    label: any,
    extraElements?: any,
}

export function LabeledElemChip(props: ElemChipProps) {
    const label = <Box display="flex" alignItems="center">
        <Typography>{props.label}</Typography>
        {props.extraElements}
    </Box>
    return <Chip label={label} />
}

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

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

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

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

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

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

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

export function QBQueryElemTagEquals(props: LeafProps) {
    if (!isTagQueryInfo(props.elem.b)) {
        throw new Error("Tag equals should have a TagQueryInfo operand");
    }
    const tagInfo: TagQueryInfo = props.elem.b;
    return <LabeledElemChip
        label={"Tag \"" + stringifyList(tagInfo.fullName, undefined,
            (idx: number, e: any) => (idx === 0) ? e : " / " + e) + "\""}
        extraElements={props.extraElements}
    />
}

export interface DeleteButtonProps {
    onClick?: (e: any) => void,
}

export function QBQueryElemDeleteButton(props: DeleteButtonProps) {
    return <IconButton
        onClick={props.onClick}
        disableRipple={true}
        size="small"
    >
        <DeleteIcon />
    </IconButton>
}

export interface IProps {
    elem: QueryLeafElem,
    onReplace: (q: QueryElem | null) => void,
    editingQuery: boolean,
    requestFunctions: Requests,
}

export function QBLeafElem(props: IProps) {
    let e = props.elem;

    const extraElements = props.editingQuery ?
        <Box m={0.5}>
            <QBQueryElemDeleteButton
                onClick={() => props.onReplace(null)}
            />
        </Box>
        : undefined;

    if (e.a === QueryLeafBy.ArtistName &&
        e.leafOp === QueryLeafOp.Equals &&
        typeof e.b == "string") {
        return <QBQueryElemArtistEquals
            {...props}
            extraElements={extraElements}
        />
    } else if (e.a === QueryLeafBy.ArtistName &&
        e.leafOp === QueryLeafOp.Like &&
        typeof e.b == "string") {
        return <QBQueryElemArtistLike
            {...props}
            extraElements={extraElements}
        />
    } else if (e.a === QueryLeafBy.AlbumName &&
        e.leafOp === QueryLeafOp.Equals &&
        typeof e.b == "string") {
        return <QBQueryElemAlbumEquals
            {...props}
            extraElements={extraElements}
        />
    } else if (e.a === QueryLeafBy.AlbumName &&
        e.leafOp === QueryLeafOp.Like &&
        typeof e.b == "string") {
        return <QBQueryElemAlbumLike
            {...props}
            extraElements={extraElements}
        />
    } if (e.a === QueryLeafBy.SongTitle &&
        e.leafOp === QueryLeafOp.Equals &&
        typeof e.b == "string") {
        return <QBQueryElemTitleEquals
            {...props}
            extraElements={extraElements}
        />
    } else if (e.a === QueryLeafBy.SongTitle &&
        e.leafOp === QueryLeafOp.Like &&
        typeof e.b == "string") {
        return <QBQueryElemTitleLike
            {...props}
            extraElements={extraElements}
        />
    } else if (e.a === QueryLeafBy.TagInfo &&
        e.leafOp === QueryLeafOp.Equals &&
        isTagQueryInfo(e.b)) {
        return <QBQueryElemTagEquals
            {...props}
            extraElements={extraElements}
        />
    }else if (e.leafOp === QueryLeafOp.Placeholder) {
        return <QBPlaceholder
            onReplace={props.onReplace}
            requestFunctions={props.requestFunctions}
        />
    }

    throw new Error("Unsupported leaf element");
}