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/shimmer_placeholder.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 SingleChildScrollView(
      child: Column(
        mainAxisAlignment: MainAxisAlignment.center,
        crossAxisAlignment: CrossAxisAlignment.stretch,
        children: [
          Center(
            child: Container(
              padding: const EdgeInsets.symmetric(horizontal: 12, vertical: 16),
              color: Theme.of(context).colorScheme.background,
              child: DidvanText(
                'دسته‌بندی‌های کلان',
                color: Theme.of(context).colorScheme.title,
                style: Theme.of(context).textTheme.titleMedium,
              ),
            ),
          ),
          const Padding(
            padding: EdgeInsets.symmetric(
              horizontal: 20,
            ),
            child: NewStatisticCategories(),
          ),
          const DidvanDivider(
            verticalPadding: 4,
          ),
          StateHandler<NewStatisticState>(
            enableEmptyState: false,
            onRetry: context.read<NewStatisticState>().init,
            state: context.watch<NewStatisticState>(),
            placeholder: Padding(
              padding: const EdgeInsets.only(top: 48.0),
              child: Column(
                children: [
                  placeholder,
                  const SizedBox(
                    height: 46,
                  ),
                  placeholder,
                  const SizedBox(
                    height: 46,
                  ),
                  placeholder,
                  const SizedBox(
                    height: 46,
                  ),
                  placeholder,
                ],
              ),
            ),
            builder: (context, state) => Column(
              crossAxisAlignment: CrossAxisAlignment.stretch,
              children: [
                itemsInStatics(
                    context, state, 0, DidvanIcons.star_circle_solid),
                itemsInStatics(context, state, 1, DidvanIcons.currency_solid),
                itemsInStatics(context, state, 2, DidvanIcons.bitcoin_solid),
                itemsInStatics(context, state, 3, DidvanIcons.metal_solid),
                itemsInStatics(context, state, 4, DidvanIcons.commodity_solid),
                itemsInStatics(context, state, 5, DidvanIcons.industry_solid,
                    hasDivider: false),
                const SizedBox(
                  height: 24,
                ),
              ],
            ),
          ),
        ],
      ),
    );
  }

  Widget itemsInStatics(
      BuildContext context, NewStatisticState state, int id, IconData icon,
      {final bool? hasDivider}) {
    bool d = hasDivider ?? true;
    return state.contents[id].contents.isEmpty
        ? const SizedBox()
        : Padding(
            padding: const EdgeInsets.only(top: 12.0),
            child: Column(
              crossAxisAlignment: CrossAxisAlignment.stretch,
              children: [
                GestureDetector(
                    onTap: () => Future.delayed(Duration.zero, () {
                          Navigator.of(context)
                              .pushNamed(Routes.statGeneral, arguments: {
                            "id": id == 0 ? 7 : id,
                            "title": state.contents[id].header,
                          }).then((value) => _reset());
                        }),
                    child: StatHeader(
                      header: state.contents[id].header,
                      icon: icon,
                    )),
                SizedBox(
                  height: 100,
                  width: 80,
                  child: ListView.builder(
                    scrollDirection: Axis.horizontal,
                    shrinkWrap: true,
                    physics: const BouncingScrollPhysics(),
                    itemCount: state.contents[id].contents.length,
                    itemBuilder: (context, index) => StatMainCard(
                      id: id,
                      statistic: state.contents[id].contents[index],
                    ),
                  ),
                ),
                const SizedBox(
                  height: 4,
                ),
                if (d)
                  const DidvanDivider(
                    verticalPadding: 4,
                  ),
              ],
            ),
          );
  }

  static Widget get placeholder => const Column(
        children: [
          Padding(
            padding: EdgeInsets.symmetric(horizontal: 8.0),
            child: Row(
              mainAxisAlignment: MainAxisAlignment.spaceBetween,
              children: [
                ShimmerPlaceholder(
                  height: 16,
                  width: 100,
                ),
                ShimmerPlaceholder(
                  height: 16,
                  width: 50,
                )
              ],
            ),
          ),
          SizedBox(
            height: 18,
          ),
          Flex(
            direction: Axis.horizontal,
            mainAxisAlignment: MainAxisAlignment.spaceBetween,
            children: [
              Flexible(
                flex: 1,
                child: Padding(
                  padding: EdgeInsets.symmetric(horizontal: 8.0),
                  child: DidvanCard(
                    child: ShimmerPlaceholder(
                      height: 60,
                    ),
                  ),
                ),
              ),
              Flexible(
                flex: 1,
                child: Padding(
                  padding: EdgeInsets.symmetric(horizontal: 8.0),
                  child: DidvanCard(
                    child: ShimmerPlaceholder(
                      height: 60,
                    ),
                  ),
                ),
              ),
              Flexible(
                flex: 1,
                child: Padding(
                  padding: EdgeInsets.symmetric(horizontal: 8.0),
                  child: DidvanCard(
                    child: ShimmerPlaceholder(
                      height: 60,
                    ),
                  ),
                ),
              ),
            ],
          ),
        ],
      );
}

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;
  final IconData icon;
  const StatHeader({super.key, required this.header, required this.icon});

  @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: [
                Icon(icon),
                const SizedBox(width: 4),
                DidvanText(
                  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,
                )
              ],
            )
          ],
        ),
      )
    ]);
  }
}