import 'package:flutter/material.dart';

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

  @override
  State<ProductDetails1> createState() => _ProductDetails1State();
}

class _ProductDetails1State extends State<ProductDetails1> {

  int _currentIndex=0;
  List _productImage =[
    'assets/products/1.webp',
    'assets/products/2.webp',
    'assets/products/3.webp',
    'assets/products/4.webp',
  ];
  @override
  Widget build(BuildContext context) {
    Size screenSize=MediaQuery.of(context).size;
    const myColor=Colors.indigo;
    return Scaffold(
      appBar: AppBar(
          backgroundColor: myColor,
          title: const Text('Product Details')),
      body: SingleChildScrollView(
          child: Column(
            crossAxisAlignment: CrossAxisAlignment.start,
            children: [
              Stack(
                children: [
                  SizedBox(
                    height: 300,
                    child: PageView.builder(
                      itemCount: _productImage.length,
                        onPageChanged: (index){
                          setState(() {
                            _currentIndex=index;
                          });
                        },
                        itemBuilder: (context, index){
                          return Container(
                            height: 300,
                            width: screenSize.width,
                            child: Image(image: AssetImage('${_productImage[index]}'),fit: BoxFit.cover,)
                          );
                        }),
                  ),
                  Padding(
                    padding:  EdgeInsets.only(top: screenSize.height*.32),
                    child: Row(
                      mainAxisAlignment: MainAxisAlignment.center,
                      children: [
                        for(var i=0; i<_productImage.length; i++)
                          Padding(
                            padding: const EdgeInsets.all(8.0),
                            child: AnimatedContainer(
                              duration: const Duration(milliseconds: 200),
                              height: _currentIndex==i? 10:8,
                              width:  _currentIndex==i? 22:8,
                              decoration:   BoxDecoration(
                                  borderRadius: BorderRadius.circular(10),
                                  color: _currentIndex==i? myColor: Colors.white70,
                                  boxShadow: _currentIndex==i?const [BoxShadow(
                                    blurRadius: 1,
                                    color: myColor,
                                    spreadRadius: 1,
                                  )
                                  ]:const [BoxShadow(
                                    blurRadius: 1,
                                    color: Colors.grey,
                                    spreadRadius: 1,
                                  )
                                  ],
                              ),
                            ),
                          )
                      ],),
                  ),
                ],
              ),
              Row(
                mainAxisAlignment: MainAxisAlignment.spaceAround,
                children: [
                  SizedBox(
                    width: screenSize.width*.5,
                      child: const Text('High Quality Men Runnig Shoe',style: TextStyle(fontSize: 18,fontWeight: FontWeight.bold),)),
                  const Text('\$123',style: TextStyle(fontSize: 20),)
                ],
              ),
              Padding(
                padding: const EdgeInsets.only(left: 20.0,top: 20,right: 20),
                child: Column(
                  crossAxisAlignment: CrossAxisAlignment.start,
                  children: [
                    const Text('Available Size',style: TextStyle(fontSize: 18),),
                    const SizedBox(height: 15,),
                    Row(
                      mainAxisAlignment: MainAxisAlignment.spaceAround,
                      children: [
                        Container(
                            padding: const EdgeInsets.symmetric(vertical: 10,horizontal: 25),
                          decoration: BoxDecoration(
                            color: myColor,
                            borderRadius: BorderRadius.circular(20),
                          ),
                          child: const Text('UK7'),
                        ),
                        Container(
                          padding: const EdgeInsets.symmetric(vertical: 10,horizontal: 25),
                          decoration: BoxDecoration(
                            color: myColor,
                            borderRadius: BorderRadius.circular(20),
                          ),
                          child: const Text('UK8'),
                        ),
                        Container(
                          padding: const EdgeInsets.symmetric(vertical: 10,horizontal: 25),
                          decoration: BoxDecoration(
                            color: myColor,
                            borderRadius: BorderRadius.circular(20),
                          ),
                          child: const Text('UK9'),
                        ),
                        Container(
                          padding: const EdgeInsets.symmetric(vertical: 10,horizontal: 25),
                          decoration: BoxDecoration(
                            color: myColor,
                            borderRadius: BorderRadius.circular(20),
                          ),
                          child: const Text('UK10'),
                        ),
                      ],
                    ),
                    const SizedBox(height: 15,),
                    const Text('Description:',style: TextStyle(fontSize: 16,fontWeight: FontWeight.bold),),
                    const SizedBox(height: 10,),
                    const Text('A comfy, all-time classic made in part with recycled materials.',style: TextStyle(fontSize: 25),),
                    const SizedBox(height: 15,),
                    const Text('If you could only have one pair of sneakers, '
                        'this could be them. These adidas Grand Court '
                        'shoes with the classic 3-Stripes keep your sneaker '
                        'game sharp and clean. Cloudfoam Comfort cushioning '
                        'keeps the insides soft and pillowy. Pair them with'
                        ' any of your favourite pants because these will take'
                        ' you anywhere and everywhere. Made with a series'
                        ' of recycled materials, this upper features at '
                        'least 50% recycled content. This product represents'
                        'just one of our solutions to help end plastic waste.',
                      style: TextStyle(fontSize: 16),),
                    const SizedBox(height: 15,),
                    const Text('Details:',style: TextStyle(fontSize: 16,fontWeight: FontWeight.bold),),
                    const SizedBox(height: 10,),
                    const Padding(
                      padding: EdgeInsets.only(left: 30.0),
                      child: Column(
                        crossAxisAlignment: CrossAxisAlignment.start,
                        children: [
                          Text('* Regular Fit'),
                          Text('* Lace closure'),
                          Text('* Synthetic leather upper'),
                          Text('* Cloudfoam Comfort sockliner'),
                          Text('* Textile lining'),
                          Text('* Rubber outsole'),
                          Text('* Upper contains a minimum of 50% recycled content'),
                        ],
                      ),
                    ),
                    SizedBox(height: 20,)


                  ],
                ),
              ),

            ],
          ),
        ),
      bottomNavigationBar: Container(
        alignment: Alignment.center,
        height: 50,
        decoration: BoxDecoration(
          color: myColor,
            borderRadius: BorderRadius.only(topLeft: Radius.circular(20),topRight: Radius.circular(20))),
        child: const Text('Add to Cart',style: TextStyle(
          color: Colors.white,fontSize: 30,fontWeight: FontWeight.bold
        ),),
      ),
    );
  }
}