import { defineComponent, ref, computed } from 'vue';

export default defineComponent({
    props: {
        X1: {
            type: Number,
            default: 10
        },
        Y1: {
            type: Number,
            default: 10
        },
        X2: {
            type: Number,
            default: 25
        },
        Y2: {
            type: Number,
            default: 10
        },
        HeadHeight: {
            type: Number,
            default: 15
        },
        HeadWidth: {
            type: Number,
            default: 20
        },
        LineHeight: {
            type: Number,
            default: 3
        }
    },
    setup(props) {
        const stroke = ref('gray');
        const strokeThickness = ref(1);
        const fill = ref('black');

        const pathData = computed(() => {
            const y = (props.Y1 + props.Y2) / 2;
            const yAdd = y + props.LineHeight;
            const yDel = y - props.LineHeight;
            const yHA = y + props.HeadHeight / 2;
            const yHD = y - props.HeadHeight / 2;
            const xH = props.X2 + props.HeadWidth;

            const p1 = `M${props.X1},${yAdd}`;
            const p2 = `L${props.X2},${yAdd}`;
            const p3 = `L${props.X2},${yHA}`;
            const p4 = `L${xH},${y}`;
            const p5 = `L${props.X2},${yHD}`;
            const p6 = `L${props.X2},${yDel}`;
            const p7 = `L${props.X1},${yDel}`;
            const close = 'Z';

            return `${p1} ${p2} ${p3} ${p4} ${p5} ${p6} ${p7} ${close}`;
        });

        return {
            stroke,
            strokeThickness,
            fill,
            pathData
        };
    },
    template: `
        <svg>
            <path :d="pathData" :stroke="stroke" :stroke-width="strokeThickness" :fill="fill" />
        </svg>
    `
});