import 'package:annotation_management_frontend/config/routes.dart';
import 'package:annotation_management_frontend/core/utils/texts.dart';
import 'package:flutter/material.dart';
import 'package:routemaster/routemaster.dart';

class AnnotationAppBar extends StatefulWidget implements PreferredSizeWidget {
  const AnnotationAppBar({Key? key}) : super(key: key);

  @override
  State<AnnotationAppBar> createState() => _AnnotationAppBarState();

  @override
  Size get preferredSize => const Size.fromHeight(kToolbarHeight);
}

class _AnnotationAppBarState extends State<AnnotationAppBar>
    with SingleTickerProviderStateMixin {
  late TabController _controller;

  @override
  void initState() {
    super.initState();
    _controller = TabController(length: 3, vsync: this);
  }

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

  void _onAnnotationTabSelected(BuildContext context) {
    Routemaster.of(context).push(RouteNames.annotation);
  }

  void _onManagementTabSelected(BuildContext context) {
    Routemaster.of(context).push(RouteNames.management);
  }

  void _onProfileTacSelected(BuildContext context) {
    Routemaster.of(context).push(RouteNames.profile);
  }

  @override
  Widget build(BuildContext context) {
    return Container(
      decoration: BoxDecoration(
        color: Theme.of(context).appBarTheme.backgroundColor,
        border: const Border(
          bottom: BorderSide(color: Color(0xff42607C), width: 2.0),
        ),
      ),
      child: Padding(
        padding: const EdgeInsets.all(16.0),
        child: Row(
          children: [
            // TODO: replace Groke's logo here
            const Icon(Icons.home),
            const SizedBox(width: 16.0),
            Expanded(
              child: Text(
                grokeAnnotation.toUpperCase(),
                style: Theme.of(context).textTheme.titleSmall,
              ),
            ),
            SizedBox(
              width: 500,
              child: TabBar(
                controller: _controller,
                tabs: [
                  Text(annotation.toUpperCase()),
                  Text(management.toUpperCase()),
                  TextButton(
                    onPressed: () => _onProfileTacSelected(context),
                    child: Row(
                      children: const [
                        Text('Ville (admin)'),
                        Icon(Icons.keyboard_arrow_down),
                      ],
                    ),
                  ),
                ],
              ),
            ),
            TextButton(
              onPressed: () => _onAnnotationTabSelected(context),
              child: Text(annotation.toUpperCase()),
            ),
            TextButton(
              onPressed: () => _onManagementTabSelected(context),
              child: Text(management.toUpperCase()),
            ),
            TextButton(
              onPressed: () => _onProfileTacSelected(context),
              child: Row(
                children: const [
                  Text('Ville (admin)'),
                  Icon(Icons.keyboard_arrow_down),
                ],
              ),
            ),
          ],
        ),
      ),
    );
  }
}