import 'package:didvan/config/theme_data.dart';
import 'package:didvan/constants/app_icons.dart';
import 'package:didvan/views/home/studio/studio_details/studio_details_state.dart';
import 'package:didvan/views/widgets/didvan/text.dart';
import 'package:didvan/views/widgets/state_handlers/state_handler.dart';
import 'package:flutter/material.dart';
import 'package:provider/provider.dart';

class StudioDetailsWidget extends StatelessWidget {
  const StudioDetailsWidget({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return Consumer<StudioDetailsState>(
      builder: (context, state, child) => StateHandler<StudioDetailsState>(
        onRetry: () {},
        state: state,
        builder: (context, state) => Container(
          color: Theme.of(context).colorScheme.surface,
          child: Column(
            children: [
              Row(
                mainAxisAlignment: MainAxisAlignment.spaceAround,
                children: [
                  _TabItem(
                    icon: DidvanIcons.description_solid,
                    title: 'توضیحات',
                    onTap: () => state.selectedDetailsIndex = 0,
                    isSelected: state.selectedDetailsIndex == 0,
                  ),
                  _TabItem(
                    icon: DidvanIcons.chats_solid,
                    title: 'نظرات',
                    onTap: () => state.selectedDetailsIndex = 1,
                    isSelected: state.selectedDetailsIndex == 1,
                  ),
                  _TabItem(
                    icon: DidvanIcons.puzzle_solid,
                    title: 'مطالب مرتبط',
                    onTap: () => state.selectedDetailsIndex = 2,
                    isSelected: state.selectedDetailsIndex == 2,
                  ),
                ],
              ),
              const SizedBox(height: 16),
            ],
          ),
        ),
      ),
    );
  }
}

class _TabItem extends StatelessWidget {
  final IconData icon;
  final String title;
  final VoidCallback onTap;
  final bool isSelected;
  const _TabItem({
    Key? key,
    required this.icon,
    required this.title,
    required this.onTap,
    required this.isSelected,
  }) : super(key: key);

  Color? _color(context) =>
      isSelected ? Theme.of(context).colorScheme.focusedBorder : null;

  @override
  Widget build(BuildContext context) {
    return GestureDetector(
      onTap: onTap,
      child: Container(
        color: Colors.transparent,
        child: Column(
          children: [
            Icon(
              icon,
              color: _color(context),
            ),
            Container(
              width: 64,
              height: 1,
              color: _color(context),
            ),
            DidvanText(
              title,
              color: _color(context),
              style: Theme.of(context).textTheme.caption,
            )
          ],
        ),
      ),
    );
  }
}