import React from "react";
import {declineSaimiar} from "./saimiar_morphology";
import {SaiEntryProps, JutEntryProps, ElesuEntryProps, TukEntryProps} from "./dbtypes";

const SaiEntry = (props: {entry: SaiEntryProps}) => {
    const {entry} = props;
    const synCategory = entry.syn_category;
    const isNominal = synCategory === "nominal";
    return (
        <div className="searchResult" key={ entry.id }>
            <b>{ entry.sai }</b> - { entry.eng }
            <br />
            <span className="synclass">
                <i>{ entry.syn_category }</i>
                { entry.morph_type ? `\t\t${entry.morph_type}` : null }
                <br/>
                { isNominal ? formatMorphology(entry) : null }
            </span>
        </div>
    );
};

function formatMorphology(entry) {
    const decl = declineSaimiar(entry);
    if (!decl) {
        return "";
    }

    return (<span style={ {fontSize: "medium", color: "#6a3131"} } >
        Abs: <i>{decl.abs}</i>, Erg: <i>{decl.erg}</i>,
        Adp: <i>{decl.adp}</i>,
        All: <i>{decl.all}</i>,
        Loc: <i>{decl.loc}</i>,
        Ell: <i>{decl.ell}</i>,
        Inst: <i>{decl.inst}</i>,
        Rel: <i>{decl.rel}</i>
    </span>);
}

const JutEntry = (props: {entry: JutEntryProps}) => {
    const {entry} = props;

    return (
        <div className="searchResult" key={ entry.id }>
            <b>{ entry.jut }</b> - { entry.eng }
            <br/>
            <span className="synclass">
                { entry.syn_category === "noun" ? entry.gender : null }
            </span>
        </div>);
};

const ElesuEntry = (props: {entry: ElesuEntryProps}) => {
    const {entry} = props;

    return (
        <div className="searchResult" key={ entry.id }>
            <b>{ entry.elesu }</b> - { entry.eng }
            <br/>
            <span className="synclass">
                { entry.syn_category }
            </span>
        </div>);
};

const TukEntry = (props: {entry: TukEntryProps}) => {
    const {entry} = props;

    return (
        <div className="searchResult" key={ entry.id }>
            <b>{ entry.tuk }</b> - { entry.eng }
            <br/>
            <span className="synclass">
                { entry.syn_category }
            </span>
        </div>);
};

export {SaiEntry, ElesuEntry, JutEntry, TukEntry};