import 'package:carousel_slider/carousel_slider.dart';
import 'package:didvan/config/design_config.dart';
import 'package:didvan/config/theme_data.dart';
import 'package:didvan/models/enums.dart';
import 'package:didvan/views/home/studio/studio_state.dart';
import 'package:didvan/views/widgets/didvan/text.dart';
import 'package:didvan/views/widgets/shimmer_placeholder.dart';
import 'package:didvan/views/widgets/skeleton_image.dart';
import 'package:flutter/material.dart';
import 'package:provider/provider.dart';

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

  @override
  State<StudioSlider> createState() => _StudioSliderState();
}

class _StudioSliderState extends State<StudioSlider> {
  int selectedIndex = 0;

  @override
  Widget build(BuildContext context) {
    final state = context.watch<StudioState>();
    return Column(
      children: [
        CarouselSlider(
          items: [
            for (var i = 0; i < state.sliders.length; i++)
              Padding(
                padding: const EdgeInsets.symmetric(horizontal: 4),
                child: state.appState == AppState.busy
                    ? const ShimmerPlaceholder()
                    : Stack(
                        children: [
                          SkeletonImage(
                            borderRadius: DesignConfig.mediumBorderRadius,
                            imageUrl: state.sliders[i].image,
                            width: double.infinity,
                          ),
                          Positioned(
                            bottom: 0,
                            left: 0,
                            right: 0,
                            child: Container(
                              padding: const EdgeInsets.symmetric(
                                vertical: 4,
                                horizontal: 8,
                              ),
                              decoration: BoxDecoration(
                                color: (state.videosSelected
                                        ? Theme.of(context)
                                            .colorScheme
                                            .secondaryDisabled
                                        : Theme.of(context).colorScheme.focused)
                                    .withOpacity(0.9),
                                borderRadius: const BorderRadius.vertical(
                                  bottom: Radius.circular(10),
                                ),
                              ),
                              child: DidvanText(
                                state.sliders[i].title,
                                color: Theme.of(context).colorScheme.title,
                                style: Theme.of(context).textTheme.caption,
                              ),
                            ),
                          ),
                        ],
                      ),
              ),
          ],
          options: CarouselOptions(
            onPageChanged: (index, reason) => setState(
              () => selectedIndex = index,
            ),
            viewportFraction: 0.94,
            aspectRatio: 16 / 9,
            autoPlay: true,
          ),
        ),
        const SizedBox(height: 16),
        Row(
          mainAxisAlignment: MainAxisAlignment.center,
          children: [
            for (var i = 0; i < state.sliders.length; i++)
              _SliderIndicator(isCurrentIndex: selectedIndex == i),
          ],
        ),
        const SizedBox(height: 16),
      ],
    );
  }
}

class _SliderIndicator extends StatelessWidget {
  final bool isCurrentIndex;
  const _SliderIndicator({Key? key, required this.isCurrentIndex})
      : super(key: key);

  @override
  Widget build(BuildContext context) {
    return AnimatedContainer(
      duration: DesignConfig.lowAnimationDuration,
      height: 8,
      width: 8,
      margin: const EdgeInsets.only(left: 4),
      decoration: BoxDecoration(
        border: Border.all(
          color: Theme.of(context).colorScheme.focusedBorder,
        ),
        shape: BoxShape.circle,
        color:
            isCurrentIndex ? Theme.of(context).colorScheme.focusedBorder : null,
      ),
    );
  }
}