import 'package:didvan/config/theme_data.dart';
import 'package:didvan/constants/app_icons.dart';
import 'package:didvan/models/new_statistic/new_statistics_model.dart';
import 'package:didvan/providers/theme.dart';
import 'package:didvan/providers/user.dart';
import 'package:didvan/routes/routes.dart';
import 'package:didvan/views/home/new_statistic/new_statistics_state.dart';
import 'package:didvan/views/home/new_statistic/widgets/statistic_cat.dart';
import 'package:didvan/views/widgets/didvan/card.dart';
import 'package:didvan/views/widgets/didvan/divider.dart';
import 'package:didvan/views/widgets/didvan/text.dart';
import 'package:didvan/views/widgets/state_handlers/state_handler.dart';

import 'package:flutter/material.dart';
import 'package:provider/provider.dart';

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

  @override
  State<NewStatistic> createState() => _NewStatisticState();
}

class _NewStatisticState extends State<NewStatistic> {
  @override
  void initState() {
    final state = context.read<NewStatisticState>();
    state.init();
    context.read<ThemeProvider>().addListener(state.refresh);
    super.initState();
  }

  void _reset() {
    final state = context.read<NewStatisticState>();
    state.getStatistic();
  }

  @override
  Widget build(BuildContext context) {
    return StateHandler<NewStatisticState>(
      onRetry: context.read<NewStatisticState>().init,
      state: context.watch<NewStatisticState>(),
      builder: (context, state) => Padding(
        padding: const EdgeInsets.all(8.0),
        child: SingleChildScrollView(
          child: Column(
            mainAxisAlignment: MainAxisAlignment.center,
            crossAxisAlignment: CrossAxisAlignment.stretch,
            children: [
              Center(
                child: Container(
                  padding: const EdgeInsets.symmetric(horizontal: 12),
                  color: Theme.of(context).colorScheme.background,
                  child: DidvanText(
                    'دسته‌بندی‌های کلان',
                    color: Theme.of(context).colorScheme.title,
                    style: Theme.of(context).textTheme.titleMedium,
                  ),
                ),
              ),
              const Padding(
                padding: EdgeInsets.only(
                  left: 20,
                  right: 20,
                  top: 16,
                ),
                child: NewStatisticCategories(),
              ),
              const DidvanDivider(
                verticalPadding: 4,
              ),
              GestureDetector(
                  onTap: () => Future.delayed(Duration.zero, () {
                        Navigator.of(context)
                            .pushNamed(Routes.statGeneral, arguments: {
                          "id": 7,
                          "title": state.contents[0].header,
                        }).then((value) => state.getStatistic());
                      }),
                  child: StatHeader(header: state.contents[0].header)),
              SizedBox(
                height: 100,
                width: 80,
                child: ListView.builder(
                  scrollDirection: Axis.horizontal,
                  shrinkWrap: true,
                  physics: const ScrollPhysics(),
                  itemCount: state.contents[0].contents.length,
                  itemBuilder: (context, index) => StatMainCard(
                    statistic: state.contents[0].contents[index],
                  ),
                ),
              ),
              const DidvanDivider(
                verticalPadding: 4,
              ),
              GestureDetector(
                  onTap: () => Future.delayed(Duration.zero, () {
                        Navigator.of(context).pushNamed(Routes.statGeneral,
                            arguments: {
                              "id": 1,
                              "title": state.contents[1].header
                            });
                      }).then((value) => _reset()),
                  child: StatHeader(header: state.contents[1].header)),
              SizedBox(
                  height: 100,
                  width: 80,
                  child: ListView.builder(
                      scrollDirection: Axis.horizontal,
                      shrinkWrap: true,
                      physics: const ScrollPhysics(),
                      itemCount: state.contents[1].contents.length,
                      itemBuilder: (context, index) => StatMainCard(
                          statistic: state.contents[1].contents[index]))),
              const DidvanDivider(
                verticalPadding: 4,
              ),
              GestureDetector(
                  onTap: () => Future.delayed(Duration.zero, () {
                        Navigator.of(context).pushNamed(Routes.statGeneral,
                            arguments: {
                              "id": 2,
                              "title": state.contents[2].header
                            });
                      }),
                  child: StatHeader(header: state.contents[2].header)),
              SizedBox(
                  height: 100,
                  width: 80,
                  child: ListView.builder(
                      scrollDirection: Axis.horizontal,
                      shrinkWrap: true,
                      physics: const ScrollPhysics(),
                      itemCount: state.contents[2].contents.length,
                      itemBuilder: (context, index) => StatMainCard(
                          statistic: state.contents[2].contents[index]))),
              const DidvanDivider(
                verticalPadding: 4,
              ),
              GestureDetector(
                  onTap: () => Future.delayed(Duration.zero, () {
                        Navigator.of(context).pushNamed(Routes.statGeneral,
                            arguments: {
                              "id": 3,
                              "title": state.contents[3].header
                            });
                      }),
                  child: StatHeader(header: state.contents[3].header)),
              SizedBox(
                  height: 100,
                  width: 80,
                  child: ListView.builder(
                      scrollDirection: Axis.horizontal,
                      shrinkWrap: true,
                      physics: const ScrollPhysics(),
                      itemCount: state.contents[3].contents.length,
                      itemBuilder: (context, index) => StatMainCard(
                          statistic: state.contents[3].contents[index]))),
              const DidvanDivider(
                verticalPadding: 4,
              ),
              GestureDetector(
                  onTap: () => Future.delayed(Duration.zero, () {
                        Navigator.of(context).pushNamed(Routes.statGeneral,
                            arguments: {
                              "id": 4,
                              "title": state.contents[4].header
                            });
                      }),
                  child: StatHeader(header: state.contents[4].header)),
              SizedBox(
                  height: 100,
                  width: 80,
                  child: ListView.builder(
                      scrollDirection: Axis.horizontal,
                      shrinkWrap: true,
                      physics: const ScrollPhysics(),
                      itemCount: state.contents[4].contents.length,
                      itemBuilder: (context, index) => StatMainCard(
                          statistic: state.contents[4].contents[index]))),
              const DidvanDivider(
                verticalPadding: 4,
              ),
              GestureDetector(
                  onTap: () => Future.delayed(Duration.zero, () {
                        Navigator.of(context)
                            .pushNamed(Routes.statGeneral, arguments: {
                          "id": 5,
                          "title": state.contents[5].header,
                        });
                      }),
                  child: StatHeader(header: state.contents[5].header)),
              SizedBox(
                  height: 100,
                  width: 80,
                  child: ListView.builder(
                      scrollDirection: Axis.horizontal,
                      shrinkWrap: true,
                      physics: const ScrollPhysics(),
                      itemCount: state.contents[5].contents.length,
                      itemBuilder: (context, index) => StatMainCard(
                          id: 5,
                          statistic: state.contents[5].contents[index]))),
            ],
          ),
        ),
      ),
    );
  }
}

class StatMainCard extends StatelessWidget {
  final Content statistic;
  final int? id;
  const StatMainCard({super.key, required this.statistic, this.id});

  Color _diffColor(context) => statistic.data.dt == 'high'
      ? Theme.of(context).colorScheme.success
      : Theme.of(context).colorScheme.error;

  bool get _hasDiff => statistic.data.dp != 0;

  @override
  Widget build(BuildContext context) {
    final state = context.read<NewStatisticState>();

    return GestureDetector(
      onTap: () => id != 5
          ? Navigator.of(context)
              .pushNamed(Routes.statisticDetails, arguments: {
              'onMarkChanged': (value) => onMarkChanged(statistic.id, value),
              'label': statistic.label,
              'title': statistic.title,
              'marked': statistic.marked,
            }).then((value) => state.getStatistic())
          : null,
      child: Padding(
        padding: const EdgeInsets.all(4.0),
        child: DidvanCard(
          padding: const EdgeInsets.symmetric(horizontal: 24),
          child: Column(
            mainAxisAlignment: MainAxisAlignment.center,
            children: [
              Row(
                mainAxisAlignment: MainAxisAlignment.center,
                crossAxisAlignment: CrossAxisAlignment.center,
                children: [
                  if (statistic.marked)
                    Icon(
                      Icons.star,
                      color: Theme.of(context).colorScheme.yellow,
                      size: 18,
                    ),
                  const SizedBox(width: 8),
                  DidvanText(
                    statistic.title,
                    style: Theme.of(context).textTheme.bodyLarge,
                  ),
                ],
              ),
              const SizedBox(height: 4),
              Row(
                children: [
                  DidvanText(
                    statistic.data.p,
                    style: Theme.of(context).textTheme.bodySmall,
                  ),
                ],
              ),
              if (_hasDiff) const SizedBox(height: 4),
              if (_hasDiff)
                Row(
                  children: [
                    if (_hasDiff)
                      Icon(
                        statistic.data.dt == 'high'
                            ? DidvanIcons.angle_up_regular
                            : DidvanIcons.angle_down_regular,
                        size: 18,
                        color: _diffColor(context),
                      ),
                    if (_hasDiff) const SizedBox(width: 4),
                    if (_hasDiff)
                      DidvanText(
                        '${statistic.data.dp}%',
                        style: Theme.of(context).textTheme.bodySmall,
                        color: _diffColor(context),
                      ),
                  ],
                ),
            ],
          ),
        ),
      ),
    );
  }

  onMarkChanged(int id, bool value) {
    UserProvider.changeStatisticMark(id, value);
  }
}

class StatHeader extends StatelessWidget {
  final String header;
  const StatHeader({super.key, required this.header});

  @override
  Widget build(BuildContext context) {
    return Column(children: [
      Padding(
        padding: const EdgeInsets.only(
          left: 16,
          right: 16,
          bottom: 8,
          top: 8,
        ),
        child: Row(
          mainAxisAlignment: MainAxisAlignment.spaceBetween,
          children: [
            Row(
              children: [
                const SizedBox(width: 4),
                DidvanText(
                  // ignore: unnecessary_string_interpolations
                  "$header",
                  style: Theme.of(context).textTheme.titleMedium,
                  color: Theme.of(context).colorScheme.title,
                ),
              ],
            ),
            Row(
              children: [
                DidvanText(
                  "همه",
                  color: Theme.of(context).colorScheme.primary,
                ),
                Icon(
                  DidvanIcons.angle_left_light,
                  color: Theme.of(context).colorScheme.primary,
                )
              ],
            )
          ],
        ),
      )
    ]);
  }
}