import React from "react";
import { JDtypho } from "@janda-com/front";
import { getByteLength } from "../helper";
import { SmsType } from "../types/api";
import { lang as LANG } from "../lang/langFn";
import { IDiv } from "../types/interface";

interface Iprop extends IDiv {
    msg: string
}

const MsgTypeViewer: React.FC<Iprop> = ({ msg, ...props }) => {

    let type: SmsType = SmsType.SMS;
    let isNotSMS = false;
    const size = getByteLength(msg);

    if (size > 90) {
        type = SmsType.MMS;
        isNotSMS = true;
    }

    return <JDtypho size="superTiny" flex={{
        vCenter: true
    }} {...props} color="grey1">
        <JDtypho mr="tiny" >
            {size}{` Byte `}
        </JDtypho>
        <JDtypho color={isNotSMS ? "error" : undefined} mr="tiny">
            {type}
        </JDtypho>
        <JDtypho mr="tiny"  >
            {LANG("not_sure")}
        </JDtypho>
    </JDtypho>
}

export default MsgTypeViewer;