import React from 'react'
import { Text } from "@chakra-ui/react";
import { LinkView } from '../link/LinkView';

type Props = {}
type TextViewProps = {
    node: {
        attrs: any
        marks: any
        text: string
        type: "text"
    }
}

export function TextView({ node }: TextViewProps) {
    const { attrs, type, text, marks } = node

    const props =
        marks?.reduce((acc, mark) => {
            switch (mark.type) {
                case "link":
                    acc.link = mark.attrs;
                case "bold":
                    acc.fontWeight = "bold";
                    break;
                case "italic":
                    acc.fontStyle = "italic";
                    break;
                case "underline":
                    acc.textDecoration = "underline";
                    break;
                case "fontSize":
                    acc.fontSize = mark.attrs.size;
                    break;
                case "textColor":
                    acc.color = mark.attrs.color;
                case "textStyle":
                    acc = { ...acc, ...mark.attrs };
                    break;
            }
            return acc;
        }, {}) || {};

    if (props.link) {
        const { link, ...attributes } = props;
        return <LinkView link={link} attributes={attributes}>{text}</LinkView>
    }


    return (
        <Text as={!text.trim() ? 'span' : 'p'} display="inline" {...props}>
            {text}
        </Text>
    );

}