import 'package:flutter/material.dart';
import 'package:happy_camper_proto/listtemplates.dart';
import 'package:happy_camper_proto/preplist.dart';

class TemplateEditPage extends StatefulWidget {
  const TemplateEditPage({super.key, required this.template});

  final ListTemplate template;

  @override
  State<StatefulWidget> createState() => _TemplateEditPageState();
}

class _TemplateEditPageState extends State<TemplateEditPage> {
  late ListTemplate template;

  @override
  void initState() {
    template = widget.template;
    super.initState();
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
        appBar: AppBar(),
        body: ListView.separated(
            itemCount: template.length,
            separatorBuilder: (context, index) => const Padding(
                padding: EdgeInsets.symmetric(horizontal: 10),
                child: Divider()),
            itemBuilder: (context, index) =>
                ListDisplay(list: template.lists[index])));
  }
}

class ListDisplay extends StatefulWidget {
  const ListDisplay({super.key, required this.list, this.hidden = false});

  final Preplist list;
  final bool hidden;

  @override
  State<StatefulWidget> createState() => _ListDisplayState();
}

class _ListDisplayState extends State<ListDisplay> {
  late Preplist list;
  late bool hidden;
  bool editMode = false;

  @override
  void initState() {
    list = widget.list;
    hidden = widget.hidden;
    super.initState();
  }

  void _toggleHidden() {
    setState(() {
      hidden = !hidden;
    });
  }

  void _toggleEdit() {
    setState(() {
      editMode = !editMode;
    });
  }

  @override
  Widget build(BuildContext context) {
    return GestureDetector(
        onTap: _toggleHidden,
        onLongPress: _toggleEdit,
        child: Padding(
            padding: const EdgeInsets.all(10),
            child: Column(
              mainAxisSize: MainAxisSize.min,
              crossAxisAlignment: CrossAxisAlignment.start,
              children: [
                Row(
                  children: [
                    Text(
                      style: Theme.of(context).textTheme.titleLarge,
                      list.name,
                    ),
                    const Spacer(),
                    Visibility(
                        visible: editMode, child: const Icon(Icons.edit)),
                    Icon(hidden ? Icons.arrow_left : Icons.arrow_drop_down),
                  ],
                ),
                Visibility(
                    visible: !hidden,
                    child: Column(
                        children: list.tasks
                            .map((task) => Text(task.text,
                                style: Theme.of(context).textTheme.bodyLarge))
                            .toList())),
              ],
            )));
  }
}