import "/_/code/components/LoadingCircle.js"

class DesktopIntegrationsSection extends Shadow {
    constructor(stripeDetails, onConnectStripe) {
        super()
        this.stripeDetails = stripeDetails
        this.onConnectStripe = onConnectStripe
    }

    render() {
        VStack(() => {
            HStack(() => {
                VStack(() => {
                    p("Integrations")
                        .margin(0).fontSize(1.35, em).fontWeight("700").color("var(--headertext)")
                    p("Connect third-party services to your network")
                        .margin(0).marginTop(0.2, em).fontSize(0.75, em).color("var(--headertext)").opacity(0.42)
                })
                .gap(0)
            })
            .paddingHorizontal(1.75, em).paddingTop(1.5, em).paddingBottom(1.25, em)
            .alignItems("flex-start").flexShrink(0)

            VStack(() => {
                this.settingSection("💳", "Stripe", "Accept payments and manage subscriptions", () => {
                    if (this.stripeDetails === null) {
                        LoadingCircle()
                    } else if (this.stripeDetails?.email) {
                        HStack(() => {
                            VStack(() => {}).width(8, px).height(8, px).borderRadius(50, pct).background("#10b981").flexShrink(0)
                            p("Connected").margin(0).fontSize(0.82, em).fontWeight("600").color("#10b981")
                        })
                        .gap(0.35, em).alignItems("center").marginBottom(0.3, em)
                        p(this.stripeDetails.email)
                            .margin(0).fontSize(0.75, em).color("var(--headertext)").opacity(0.5)
                    } else {
                        p("Not connected")
                            .margin(0).fontSize(0.82, em).color("var(--headertext)").opacity(0.4).marginBottom(0.65, em)
                        button("Connect Stripe →")
                            .paddingHorizontal(1, em).paddingVertical(0.5, em)
                            .border("none").borderRadius(0.45, em)
                            .background("var(--quillred)").color("white")
                            .fontSize(0.82, em).fontWeight("600").cursor("pointer")
                            .onClick((done) => { if (done) this.onConnectStripe() })
                    }
                })
            })
            .paddingHorizontal(1.75, em).flex(1)
        })
        .height(100, pct).overflow("hidden")
    }

    settingSection(icon, title, subtitle, renderContent) {
        VStack(() => {
            HStack(() => {
                p(icon).margin(0).fontSize(1, em).lineHeight("1").flexShrink(0)
                VStack(() => {
                    p(title).margin(0).fontSize(0.92, em).fontWeight("700").color("var(--headertext)")
                    p(subtitle).margin(0).marginTop(0.1, em).fontSize(0.72, em).color("var(--headertext)").opacity(0.42)
                })
                .gap(0)
            })
            .gap(0.65, em).alignItems("flex-start").marginBottom(0.85, em)
            renderContent()
        })
        .padding(1.1, em).background("var(--darkaccent)").border("1px solid var(--divider)")
        .borderRadius(0.65, em).marginBottom(0.85, em)
    }
}

register(DesktopIntegrationsSection)