import 'package:flutter/material.dart';
import 'package:test_sa/views/app_style/sizing.dart';
import 'package:test_sa/views/widgets/loaders/image_loader.dart';

class ImagesViewer extends StatelessWidget {
  final List<String> images;
  final int initialIndex;
  const ImagesViewer({
    Key key,
    this.images,
    this.initialIndex = 0,
  }) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: DefaultTabController(
        length: images.length,
        initialIndex: initialIndex,
        child: SafeArea(
          child: Column(
            children: [
              images.length == 1 ? SizedBox.shrink() :
              Column(
                children: [
                  SizedBox(height: 8 * AppStyle.getScaleFactor(context),),
                  TabBar(
                    isScrollable: images.length * 84 > MediaQuery.of(context).size.width,
                    indicator: BoxDecoration(
                      color: Theme.of(context).primaryColor,
                      borderRadius: BorderRadius.only(
                        topRight: Radius.circular(24 * AppStyle.getScaleFactor(context)),
                        bottomLeft: Radius.circular(24 * AppStyle.getScaleFactor(context)),
                      ),
                    ),
                    indicatorSize: TabBarIndicatorSize.label,
                    tabs: images.map(
                            (imagePath) => InteractiveViewer(
                          child: Container(
                            height: 60,
                            width: 80,
                            padding: EdgeInsets.all(AppStyle.getScaleFactor(context),),
                            child: ClipRRect(
                              borderRadius: BorderRadius.only(
                                topRight: Radius.circular(22 * AppStyle.getScaleFactor(context)),
                                bottomLeft: Radius.circular(22 * AppStyle.getScaleFactor(context)),
                              ),
                              child: ImageLoader(
                                url: imagePath,
                                boxFit: BoxFit.cover,
                              ),
                            ),
                          ),
                        )
                    ).toList(),
                  ),
                  SizedBox(height: 8 * AppStyle.getScaleFactor(context),),
                ],
              ),
              Expanded(
                child: TabBarView(
                  children: images.map(
                          (imagePath) => InteractiveViewer(
                        child: ImageLoader(
                          url: imagePath,
                          boxFit: BoxFit.contain,
                        ),
                      )
                  ).toList(),
                ),
              ),
            ],
          ),
        ),
      ),
    );
  }
}