import 'package:car_for_her/config/palette.dart';
import 'package:flutter/material.dart';
import 'package:flutter_svg/flutter_svg.dart';
import 'package:syncfusion_flutter_datepicker/datepicker.dart';
import 'package:flutter_time_picker_spinner/flutter_time_picker_spinner.dart';

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

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

class _TripDateState extends State<TripDate> {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      backgroundColor: Color(0xffF0F9FA),
      body: Column(
        children: [
          Padding(
            padding: const EdgeInsets.only(top: 60.0, left: 20),
            child: Row(
              mainAxisAlignment: MainAxisAlignment.start,
              children: [
                IconButton(
                    icon: SvgPicture.asset('assets/icons/left_arrow.svg'),
                    onPressed: () {
                      Navigator.pop(context);
                    }),
                SizedBox(
                  width: 10,
                ),
                Text("Period...",
                    style: TextStyle(
                        fontFamily: 'MontHeavy',
                        fontWeight: FontWeight.bold,
                        fontSize: 31)),
              ],
            ),
          ),
          SizedBox(
            height: 10,
          ),
          Column(
            children: [
              Container(
                width: 286,
                decoration: BoxDecoration(
                    color: Colors.white,
                    borderRadius: BorderRadius.only(
                        topLeft: Radius.circular(20),
                        topRight: Radius.circular(20))),
                child: Column(
                  children: [
                    Padding(
                      padding: const EdgeInsets.fromLTRB(8, 20, 0, 0),
                      child: Row(
                        mainAxisAlignment: MainAxisAlignment.start,
                        children: [
                          Text(
                            "Calandar",
                            style: TextStyle(
                                fontFamily: 'MontHeavy', fontSize: 20),
                          ),
                        ],
                      ),
                    ),
                    SizedBox(
                      height: 10,
                    ),
                    Row(
                      mainAxisAlignment: MainAxisAlignment.center,
                      children: [
                        Container(
                          decoration: BoxDecoration(
                              color: Color.fromRGBO(0, 0, 0, 0.2),
                              borderRadius: BorderRadius.circular(100)),
                          width: 260,
                          height: 1,
                        )
                      ],
                    )
                  ],
                ),
              ),
              Container(
                decoration: BoxDecoration(
                    borderRadius: BorderRadius.only(
                        bottomLeft: Radius.circular(20),
                        bottomRight: Radius.circular(20))),
                width: 286,
                height: 240,
                child: dateRangePicker(),
              ),
              Container(
                width: 286,
                height: 20,
                decoration: BoxDecoration(
                    color: Colors.white,
                    borderRadius: BorderRadius.only(
                        bottomLeft: Radius.circular(20),
                        bottomRight: Radius.circular(20))),
              )
            ],
          ),
          Row(
            mainAxisAlignment: MainAxisAlignment.start,
            children: [
              Padding(
                padding: const EdgeInsets.fromLTRB(20, 15, 0, 0),
                child: Text("Choose Time",
                    style: TextStyle(
                        fontFamily: 'MontHeavy',
                        fontWeight: FontWeight.bold,
                        fontSize: 31)),
              ),
            ],
          ),
          TimePickerSpinner(
            spacing: 10,
            normalTextStyle: TextStyle(
                fontSize: 24,
                color: Color.fromRGBO(0, 0, 0, 0.5),
                fontFamily: 'MontHeavy'),
            highlightedTextStyle: TextStyle(
                fontSize: 24, color: Colors.black, fontFamily: 'MontHeavy'),
          ),
          SizedBox(
            height: 20,
          ),
          Row(
            mainAxisAlignment: MainAxisAlignment.center,
            children: [
              GestureDetector(
                onTap: () {
                  Navigator.pop(context);
                },
                child: Container(
                  height: 40,
                  width: 120,
                  decoration: BoxDecoration(
                      color: Color(0xffF0F9FA),
                      border: Border.all(color: Colors.grey)),
                  child: Center(
                    child: Text(
                      "Cancel",
                      textAlign: TextAlign.center,
                      style: TextStyle(
                        color: Colors.black,
                        fontSize: 18,
                        fontFamily: 'MontExtraLight',
                        fontWeight: FontWeight.bold,
                      ),
                    ),
                  ),
                ),
              ),
              SizedBox(
                width: 20,
              ),
              GestureDetector(
                onTap: () {
                  Navigator.pushNamed(context, '/credit_card');
                },
                child: Container(
                  height: 40,
                  width: 120,
                  decoration: BoxDecoration(color: Palette.primary),
                  child: Center(
                    child: Text(
                      "Continue",
                      textAlign: TextAlign.center,
                      style: TextStyle(
                        color: Colors.white,
                        fontSize: 18,
                        fontFamily: 'MontExtraLight',
                        fontWeight: FontWeight.bold,
                      ),
                    ),
                  ),
                ),
              ),
            ],
          )
        ],
      ),
    );
  }

  SfDateRangePicker dateRangePicker() {
    return SfDateRangePicker(
      selectionMode: DateRangePickerSelectionMode.range,
      backgroundColor: Colors.white,
      rangeSelectionColor: Palette.primary,
      todayHighlightColor: Palette.primary,
      selectionColor: Palette.primary,
      startRangeSelectionColor: Palette.primary,
      endRangeSelectionColor: Palette.primary,
      rangeTextStyle: TextStyle(color: Colors.white),
      yearCellStyle: DateRangePickerYearCellStyle(
        todayTextStyle: TextStyle(color: Palette.primary),
      ),
      monthCellStyle: DateRangePickerMonthCellStyle(
        textStyle: TextStyle(color: Colors.black),
        todayTextStyle: TextStyle(color: Palette.primary),
      ),
      headerStyle: DateRangePickerHeaderStyle(
        textStyle: TextStyle(fontFamily: 'MontHeavy', color: Colors.black),
      ),
    );
  }
}