import 'package:flutter/material.dart';
import 'package:stacked/stacked.dart';
import 'package:yimaru_app/models/course_lesson.dart';
import 'package:yimaru_app/models/course_module.dart';
import 'package:yimaru_app/ui/views/course_module/course_module_viewmodel.dart';
import 'package:yimaru_app/ui/widgets/course_lesson_tile.dart';
import 'package:yimaru_app/ui/widgets/custom_linear_progress_indicator.dart';
import 'package:yimaru_app/ui/widgets/finish_practice_sheet.dart';

import '../common/app_colors.dart';
import '../common/ui_helpers.dart';
import 'custom_elevated_button.dart';

class CourseModuleTileLarge extends ViewModelWidget<CourseModuleViewModel> {
  final CourseModule? module;
  final List<CourseLesson> lessons;
  final GestureTapCallback? onContinueTap;

  const CourseModuleTileLarge(
      {super.key,
      this.onContinueTap,
      required this.module,
      required this.lessons});

  Future<void> _showSheet(
          {required BuildContext context,
          required CourseModuleViewModel viewModel}) async =>
      await showModalBottomSheet(
        context: context,
        backgroundColor: kcTransparent,
        builder: (_) => _buildSheet(viewModel),
      );

  @override
  Widget build(BuildContext context, CourseModuleViewModel viewModel) =>
      _buildExpansionTileCard(context: context, viewModel: viewModel);

  Widget _buildExpansionTileCard(
          {required BuildContext context,
          required CourseModuleViewModel viewModel}) =>
      Container(
        margin: const EdgeInsets.only(bottom: 15),
        decoration: BoxDecoration(
          borderRadius: BorderRadius.circular(5),
          border: Border.all(color: kcVeryLightGrey),
        ),
        child: _buildTileStack(context: context, viewModel: viewModel),
      );

  Widget _buildTileStack(
          {required BuildContext context,
          required CourseModuleViewModel viewModel}) =>
      Stack(
        children: [
          _buildExpansionTile(context: context, viewModel: viewModel),
          // _buildContainerShaderState()
        ],
      );

  Widget _buildExpansionTile(
          {required BuildContext context,
          required CourseModuleViewModel viewModel}) =>
      ExpansionTile(
        enabled: true,
        title: _buildTitle(),
        textColor: kcDarkGrey,
        showTrailingIcon: true,
        initiallyExpanded: true,
        subtitle: _buildSubtitle(),
        collapsedIconColor: kcDarkGrey,
        collapsedTextColor: kcDarkGrey,
        leading: _buildLeadingWrapper(),
        backgroundColor: kcBackgroundColor,
        shape: Border.all(color: kcTransparent),
        expandedAlignment: Alignment.centerLeft,
        collapsedBackgroundColor: kcBackgroundColor,
        controlAffinity: ListTileControlAffinity.trailing,
        expandedCrossAxisAlignment: CrossAxisAlignment.start,
        tilePadding: const EdgeInsets.symmetric(horizontal: 15),
        // enabled: status != ProgressStatuses.pending,
        // showTrailingIcon: status != ProgressStatuses.pending ? true : false,
        //initiallyExpanded: status == ProgressStatuses.started ? true : false,
        children:
            _buildExpansionTileChildren(context: context, viewModel: viewModel),
      );

  Widget _buildTitle() => Text(
        module?.name ?? '',
        maxLines: 1,
        softWrap: false,
        style: style16P600,
        overflow: TextOverflow.ellipsis,
      );

  Widget _buildLeadingWrapper() => CircleAvatar(
        backgroundColor: kcVeryLightGrey.withValues(alpha: 0.5),
        child: _buildLeading(),
      );

  Widget _buildLeading() => const Icon(
        Icons.book,
        color: kcLightGrey,
      );

  Widget _buildSubtitle() => Text(
        '0% completed',
        style: style14DG500,
      );

  List<Widget> _buildExpansionTileChildren(
          {required BuildContext context,
          required CourseModuleViewModel viewModel}) =>
      [_buildExpansionTileItem(context: context, viewModel: viewModel)];

  Widget _buildExpansionTileItem(
          {required BuildContext context,
          required CourseModuleViewModel viewModel}) =>
      Column(
        mainAxisSize: MainAxisSize.min,
        crossAxisAlignment: CrossAxisAlignment.start,
        children: _buildExpansionTileItemChildren(
            context: context, viewModel: viewModel),
      );

  List<Widget> _buildExpansionTileItemChildren(
          {required BuildContext context,
          required CourseModuleViewModel viewModel}) =>
      [
        _buildProgressRowWrapper(),
        verticalSpaceSmall,
        _buildActionButtonWrapper(context: context, viewModel: viewModel),
        verticalSpaceMedium,
        _buildCourseModules(viewModel)
      ];

  Widget _buildProgressRowWrapper() => Padding(
        padding: const EdgeInsets.only(left: 75, right: 15),
        child: _buildProgressRow(),
      );

  Widget _buildProgressRow() => Row(
        mainAxisSize: MainAxisSize.min,
        children: _buildProgressChildren(),
      );

  List<Widget> _buildProgressChildren() =>
      [_buildProgressStatusWrapper(), horizontalSpaceSmall, _buildProgress()];

  Widget _buildProgressStatusWrapper() => Expanded(
        child: _buildProgressStatus(),
      );

  Widget _buildProgressStatus() => const CustomLinearProgressIndicator(
      progress: 0,
      activeColor: kcPrimaryColor,
      backgroundColor: kcVeryLightGrey);

  Widget _buildProgress() => const Text(
        '0/0',
        style: TextStyle(color: kcDarkGrey),
      );

  Widget _buildActionButtonWrapper(
          {required BuildContext context,
          required CourseModuleViewModel viewModel}) =>
      Container(
        width: 175,
        height: 40,
        margin: const EdgeInsets.only(left: 75, right: 15),
        child: _buildContinueButton(viewModel),
      );

  Widget _buildContinueButton(CourseModuleViewModel viewModel) =>
      CustomElevatedButton(
        height: 15,
        borderRadius: 12,
        onTap: onContinueTap,
        text: 'Continue Module',
        foregroundColor: kcWhite,
        backgroundColor: kcPrimaryColor,
      );

  Widget _buildSheet(CourseModuleViewModel viewModel) => FinishPracticeSheet(
        onTap: viewModel.pop,
      );

  Widget _buildCourseModules(CourseModuleViewModel viewModel) =>
      ListView.builder(
        shrinkWrap: true,
        itemCount: lessons.length,
        physics: const NeverScrollableScrollPhysics(),
        itemBuilder: (context, index) => _buildCourseModuleCard(
            lesson: lessons[index],
            onVideoTap: () async =>
                await viewModel.navigateToCourseLessonDetail(lessons[index]),
            onPracticeTap: () {}),
      );

  Widget _buildCourseModuleCard({
    required CourseLesson lesson,
    required GestureTapCallback onVideoTap,
    required GestureTapCallback onPracticeTap,
  }) =>
      CourseLessonTile(
        lesson: lesson,
        onVideoTap: onVideoTap,
        onPracticeTap: onPracticeTap,
      );
}