import 'package:carousel_slider/carousel_slider.dart';
import 'package:didvan/widgets/didvan/card.dart';
import 'package:didvan/widgets/didvan/text.dart';
import 'package:didvan/widgets/skeleton_image.dart';
import 'package:flutter/material.dart';

class DidvanPageView extends StatefulWidget {
  final List items;
  final int initialIndex;
  final ScrollController? scrollController;
  final void Function(int index) onPageChanged;
  const DidvanPageView({
    Key? key,
    required this.initialIndex,
    required this.items,
    this.scrollController,
    required this.onPageChanged,
  }) : super(key: key);

  @override
  State<DidvanPageView> createState() => _DidvanPageViewState();
}

class _DidvanPageViewState extends State<DidvanPageView> {
  @override
  Widget build(BuildContext context) {
    final double deviceTopPadding = MediaQuery.of(context).padding.top;
    return Directionality(
      textDirection: TextDirection.ltr,
      child: CarouselSlider.builder(
        itemCount: widget.items.length,
        options: CarouselOptions(
          onPageChanged: (index, reason) => widget.onPageChanged(index),
          height: double.infinity,
          initialPage: widget.initialIndex,
          viewportFraction: 0.94,
          enableInfiniteScroll: false,
        ),
        itemBuilder: (context, index, realIndex) => SizedBox(
          height: MediaQuery.of(context).size.height,
          child: SingleChildScrollView(
            controller: index == 1 ? widget.scrollController : null,
            physics: const BouncingScrollPhysics(),
            padding: EdgeInsets.only(
              left: 4,
              right: 4,
              top: 16 + deviceTopPadding,
              bottom: 92,
            ),
            child: DidvanCard(
              padding: EdgeInsets.zero,
              enableBorder: false,
              child: Builder(
                builder: (context) {
                  final item = widget.items[index];
                  if (item == null) {
                    return const SizedBox();
                  }
                  return Column(
                    crossAxisAlignment: CrossAxisAlignment.start,
                    children: [
                      SkeletonImage(
                        imageUrl: item.image,
                        aspectRatio: 16 / 9,
                      ),
                      const SizedBox(height: 20),
                      for (var i = 0; i < item.contents.length; i++)
                        Padding(
                          padding: const EdgeInsets.symmetric(
                            horizontal: 16,
                            vertical: 4,
                          ),
                          child: Builder(
                            builder: (context) {
                              final content = item.contents[i];
                              if (content.text != null) {
                                return DidvanText(
                                  item.contents[i].text!,
                                );
                              }
                              if (content.image != null) {
                                return SkeletonImage(
                                  imageUrl: content.image!,
                                  aspectRatio: 16 / 9,
                                );
                              }
                              return const SizedBox();
                            },
                          ),
                        ),
                      const SizedBox(height: 20),
                    ],
                  );
                },
              ),
            ),
          ),
        ),
      ),
    );
  }
}