import {PlainTextEdit, Text, View} from "@nodegui/react-nodegui";
import React, {useEffect, useRef} from "react";
import {RNPlainTextEdit} from "@nodegui/react-nodegui/dist/components/PlainTextEdit/RNPlainTextEdit";
import {RNText} from "@nodegui/react-nodegui/dist/components/Text/RNText";
import {AlignmentFlag} from "@nodegui/nodegui";

export default function Translate(props: {targetTextRef:React.RefObject<RNPlainTextEdit>,name:string,href:string}){

    const labelRef=useRef<RNText>()

    useEffect(() => {
        labelRef.current?.setAlignment(AlignmentFlag.AlignCenter)
    });

    return <View style={`flex-direction:column;flex:1;`}>
        <PlainTextEdit style={`flex:9`} readOnly={true} ref={props.targetTextRef}></PlainTextEdit>
        <Text openExternalLinks={true} ref={labelRef} style={`flex:1;text-align:center;`} on={{
        }}>{"<a href=\""+props.href+"\">"+props.name}</Text>
    </View>
}