import 'dart:convert';

import 'package:flutter/cupertino.dart';
import 'package:flutter/material.dart';
import 'package:flutter/services.dart';

class About extends StatefulWidget {
  const About({super.key});

  @override
  State<About> createState() => _NewsState();
}

class _NewsState extends State<About> {
  int clickid = 0;

  void _gotohomePage() {
    Navigator.pushNamed(context, "/home");
  }

  @override
  Widget build(BuildContext context) {
    return FutureBuilder(
      future: rootBundle
          .loadString("assets/關於競賽.json")
          .then((s) => jsonDecode(s)),
      builder: (context, snapshot) {
        final List<dynamic>? data = snapshot.data as List<dynamic>?;
        return Stack(
          children: [
            Positioned.fill(
              child: Image.asset("assets/background.png", fit: BoxFit.cover),
            ),
            Scaffold(
              backgroundColor: Colors.transparent,
              appBar: AppBar(
                backgroundColor: Colors.transparent,
                leading: IconButton(
                  onPressed: _gotohomePage,
                  icon: Image.asset("assets/f6.png"),
                ),
                title: Row(children: [SizedBox(width: 100), Text("關於競賽")]),
              ),
              body: Column(
                children: [
                  SizedBox(
                    height: 60,
                    child: ListView.builder(
                      scrollDirection: Axis.horizontal,
                      itemCount: data?.length ?? 0,
                      itemBuilder: (context, index) {
                        return InkWell(
                            onTap: () {
                              setState(() {
                                clickid = index;
                              });
                            },
                            child: Padding(padding: EdgeInsetsGeometry.all(15),
                                child: Container(
                                  alignment: Alignment.center,
                                  child: Text(
                                    data![index]["name"],
                                    style: TextStyle(
                                      fontSize: 25,
                                      color: (clickid==index)? Colors.black :Colors.grey
                                    ),
                                  ),
                                ))
                        );
                      },
                    ),
                  ),

                  Expanded(
                    child: SingleChildScrollView(
                      padding: const EdgeInsets.all(20),
                      child: Column(
                        children: [
                          Text(
                              data?[clickid]["info"]
                          ),
                        ],
                      ),
                    ),
                  ),
                ],
              ),
            ),
          ],
        );
      },
    );
  }
}