// ignore_for_file: sized_box_for_whitespace

import 'package:byod/helper/helper.dart';
import 'package:byod/helper/widget/style.dart';
import 'package:flutter/material.dart';

import 'cat_list.dart';
import 'fav_list.dart';

class NewHome extends StatefulWidget {
  const NewHome({Key? key}) : super(key: key);

  @override
  State<NewHome> createState() => _NewHomeState();
}

class _NewHomeState extends State<NewHome> {
  bool isSearchActive = true;
  final searchController = TextEditingController();

  @override
  Widget build(BuildContext context) {
    double paddingLeftRight = 20;
    return SafeArea(
      child: Scaffold(
        backgroundColor: backgroundColor,
        body: Container(
          height: MediaQuery.of(context).size.height,
          margin: EdgeInsets.symmetric(horizontal: paddingLeftRight),
          child: Column(
            crossAxisAlignment: CrossAxisAlignment.start,
            children: [
              customAppBar(context, paddingLeftRight),
              SizedBox(
                height: (isSearchActive) ? 16 : 20,
              ),
              AnimatedSwitcher(
                duration: Duration(milliseconds: animatedTime),
                transitionBuilder: (Widget child, Animation<double> animation) {
                  return ScaleTransition(scale: animation, child: child);
                },
                child: (isSearchActive)
                    ? SizedBox(
                        height: 36,
                        child: TextField(
                          key: const Key('SearchField'),
                          style: TextStyle(
                            color: Colors.black,
                            fontFamily: fontFamily,
                            fontSize: 15,
                          ),
                          decoration: InputDecoration(
                            enabledBorder: OutlineInputBorder(
                              borderSide: BorderSide(
                                width: 1,
                                color: Colors.grey.withOpacity(0.8),
                              ),
                            ),
                            focusedBorder: OutlineInputBorder(
                              borderSide: BorderSide(
                                width: 1,
                                color: buttonColor,
                              ),
                            ),
                            prefixIcon: Image(
                              image:
                                  const AssetImage('assets/icons/search.png'),
                              color: Colors.grey.withOpacity(0.8),
                              height: 20,
                              width: 20,
                            ),
                            hintText: 'Example: nasi',
                            hintStyle: TextStyle(
                              color: Colors.grey.withOpacity(0.8),
                              fontFamily: fontFamily,
                              fontSize: 10,
                            ),
                            border: OutlineInputBorder(
                              borderRadius: BorderRadius.circular(6),
                            ),
                          ),
                        ),
                      )
                    : const SizedBox(
                        key: Key('SearchField'),
                      ),
              ),
              SizedBox(
                height: (isSearchActive) ? 20 : 0,
              ),
              Container(
                height: 35,
                child: const FavoriteList(),
              ),
              const SizedBox(
                height: 13.5,
              ),
              Container(
                height: 219,
                child: ListView.builder(
                    scrollDirection: Axis.horizontal,
                    itemCount: 5,
                    itemBuilder: (context, i) {
                      double paddingLeftRigthGrid = 9;
                      double widthGrid = 136;
                      return girdFavItem(
                        i,
                        widthGrid,
                        paddingLeftRigthGrid,
                        context,
                      );
                    }),
              ),
              const SizedBox(
                height: 16,
              ),
              defaultText(
                context,
                'Category',
                style: categoryStyle(),
              ),
              const SizedBox(
                height: 42,
              ),
              Container(
                height: 51,
                child: const CategoryList(),
              ),
              const SizedBox(
                height: 25,
              ),
              Expanded(
                child: ListView.builder(
                  itemCount: 1000,
                  itemBuilder: (context, i) {
                    return Text('aaa');
                  },
                ),
              )
            ],
          ),
        ),
      ),
    );
  }

  Container girdFavItem(int i, double widthGrid, double paddingLeftRigthGrid,
      BuildContext context) {
    bool addCondition = true;
    return Container(
      margin: EdgeInsets.only(
        left: (i == 0) ? 0 : 8,
        right: (i == 5 - 1) ? 0 : 8,
      ),
      decoration: BoxDecoration(
        borderRadius: BorderRadius.circular(5),
        color: gridCardBackgroundColor,
      ),
      height: double.infinity,
      width: widthGrid,
      child: Container(
        margin: EdgeInsets.only(
          top: 8,
          left: paddingLeftRigthGrid,
          right: paddingLeftRigthGrid,
          bottom: 16,
        ),
        // color: Colors.red,
        child: Column(
          children: [
            Container(
              width: widthGrid - (2 * paddingLeftRigthGrid),
              height: widthGrid - (2 * paddingLeftRigthGrid),
              decoration: BoxDecoration(
                borderRadius: BorderRadius.circular(8),
                color: Colors.red,
              ),
            ),
            const SizedBox(
              height: 3,
            ),
            Container(
              width: widthGrid - (2 * paddingLeftRigthGrid),
              height: 28,
              // color: Colors.blue,
              child: Row(
                crossAxisAlignment: CrossAxisAlignment.end,
                children: [
                  Expanded(
                    child: defaultText(
                      context,
                      'BBQ Chicken Nachos',
                      maxLines: 2,
                      overFlow: TextOverflow.ellipsis,
                      style: menuNameGridFav(),
                    ),
                  ),
                  Container(
                    width: 40,
                    child: defaultText(
                      context,
                      'Rp 25,000',
                      maxLines: 3,
                      overFlow: TextOverflow.ellipsis,
                      style: menuPriceGridFav(),
                    ),
                  )
                ],
              ),
            ),
            const SizedBox(
              height: 16,
            ),
            (addCondition)
                ? Container(
                    height: 30,
                    width: widthGrid - (2 * paddingLeftRigthGrid),
                    decoration: BoxDecoration(
                      borderRadius: BorderRadius.circular(6),
                      color: buttonColor,
                    ),
                    child: Center(
                      child: defaultText(
                        context,
                        'Tambah',
                        style: addButtonGridFav(),
                      ),
                    ),
                  )
                : Container(
                    height: 30,
                    width: widthGrid - (2 * paddingLeftRigthGrid),
                    child: Row(
                      children: [
                        Container(
                          width: 27,
                          height: 24,
                          decoration: BoxDecoration(
                            borderRadius: BorderRadius.circular(6),
                            color: buttonColor,
                          ),
                          child: const Center(
                            child: Image(
                              width: 13.33,
                              height: 13.33,
                              color: textInButton,
                              image: AssetImage('assets/icons/note.png'),
                            ),
                          ),
                        ),
                        const SizedBox(
                          width: 5,
                        ),
                        Container(
                          width: 22,
                          height: 22,
                          child: const Image(
                            image: AssetImage('assets/icons/minus.png'),
                          ),
                        ),
                        Expanded(
                          child: Center(
                            child: defaultText(
                              context,
                              '10',
                              style: amountGridFav(),
                            ),
                          ),
                        ),
                        Container(
                          width: 22,
                          height: 22,
                          child: const Image(
                            image: AssetImage('assets/icons/plus.png'),
                          ),
                        )
                      ],
                    ),
                  )
          ],
        ),
      ),
    );
  }

  Container customAppBar(BuildContext context, double paddingLeftRight) {
    return Container(
      // color: Colors.red,
      height: 40,
      child: CustomScrollView(
        slivers: [
          SliverAppBar(
            automaticallyImplyLeading: false,
            title: defaultText(
              context,
              'Meja 12',
              style: tableNameStyle(),
            ),
            backgroundColor: Colors.transparent,
            pinned: true,
            actions: [
              GestureDetector(
                onTap: () {
                  setState(() {
                    isSearchActive = !isSearchActive;
                  });
                },
                child: const Image(
                  image: AssetImage('assets/icons/search.png'),
                  height: 20,
                  width: 20,
                ),
              ),
              const SizedBox(
                width: 16,
              ),
              const Image(
                image: AssetImage('assets/icons/book.png'),
                height: 20,
                width: 20,
              ),
              SizedBox(
                width: paddingLeftRight,
              ),
            ],
          ),
        ],
      ),
    );
  }

  AnimatedSwitcher seearchField(BuildContext context) {
    return AnimatedSwitcher(
      duration: const Duration(milliseconds: 500),
      transitionBuilder: (Widget child, Animation<double> animation) {
        return ScaleTransition(scale: animation, child: child);
      },
      child: TextField(
        key: const Key('SearchField'),
        decoration: InputDecoration(
          focusedBorder: OutlineInputBorder(
            borderSide: BorderSide(
              width: 1,
              color: buttonColor,
            ),
          ),
          prefixIcon: const Image(
            image: AssetImage('assets/icons/search.png'),
            height: 20,
            width: 20,
          ),
          hintText: 'Example: nasi',
          border: OutlineInputBorder(
            borderRadius: BorderRadius.circular(6),
          ),
        ),
      ),
    );
  }
}
