import 'package:flutter/material.dart';
import 'package:survive_app/ui/style/colors.dart';
import 'package:survive_app/ui/style/dimensions.dart';
import 'package:survive_app/ui/viewmodel/wikipedia_viewmodel.dart';
import 'package:survive_app/ui/widget/status_bar_spacer.dart';

class WikipediaScreen extends StatelessWidget {
  final WikipediaViewmodel vm;
  const WikipediaScreen({super.key, required this.vm});

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      backgroundColor: Colors.white,
      body: SingleChildScrollView(
        child: Padding(
          padding: EdgeInsets.all(Margins.small),
          child: Column(
            spacing: Margins.small,
            crossAxisAlignment: CrossAxisAlignment.start,
            children: [
              StatusBarSpacer(),
              IconButton(
                onPressed: () => vm.returnClick(context),
                icon: Icon(Icons.arrow_back_outlined),
              ),
              Text(
                "Wikipedia",
                style: TextStyle(
                  color: Colors.black,
                  fontSize: TextSizes.large,
                  fontWeight: FontWeight.bold,
                ),
              ),
              Row(
                children: [
                  Expanded(
                    child: TextField(
                      cursorColor: ColorPalette.primary,
                      decoration: InputDecoration(
                        suffixIcon: Container(
                          decoration: BoxDecoration(
                            color: ColorPalette.secondary,
                            borderRadius: BorderRadius.all(
                              Radius.circular(100),
                            ),
                          ),
                          child: IconButton(
                            onPressed: () {},
                            color: Colors.black,
                            icon: Icon(Icons.download, size: 18),
                          ),
                        ),
                        hintText: "Podaj tytul artykulu...",
                        filled: true,
                        fillColor: ColorPalette.secondary,
                        focusColor: Colors.transparent,
                        enabledBorder: OutlineInputBorder(
                          borderSide: BorderSide(color: Colors.transparent),
                          borderRadius: BorderRadius.all(Radius.circular(15)),
                        ),
                        focusedBorder: OutlineInputBorder(
                          borderSide: BorderSide(color: Colors.transparent),
                          borderRadius: BorderRadius.all(Radius.circular(15)),
                        ),
                      ),
                      controller: vm.controller,
                    ),
                  ),
                ],
              ),
              ValueListenableBuilder(
                valueListenable: vm.articles,
                builder: (context, value, child) {
                  return Column(
                    children: value.map((a) => Text(a.title)).toList(),
                  );
                },
              ),
            ],
          ),
        ),
      ),
    );
  }
}