// 假设 GeometryHelper 类的实现
class GeometryHelper {
    static GetRoundRectangle(rect: { width: number; height: number }, borderThickness: number, cornerRadius: number): string {
        // 这里只是简单返回一个 CSS 的 border-radius 值，实际应用中可能需要更复杂的计算
        return `${cornerRadius}px`;
    }
}

class ClipBorder {
    private clipRect: string | null = null;
    private oldClip: string | null = null;
    private element: HTMLElement;
    private child: HTMLElement | null = null;

    constructor(element: HTMLElement) {
        this.element = element;
    }

    set Child(value: HTMLElement | null) {
        if (this.child !== value) {
            if (this.child) {
                // Restore original clipping of the old child
                this.child.style.clipPath = this.oldClip || '';
            }

            if (value) {
                // Store the current clipping of the new child
                this.oldClip = value.style.clipPath;
            } else {
                // If we dont set it to null we could leak a Geometry object
                this.oldClip = null;
            }

            this.child = value;
            if (this.child) {
                this.element.appendChild(this.child);
                this.onApplyChildClip();
            }
        }
    }

    get Child(): HTMLElement | null {
        return this.child;
    }

    private onApplyChildClip() {
        const child = this.child;
        if (child) {
            // Get the geometry of a rounded rectangle border based on the BorderThickness and CornerRadius
            const borderThickness = parseFloat(getComputedStyle(this.element).borderWidth);
            const cornerRadius = parseFloat(getComputedStyle(this.element).borderTopLeftRadius);
            const rect = { width: child.offsetWidth, height: child.offsetHeight };
            this.clipRect = GeometryHelper.GetRoundRectangle(rect, borderThickness, cornerRadius);
            child.style.clipPath = `round rect(0, 0, ${rect.width}px, ${rect.height}px, ${this.clipRect})`;
        }
    }

    render() {
        this.onApplyChildClip();
    }
}

// 使用示例
const container = document.createElement('div');
container.style.border = '1px solid black';
container.style.borderRadius = '10px';
document.body.appendChild(container);

const clipBorder = new ClipBorder(container);
const childElement = document.createElement('div');
childElement.style.width = '200px';
childElement.style.height = '200px';
childElement.style.backgroundColor = 'red';
clipBorder.Child = childElement;
clipBorder.render();