import 'package:flutter/material.dart';
import 'package:table_calendar/table_calendar.dart';
import 'package:test_sa/extensions/int_extensions.dart';
import 'package:test_sa/extensions/text_extensions.dart';
import 'package:test_sa/extensions/widget_extensions.dart';
import 'package:test_sa/new_views/app_style/app_color.dart';
import 'package:test_sa/new_views/pages/land_page/calender_fragments/monthly_fragment.dart';
import 'package:test_sa/new_views/pages/land_page/calender_fragments/weekly_fragment.dart';

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

  @override
  _CalenderPageState createState() {
    return _CalenderPageState();
  }
}

class _CalenderPageState extends State<CalenderPage> {
  int selectedIndex = 0;
  DateTime currentDateTime = DateTime.now();

  PageController _pageController;

  @override
  void initState() {
    _pageController = PageController();
    super.initState();
  }

  @override
  void dispose() {
    _pageController.dispose();
    super.dispose();
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Column(
        children: [
          // todo @sikander, hiding My shift view, later when they add data, then will us it.
          Container(
            width: double.infinity,
            padding: const EdgeInsets.all(16),
            decoration: ShapeDecoration(
              color: Colors.white,
              shape: RoundedRectangleBorder(
                borderRadius: BorderRadius.circular(20),
              ),
              shadows: const [
                BoxShadow(
                  color: Color(0x07000000),
                  blurRadius: 14,
                  offset: Offset(0, 0),
                  spreadRadius: 0,
                )
              ],
            ),
            child: Column(
              crossAxisAlignment: CrossAxisAlignment.start,
              mainAxisSize: MainAxisSize.min,
              children: [
                Text(
                  'My Shift',
                  style: AppTextStyles.heading5.copyWith(color: AppColor.neutral50),
                ),
                8.height,
                Text(
                  'Sunday to Thursday',
                  style: AppTextStyles.bodyText.copyWith(color: const Color(0xFF757575)),
                ),
                Text(
                  '09:00 to 18:00',
                  style: AppTextStyles.bodyText.copyWith(color: AppColor.neutral50),
                ),
              ],
            ),
          ),

          Container(
            width: double.infinity,
            padding: const EdgeInsets.all(4),
            decoration: ShapeDecoration(
              color: const Color(0xFFEAF1F4),
              shape: RoundedRectangleBorder(
                borderRadius: BorderRadius.circular(16),
              ),
              shadows: const [
                BoxShadow(
                  color: Color(0x07000000),
                  blurRadius: 14,
                  offset: Offset(0, 0),
                  spreadRadius: 0,
                )
              ],
            ),
            child: Row(
              children: [
                tabItem("Monthly", 0, selectedIndex, () => onTabPress(0)),
                tabItem("Weekly", 1, selectedIndex, () => onTabPress(1)),
                tabItem("Daily", 2, selectedIndex, () => onTabPress(2)),
              ],
            ),
          ),
          8.height,
          PageView(
            controller: _pageController,
            onPageChanged: (index) => onTabPress(index),
            children: [
              MonthlyFragment(),
              WeeklyFragment(),
              Container(),
            ],
          ).expanded,
        ],
      ),
    );
  }

  void onTabPress(index) {
    if (selectedIndex != index) {
      setState(() {
        selectedIndex = index;
      });
      _pageController.jumpToPage(index);
    }
  }

  Widget tabItem(String title, int index, int selectedIndex, VoidCallback onPress) {
    return Container(
        alignment: Alignment.center,
        padding: const EdgeInsets.only(top: 14, bottom: 14),
        decoration: ShapeDecoration(
          color: index == selectedIndex ? Colors.white : Colors.transparent,
          shape: RoundedRectangleBorder(
            borderRadius: BorderRadius.circular(13),
          ),
        ),
        child: Text(
          title,
          style: AppTextStyles.bodyText.copyWith(color: index == selectedIndex ? AppColor.neutral60 : const Color(0xFF757575)),
        )).onPress(onPress).expanded;
  }
}