TextField

@Observable class State {
    var text = ""
}

TextField(
    placeholder: "Enter text",
    onChanged: { value in
        state.text = value
    }
)

import Foundation
import JavaScriptKit
import Observation
import Shaft
import ShaftWeb

Shaft.backend = ShaftWebBackend { _ in
    JSObject.global.document.querySelector("canvas")
}

@Observable class FormState {
    var name = ""
    var email = ""
    var password = ""
    var message = ""
}

let state = FormState()

runApp(TextFieldDemoApp())

final class TextFieldDemoApp: StatelessWidget {
    func build(context: any BuildContext) -> any Widget {
        Column(crossAxisAlignment: .stretch, spacing: 16) {
            Text("TextField Examples")
                .textStyle(.init(fontSize: 24, fontWeight: .bold))

            // Basic TextField
            TextField(
                onChanged: { value in
                    state.name = value
                },
                placeholder: "Enter your name"
            )
            .padding(.all(12))
            .decoration(
                .box(
                    color: Color(0xFF_F5F5F5),
                    borderRadius: .circular(8)
                ))

            // Email TextField
            TextField(
                onChanged: { value in
                    state.email = value
                },
                placeholder: "Email address"
            )
            .padding(.all(12))
            .decoration(
                .box(
                    color: Color(0xFF_F5F5F5),
                    borderRadius: .circular(8)
                ))

            // Password TextField
            TextField(
                obscureText: true,
                onChanged: { value in
                    state.password = value
                },
                placeholder: "Password"
            )
            .padding(.all(12))
            .decoration(
                .box(
                    color: Color(0xFF_F5F5F5),
                    borderRadius: .circular(8)
                ))

            // Multiline TextField
            TextField(
                maxLines: 4,
                onChanged: { value in
                    state.message = value
                },
                placeholder: "Enter a message",
            )
            .padding(.all(12))
            .decoration(
                .box(
                    color: Color(0xFF_F5F5F5),
                    borderRadius: .circular(8)
                ))

            // Display values
            SizedBox(height: 8)
            Text("Name: \(state.name)")
                .textStyle(.init(color: Color(0xFF_666666), fontSize: 14))
        }
        .padding(.all(24))
    }
}

let controller = TextEditingController()

TextField(
    controller: controller,
    placeholder: "Controlled input"
)

// Later: read or set value
print(controller.text)
controller.text = "New value"