import 'package:hsrw_campus_website/components/header.dart';
import 'package:hsrw_campus_website/state/theme_state.dart';
import 'package:jaspr/jaspr.dart';

import '../components/counter.dart';

// By using the @client annotation this component will be automatically compiled to javascript and mounted
// on the client. Therefore:
// - this file and any imported file must be compilable for both server and client environments.
// - this component and any child components will be built once on the server during pre-rendering and then
//   again on the client during normal rendering.
class Home extends StatefulComponent {
  const Home({super.key});

  @override
  State<Home> createState() => HomeState();
}

class HomeState extends State<Home> {
  @override
  void initState() {
    super.initState();
    // Run code depending on the rendering environment.
    if (kIsWeb) {
      print("Hello client");
      // When using @client components there is no default `main()` function on the client where you would normally
      // run any client-side initialization logic. Instead you can put it here, considering this component is only
      // mounted once at the root of your client-side component tree.
    } else {
      print("Hello server");
    }
  }

  @override
  Iterable<Component> build(BuildContext context) sync* {
    // var themeState = ThemeState.of(context);
    yield section([
      img(src: 'images/logo.png', width: 80),
      h1([text('Welcome')]),
      p([text('You successfully create a new Jaspr site.')]),
      div(styles: Styles.box(height: 100.px), []),
      const Counter(),
      button(
        onClick: () {
          print('Hello client');
          // themeState.toggleTheme(!themeState.isDarkMode);
        },
        [
          text('Click Me'),
        ],
      ),
      // Button(
      //   label: 'Button 1',
      //   onPressed: () {
      //     print("Button 1 pressed");
      //   },
      // ),
    ]);
  }
}