import 'dart:io';

import 'package:didvan/config/design_config.dart';
import 'package:didvan/config/theme_data.dart';
import 'package:didvan/constants/app_icons.dart';
import 'package:didvan/models/studio_details_data.dart';
import 'package:didvan/models/view/app_bar_data.dart';
import 'package:didvan/services/media/media.dart';
import 'package:didvan/views/home/studio/studio_details/studio_details_state.dart';
import 'package:didvan/views/home/widgets/audio/audio_slider.dart';
import 'package:didvan/views/home/widgets/bookmark_button.dart';
import 'package:didvan/views/widgets/didvan/icon_button.dart';
import 'package:didvan/views/widgets/didvan/scaffold.dart';
import 'package:didvan/views/widgets/didvan/text.dart';
import 'package:didvan/views/widgets/ink_wrapper.dart';
import 'package:didvan/views/widgets/skeleton_image.dart';
import 'package:didvan/views/widgets/state_handlers/state_handler.dart';
import 'package:flutter/material.dart';
import 'package:flutter/services.dart';
import 'package:provider/provider.dart';
import 'package:webview_flutter/webview_flutter.dart';

class StudioDetails extends StatefulWidget {
  final Map<String, dynamic> pageData;

  const StudioDetails({Key? key, required this.pageData}) : super(key: key);

  @override
  State<StudioDetails> createState() => _StudioDetailsState();
}

class _StudioDetailsState extends State<StudioDetails> {
  bool _isFullScreen = false;
  bool _isInit = true;

  double _dwInPortrait = 0;
  double _scaleInPortrait = 1;

  @override
  void initState() {
    final state = context.read<StudioDetailsState>();

    Future.delayed(
      Duration.zero,
      () => state.getStudioDetails(widget.pageData['id']),
    );

    state.args = widget.pageData['args'];
    if (Platform.isAndroid) WebView.platform = AndroidWebView();
    super.initState();
  }

  Future<void> _changeFullSceen(bool value) async {
    if (value) {
      await SystemChrome.setEnabledSystemUIMode(
        SystemUiMode.manual,
        overlays: [],
      );
      SystemChrome.setSystemUIOverlayStyle(
        const SystemUiOverlayStyle(
          systemNavigationBarColor: Colors.black,
        ),
      );
      await SystemChrome.setPreferredOrientations(
        [DeviceOrientation.landscapeLeft],
      );
    } else {
      await SystemChrome.setEnabledSystemUIMode(
        SystemUiMode.manual,
        overlays: [SystemUiOverlay.bottom, SystemUiOverlay.top],
      );
      await SystemChrome.setPreferredOrientations(
        [DeviceOrientation.portraitUp],
      );
      DesignConfig.updateSystemUiOverlayStyle();
    }
    setState(() {
      _isFullScreen = value;
    });
  }

  @override
  Widget build(BuildContext context) {
    final ds = MediaQuery.of(context).size;
    if (_isInit) {
      _dwInPortrait = MediaQuery.of(context).size.width;
      _scaleInPortrait = _dwInPortrait / 576;
      _isInit = false;
    }
    return Consumer<StudioDetailsState>(
      builder: (context, state, child) => StateHandler<StudioDetailsState>(
        state: state,
        onRetry: () => state.getStudioDetails(state.currentStudio.id),
        builder: (context, state) => state.studios.isEmpty
            ? const SizedBox()
            : WillPopScope(
                onWillPop: () async {
                  if (_isFullScreen) {
                    await _changeFullSceen(false);
                    return false;
                  }
                  return true;
                },
                child: DidvanScaffold(
                  backgroundColor: Theme.of(context).colorScheme.surface,
                  padding: EdgeInsets.zero,
                  appBarData: _isFullScreen
                      ? null
                      : AppBarData(
                          isSmall: true,
                          title: state.currentStudio.title,
                        ),
                  children: [
                    SizedBox(
                      width: ds.width,
                      height: _isFullScreen ? ds.height : ds.width * 9 / 16,
                      child: Stack(
                        children: [
                          WebView(
                            initialUrl: Uri.dataFromString(
                              '''
                          <html>
                            <head>
                              <meta
                                name="viewport"
                                content="width=device-width, initial-scale=$_scaleInPortrait"
                              />
                              <style>
                                * {
                                  padding: 0;
                                  margin: 0;
                                  overflow: hidden;
                                }
                                iframe {
                                  max-height: 100vh;
                                }
                                .r1_iframe_embed {
                                  height: ${MediaQuery.of(context).size.width / _scaleInPortrait}px !important;
                                  padding-top: 0 !important;
                                }
                                @media(max-width:580px){
                                  .r1_iframe_embed {
                                    height: ${_dwInPortrait * 9 / 16 / _scaleInPortrait}px !important;
                                    padding-top: 0 !important;
                                  }
                                }
                              </style>
                            </head>
                            <body>
                              ${state.currentStudio.media}
                            </body>
                          </html>
                          ''',
                              mimeType: 'text/html',
                            ).toString(),
                            javascriptMode: JavascriptMode.unrestricted,
                          ),
                          Positioned(
                            right: 42,
                            bottom: 8,
                            child: GestureDetector(
                              onTap: () => _changeFullSceen(!_isFullScreen),
                              child: Container(
                                color: Colors.transparent,
                                width: 24,
                                height: 30,
                              ),
                            ),
                          ),
                        ],
                      ),
                    ),
                  ],
                ),
              ),
      ),
    );
  }
}