import 'dart:ffi';

import 'package:car_for_her/config/palette.dart';
import 'package:car_for_her/models/Client/credit_cards.dart';
import 'package:car_for_her/widgets/client%20widgets/credit%20cards%20widgets/cc_dots.dart';
import 'package:car_for_her/widgets/client%20widgets/credit%20cards%20widgets/cc_slider.dart';
import 'package:flutter/material.dart';
import 'package:flutter_svg/flutter_svg.dart';

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

  @override
  _CreditCardState createState() => _CreditCardState();
}

class _CreditCardState extends State<CreditCard> {
  int _currentPage = 0;

  final PageController _pageController = PageController(initialPage: 0);

  _onPageChange(int index) {
    setState(() {
      _currentPage = index;

      _pageController.animateToPage(_currentPage,
          duration: Duration(milliseconds: 300), curve: Curves.ease);
    });
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      resizeToAvoidBottomInset: false,
      body: Padding(
        padding: const EdgeInsets.only(left: 20, right: 20),
        child: Column(
          children: [
            Padding(
              padding: const EdgeInsets.only(top: 60.0),
              child: Row(
                mainAxisAlignment: MainAxisAlignment.start,
                children: [
                  IconButton(
                      icon: SvgPicture.asset('assets/icons/left_arrow.svg'),
                      onPressed: () {
                        Navigator.pop(context);
                      }),
                  SizedBox(
                    width: 10,
                  ),
                  Text("Total Price",
                      style: TextStyle(
                          fontFamily: 'MontHeavy',
                          fontWeight: FontWeight.bold,
                          fontSize: 31)),
                ],
              ),
            ),
            SizedBox(
              height: 20,
            ),
            Row(
              children: [
                Text("00,0KM",
                    style: TextStyle(
                        fontFamily: 'MontHeavy',
                        fontWeight: FontWeight.bold,
                        fontSize: 28,
                        color: Palette.primary)),
                SizedBox(
                  width: 40,
                ),
                Text("\$000",
                    style: TextStyle(
                        fontFamily: 'MontHeavy',
                        fontWeight: FontWeight.bold,
                        fontSize: 28,
                        color: Palette.primary)),
              ],
            ),
            SizedBox(
              height: 40,
            ),
            Row(
              children: [
                Text("Choose your card",
                    style: TextStyle(
                        fontFamily: 'MontHeavy',
                        fontWeight: FontWeight.bold,
                        fontSize: 25)),
              ],
            ),
            SizedBox(
              height: 40,
            ),
            Container(
              width: 250,
              height: 150,
              child: PageView.builder(
                physics: BouncingScrollPhysics(),
                onPageChanged: _onPageChange,
                itemCount: creditCardList.length,
                itemBuilder: (context, i) => Padding(
                  padding: const EdgeInsets.only(left: 8.0, right: 8.0),
                  child: CreditCardSlider(i),
                ),
                controller: _pageController,
              ),
            ),
            SizedBox(
              height: 20,
            ),
            Padding(
              padding: EdgeInsets.symmetric(vertical: 10),
              child: Row(
                mainAxisAlignment: MainAxisAlignment.center,
                children: [
                  for (int i = 0; i < creditCardList.length; i++)
                    if (i == _currentPage)
                      CreditCardsDots(true)
                    else
                      CreditCardsDots(false)
                ],
              ),
            ),
            SizedBox(
              height: 20,
            ),
            Row(
              children: [
                Text(
                  "CARD NUMBER",
                  style: TextStyle(
                    fontFamily: 'MontHeavy',
                    fontSize: 14,
                  ),
                ),
                SizedBox(
                  width: 50,
                ),
                Text(
                  "CARD HOLDER",
                  style: TextStyle(
                    fontFamily: 'MontHeavy',
                    fontSize: 14,
                  ),
                ),
              ],
            ),
            SizedBox(
              height: 10,
            ),
            Form(
                child: Column(
              children: [
                Row(
                  children: [
                    creditCardTextField(150),
                    SizedBox(
                      width: 10,
                    ),
                    creditCardTextField(150),
                  ],
                ),
                SizedBox(
                  height: 15,
                ),
                Row(
                  children: [
                    Text(
                      "EXPIRED DATE",
                      style: TextStyle(
                        fontFamily: 'MontHeavy',
                        fontSize: 14,
                      ),
                    ),
                    SizedBox(
                      width: 50,
                    ),
                    Text(
                      "CVV",
                      style: TextStyle(
                        fontFamily: 'MontHeavy',
                        fontSize: 14,
                      ),
                    ),
                  ],
                ),
                Row(
                  children: [
                    creditCardTextField(70),
                    SizedBox(
                      width: 10,
                    ),
                    creditCardTextField(70),
                    SizedBox(
                      width: 10,
                    ),
                    creditCardTextField(70),
                  ],
                ),
              ],
            )),
            SizedBox(
              height: 25,
            ),
            Container(
              height: 40,
              width: 120,
              decoration: BoxDecoration(color: Palette.primary),
              child: Center(
                child: Text(
                  "Done",
                  textAlign: TextAlign.center,
                  style: TextStyle(
                    color: Colors.white,
                    fontSize: 18,
                    fontFamily: 'MontExtraLight',
                    fontWeight: FontWeight.bold,
                  ),
                ),
              ),
            )
          ],
        ),
      ),
    );
  }
}

Widget creditCardTextField(double width) {
  return Container(
      color: Colors.white,
      width: width,
      height: 40,
      child: TextFormField(
        cursorColor: Palette.primary,
        decoration: InputDecoration(
            contentPadding: EdgeInsets.all(8.0),
            hintText: "**** 796 9875",
            hintStyle: TextStyle(
                fontFamily: 'MontExtraLight', fontWeight: FontWeight.bold),
            focusedBorder:
                OutlineInputBorder(borderSide: BorderSide(color: Colors.grey)),
            enabledBorder:
                OutlineInputBorder(borderSide: BorderSide(color: Colors.grey))),
      ));
}