import 'package:didvan/constants/app_icons.dart';
import 'package:didvan/models/view/action_sheet_data.dart';
import 'package:didvan/utils/action_sheet.dart';
import 'package:didvan/views/home/studio/studio_state.dart';
import 'package:didvan/views/home/studio/widgets/slider.dart';
import 'package:didvan/views/home/studio/widgets/tab_bar.dart';
import 'package:didvan/views/home/widgets/logo_app_bar.dart';
import 'package:didvan/views/home/widgets/search_field.dart';
import 'package:didvan/views/widgets/didvan/divider.dart';
import 'package:didvan/views/widgets/didvan/icon_button.dart';
import 'package:didvan/views/widgets/didvan/radial_button.dart';
import 'package:didvan/views/widgets/item_title.dart';
import 'package:didvan/views/widgets/state_handlers/sliver_state_handler.dart';
import 'package:flutter/material.dart';
import 'package:provider/provider.dart';

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

  @override
  State<Studio> createState() => _StudioState();
}

class _StudioState extends State<Studio> {
  final FocusNode _focusNode = FocusNode();

  @override
  Widget build(BuildContext context) {
    return CustomScrollView(
      slivers: [
        SliverToBoxAdapter(
          child: Row(
            children: [
              const Expanded(child: LogoAppBar(type: 'studio')),
              Padding(
                padding:
                    EdgeInsets.only(top: MediaQuery.of(context).padding.top),
                child: DidvanIconButton(
                  icon: DidvanIcons.bookmark_regular,
                  onPressed: () {},
                ),
              ),
            ],
          ),
        ),
        const SliverToBoxAdapter(
          child: StudioTabBar(),
        ),
        SliverToBoxAdapter(
          child: Padding(
            padding: const EdgeInsets.all(16.0),
            child: SearchField(
              title: 'جستجو در استودیو',
              onChanged: (value) {},
              focusNode: _focusNode,
            ),
          ),
        ),
        const SliverToBoxAdapter(
          child: StudioSlider(),
        ),
        const SliverPadding(
          padding: EdgeInsets.symmetric(horizontal: 16),
          sliver: SliverToBoxAdapter(
            child: DidvanDivider(
              verticalPadding: 0,
            ),
          ),
        ),
        SliverPadding(
          padding: const EdgeInsets.symmetric(horizontal: 16),
          sliver: SliverToBoxAdapter(
            child: Row(
              mainAxisAlignment: MainAxisAlignment.spaceBetween,
              children: [
                const ItemTitle(title: 'تازه‌ترین‌ها'),
                DidvanIconButton(
                  gestureSize: 36,
                  icon: DidvanIcons.sort_regular,
                  onPressed: _showSortDialog,
                ),
              ],
            ),
          ),
        ),
        Consumer<StudioState>(
          builder: (context, state, child) => SliverStateHandler<StudioState>(
            state: state,
            builder: (context, state, index) => Container(),
            childCount: state.studios.length,
            onRetry: () {},
          ),
        ),
      ],
    );
  }

  void _showSortDialog() {
    final state = context.read<StudioState>();
    ActionSheetUtils.showBottomSheet(
      data: ActionSheetData(
        content: StatefulBuilder(
          builder: (context, setState) => Column(
            children: [
              DidvanRadialButton(
                title: 'جدیدترین‌ها',
                onSelected: () => setState(
                  () => state.selectedSortTypeIndex = 0,
                ),
                value: state.selectedSortTypeIndex == 0,
              ),
              const SizedBox(height: 24),
              DidvanRadialButton(
                title: 'پربازدیدترین‌ها',
                onSelected: () => setState(
                  () => state.selectedSortTypeIndex = 1,
                ),
                value: state.selectedSortTypeIndex == 1,
              ),
              const SizedBox(height: 24),
              DidvanRadialButton(
                title: 'پربحث‌ترین‌ها',
                onSelected: () => setState(
                  () => state.selectedSortTypeIndex = 2,
                ),
                value: state.selectedSortTypeIndex == 2,
              ),
            ],
          ),
        ),
        title: 'مرتب‌‌سازی',
        titleIcon: DidvanIcons.sort_regular,
        hasDismissButton: false,
        confrimTitle: 'مرتب سازی',
        onConfirmed: () {},
      ),
    );
  }
}