import 'package:PiliPlus/common/widgets/loading_widget/http_error.dart';
import 'package:PiliPlus/http/fav.dart';
import 'package:PiliPlus/http/msg.dart';
import 'package:PiliPlus/models_new/fav/fav_folder/list.dart';
import 'package:PiliPlus/utils/fav_util.dart';
import 'package:PiliPlus/utils/image_util.dart';
import 'package:cached_network_image/cached_network_image.dart';
import 'package:easy_debounce/easy_throttle.dart';
import 'package:flutter/material.dart';
import 'package:flutter/services.dart' show LengthLimitingTextInputFormatter;
import 'package:flutter_smart_dialog/flutter_smart_dialog.dart';
import 'package:get/get.dart';
import 'package:image_cropper/image_cropper.dart';
import 'package:image_picker/image_picker.dart';

class CreateFavPage extends StatefulWidget {
  const CreateFavPage({super.key});

  @override
  State<CreateFavPage> createState() => _CreateFavPageState();
}

class _CreateFavPageState extends State<CreateFavPage> {
  dynamic _mediaId;
  late final _titleController = TextEditingController();
  late final _introController = TextEditingController();
  String? _cover;
  bool _isPublic = true;
  late final _imagePicker = ImagePicker();
  String? _errMsg;
  int? _attr;

  @override
  void initState() {
    super.initState();
    _mediaId = Get.parameters['mediaId'];
    if (_mediaId != null) {
      _getFolderInfo();
    }
  }

  void _getFolderInfo() {
    _errMsg = null;
    FavHttp.favFolderInfo(mediaId: _mediaId).then((res) {
      if (res['status']) {
        FavFolderInfo data = res['data'];
        _titleController.text = data.title;
        _introController.text = data.intro ?? '';
        _isPublic = FavUtil.isPublicFav(data.attr);
        _cover = data.cover;
        _attr = data.attr;
      } else {
        _errMsg = res['msg'];
      }
      setState(() {});
    });
  }

  @override
  void dispose() {
    _titleController.dispose();
    _introController.dispose();
    super.dispose();
  }

  @override
  Widget build(BuildContext context) {
    final theme = Theme.of(context);
    return Scaffold(
      appBar: AppBar(
        title: Text(_mediaId != null ? '编辑' : '创建'),
        actions: [
          TextButton(
            onPressed: () {
              if (_titleController.text.isEmpty) {
                SmartDialog.showToast('名称不能为空');
                return;
              }
              FavHttp.addOrEditFolder(
                isAdd: _mediaId == null,
                mediaId: _mediaId,
                title: _titleController.text,
                privacy: _isPublic ? 0 : 1,
                cover: _cover ?? '',
                intro: _introController.text,
              ).then((res) {
                if (res['status']) {
                  Get.back(result: res['data']);
                  SmartDialog.showToast('${_mediaId != null ? '编辑' : '创建'}成功');
                } else {
                  SmartDialog.showToast(res['msg']);
                }
              });
            },
            child: const Text('完成'),
          ),
          const SizedBox(width: 16),
        ],
      ),
      body: _mediaId != null
          ? _titleController.text.isNotEmpty
                ? _buildBody(theme)
                : _errMsg?.isNotEmpty == true
                ? Center(
                    child: CustomScrollView(
                      shrinkWrap: true,
                      slivers: [
                        HttpError(
                          errMsg: _errMsg,
                          onReload: _getFolderInfo,
                        ),
                      ],
                    ),
                  )
                : const Center(child: CircularProgressIndicator())
          : _buildBody(theme),
    );
  }

  Future<void> _pickImg(BuildContext context, ThemeData theme) async {
    try {
      XFile? pickedFile = await _imagePicker.pickImage(
        source: ImageSource.gallery,
        imageQuality: 100,
      );
      if (pickedFile != null && mounted) {
        CroppedFile? croppedFile = await ImageCropper().cropImage(
          sourcePath: pickedFile.path,
          uiSettings: [
            AndroidUiSettings(
              toolbarTitle: '裁剪',
              toolbarColor: theme.colorScheme.secondaryContainer,
              toolbarWidgetColor: theme.colorScheme.onSecondaryContainer,
              aspectRatioPresets: [
                CropAspectRatioPreset.ratio16x9,
              ],
              lockAspectRatio: true,
              hideBottomControls: true,
              initAspectRatio: CropAspectRatioPreset.ratio16x9,
            ),
            IOSUiSettings(
              title: '裁剪',
              aspectRatioPresets: [
                CropAspectRatioPreset.ratio16x9,
              ],
              aspectRatioLockEnabled: true,
              resetAspectRatioEnabled: false,
              aspectRatioPickerButtonHidden: true,
            ),
          ],
        );
        if (croppedFile != null) {
          MsgHttp.uploadImage(
            path: croppedFile.path,
            bucket: 'medialist',
            dir: 'cover',
          ).then((res) {
            if (context.mounted) {
              if (res['status']) {
                _cover = res['data']['location'];
                (context as Element).markNeedsBuild();
              } else {
                SmartDialog.showToast(res['msg']);
              }
            }
          });
        }
      }
    } catch (e) {
      SmartDialog.showToast(e.toString());
    }
  }

  final leadingStyle = const TextStyle(fontSize: 14);

  Widget _buildBody(ThemeData theme) => SingleChildScrollView(
    child: Column(
      children: [
        if (_attr == null || !FavUtil.isDefaultFav(_attr!)) ...[
          Builder(
            builder: (context) {
              return ListTile(
                tileColor: theme.colorScheme.onInverseSurface,
                onTap: () {
                  EasyThrottle.throttle(
                    'imagePicker',
                    const Duration(milliseconds: 500),
                    () {
                      if (_cover?.isNotEmpty == true) {
                        showDialog(
                          context: context,
                          builder: (_) {
                            return AlertDialog(
                              clipBehavior: Clip.hardEdge,
                              contentPadding: const EdgeInsets.fromLTRB(
                                0,
                                12,
                                0,
                                12,
                              ),
                              content: Column(
                                mainAxisSize: MainAxisSize.min,
                                children: [
                                  ListTile(
                                    dense: true,
                                    onTap: () {
                                      Get.back();
                                      _pickImg(context, theme);
                                    },
                                    title: const Text(
                                      '替换封面',
                                      style: TextStyle(fontSize: 14),
                                    ),
                                  ),
                                  ListTile(
                                    dense: true,
                                    onTap: () {
                                      Get.back();
                                      _cover = null;
                                      (context as Element).markNeedsBuild();
                                    },
                                    title: const Text(
                                      '移除封面',
                                      style: TextStyle(fontSize: 14),
                                    ),
                                  ),
                                ],
                              ),
                            );
                          },
                        );
                      } else {
                        _pickImg(context, theme);
                      }
                    },
                  );
                },
                leading: Text(
                  '封面',
                  style: leadingStyle,
                ),
                trailing: Row(
                  spacing: 10,
                  mainAxisSize: MainAxisSize.min,
                  children: [
                    if (_cover?.isNotEmpty == true)
                      Padding(
                        padding: const EdgeInsets.symmetric(vertical: 5),
                        child: LayoutBuilder(
                          builder: (context, constraints) {
                            return ClipRRect(
                              borderRadius: const BorderRadius.all(
                                Radius.circular(6),
                              ),
                              child: CachedNetworkImage(
                                imageUrl: ImageUtil.thumbnailUrl(_cover!),
                                height: constraints.maxHeight,
                                width: constraints.maxHeight * 16 / 9,
                                fit: BoxFit.cover,
                              ),
                            );
                          },
                        ),
                      ),
                    Icon(
                      Icons.keyboard_arrow_right,
                      color: theme.colorScheme.outline,
                    ),
                  ],
                ),
              );
            },
          ),
          const SizedBox(height: 16),
        ],
        ListTile(
          tileColor: theme.colorScheme.onInverseSurface,
          leading: Text.rich(
            style: const TextStyle(
              height: 1,
              fontSize: 14,
            ),
            TextSpan(
              children: [
                TextSpan(
                  text: '*',
                  style: TextStyle(
                    fontSize: 14,
                    height: 1,
                    color: theme.colorScheme.error,
                  ),
                ),
                const TextSpan(
                  text: '名称',
                  style: TextStyle(
                    height: 1,
                    fontSize: 14,
                  ),
                ),
              ],
            ),
          ),
          title: TextField(
            autofocus: true,
            readOnly: _attr != null && FavUtil.isDefaultFav(_attr!),
            controller: _titleController,
            style: TextStyle(
              fontSize: 14,
              color: _attr != null && FavUtil.isDefaultFav(_attr!)
                  ? theme.colorScheme.outline
                  : null,
            ),
            inputFormatters: [
              LengthLimitingTextInputFormatter(20),
            ],
            decoration: InputDecoration(
              isDense: true,
              hintText: '名称',
              hintStyle: TextStyle(
                fontSize: 14,
                color: theme.colorScheme.outline,
              ),
              border: const OutlineInputBorder(
                borderSide: BorderSide.none,
                gapPadding: 0,
              ),
              contentPadding: EdgeInsets.zero,
            ),
          ),
        ),
        const SizedBox(height: 16),
        if (_attr == null || !FavUtil.isDefaultFav(_attr!)) ...[
          ListTile(
            tileColor: theme.colorScheme.onInverseSurface,
            title: Row(
              crossAxisAlignment: CrossAxisAlignment.start,
              children: [
                Text.rich(
                  TextSpan(
                    children: [
                      TextSpan(
                        text: '简介',
                        style: TextStyle(
                          fontSize: 14,
                          color: theme.colorScheme.onSurfaceVariant,
                        ),
                      ),
                      const TextSpan(
                        text: '*',
                        style: TextStyle(color: Colors.transparent),
                      ),
                    ],
                  ),
                ),
                const SizedBox(width: 16),
                Expanded(
                  child: TextField(
                    minLines: 6,
                    maxLines: 6,
                    controller: _introController,
                    style: const TextStyle(fontSize: 14),
                    inputFormatters: [
                      LengthLimitingTextInputFormatter(200),
                    ],
                    decoration: InputDecoration(
                      isDense: true,
                      hintText: '可填写简介',
                      hintStyle: TextStyle(
                        fontSize: 14,
                        color: theme.colorScheme.outline,
                      ),
                      border: const OutlineInputBorder(
                        borderSide: BorderSide.none,
                        gapPadding: 0,
                      ),
                      contentPadding: EdgeInsets.zero,
                    ),
                  ),
                ),
              ],
            ),
          ),
          const SizedBox(height: 16),
        ],
        Builder(
          builder: (context) {
            void onTap() {
              _isPublic = !_isPublic;
              (context as Element).markNeedsBuild();
            }

            return ListTile(
              onTap: onTap,
              tileColor: theme.colorScheme.onInverseSurface,
              leading: Text(
                '公开',
                style: leadingStyle,
              ),
              trailing: Transform.scale(
                alignment: Alignment.centerRight,
                scale: 0.8,
                child: Switch(
                  value: _isPublic,
                  onChanged: (value) => onTap(),
                ),
              ),
            );
          },
        ),
        const SizedBox(height: 16),
      ],
    ),
  );
}