import 'package:flutter/material.dart';
import 'package:gap/gap.dart';
import 'package:wyatt_ui_components/wyatt_ui_components.dart';
import 'package:wyatt_ui_kit/wyatt_ui_kit.dart';
import 'package:wyatt_ui_kit_example/demo_page.dart';

class TextInputs extends DemoPage {
  const TextInputs({super.key});

  @override
  Widget build(BuildContext context) => const TextInputsCore();

  @override
  String get title => 'Text Inputs';
}

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

  @override
  State<TextInputsCore> createState() => _TextInputsCoreState();
}

class _TextInputsCoreState extends State<TextInputsCore> {
  final _formKey = GlobalKey<FormState>();
  final _controller = TextEditingController();
  final _focusNode = FocusNode();

  final _formKey2 = GlobalKey<FormState>();
  final _controller2 = TextEditingController();
  final _focusNode2 = FocusNode();

  final _formKey3 = GlobalKey<FormState>();
  final _controller3 = TextEditingController();
  final _focusNode3 = FocusNode();

  final _formKey4 = GlobalKey<FormState>();
  final _controller4 = TextEditingController();
  final _focusNode4 = FocusNode();

  final _formKey5 = GlobalKey<FormState>();
  final _controller5 = TextEditingController();
  final _focusNode5 = FocusNode();

  final _formKey6 = GlobalKey<FormState>();
  final _controller6 = TextEditingController();
  final _focusNode6 = FocusNode();

  final ValueNotifier<bool> _enable = ValueNotifier(true);

  @override
  void initState() {
    super.initState();
    Future.delayed(const Duration(milliseconds: 500), () {
      setState(() {
        _enable.value = false;
      });
    });
  }

  @override
  Widget build(BuildContext context) => Form(
        child: ListView(
          cacheExtent: 1000,
          children: [
            const Gap(20),
            Align(
              child: Text(
                'Text inputs',
                style: Theme.of(context).textTheme.titleLarge,
              ),
            ),
            const Gap(20),
            TextInput(
              key: _formKey6,
              controller: _controller6,
              focusNode: _focusNode6,
              label: 'Nom / Prénom'.wrap(),
              onError: (value) => 'Erreur : ${value.length} > 5.',
              validator: (value) => value.length > 5,
            ),
            const Gap(20),
            TextInput(
              key: _formKey,
              enabled: _enable,
              controller: _controller,
              focusNode: _focusNode,
              label: 'Nom / Prénom'.wrap(),
              onError: (value) => 'Erreur : ${value.length} > 5.',
              validator: (value) => value.length > 5,
            ),
            const Gap(20),
            TextInput(
              key: _formKey2,
              controller: _controller2,
              focusNode: _focusNode2,
              maxLines: 3,
              onError: (value) => 'Erreur : ${value.length} > 5.',
              validator: (value) => value.length > 5,
              onChanged: (value) {},
            ),
            const Gap(20),
            TextInput(
              key: _formKey3,
              controller: _controller3,
              focusNode: _focusNode3,
              expand: false,
              label: 'Nom / Prénom'.wrap(),
              onError: (value) => 'Erreur : ${value.length} > 5.',
              validator: (value) => value.length > 5,
              onChanged: (value) {},
            ),
            const Gap(20),
            TextInput(
              key: _formKey4,
              expand: false,
              controller: _controller4,
              focusNode: _focusNode4,
              label: 'Nom / Prénom'.wrap(),
              maxLines: 3,
              onError: (value) => 'Erreur : ${value.length} > 5.',
              validator: (value) => value.length > 5,
              onChanged: (value) {},
            ),
            const Gap(20),
            TextInput(
              key: _formKey5,
              prefixIcon: const Icon(Icons.architecture),
              suffixIcon: const Icon(Icons.architecture),
              controller: _controller5,
              focusNode: _focusNode5,
              label: 'Nom / Prénom'.wrap(),
              onError: (value) => 'Erreur : ${value.length} > 5.',
              validator: (value) => value.length > 5,
            ),
            const Gap(20),
          ],
        ),
      );
}
