import 'package:chat/configs/app_colors.dart';
import 'package:chat/configs/app_size.dart';
import 'package:chat/controllers/publish_controller.dart';
import 'package:flutter/material.dart';
import 'package:get/get.dart';
import 'package:wechat_assets_picker/wechat_assets_picker.dart';

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

  @override
  Widget build(BuildContext context) {
    final ctrl = Get.put(PublishController());
    return GestureDetector(
      onTap: () => FocusScope.of(context).requestFocus(FocusNode()),
      child: Scaffold(
        appBar: AppBar(
          title: const Text('发布动态'),
          actions: [
            Center(
              child: Padding(
                padding: const EdgeInsets.only(
                  right: AppSize.horizontalLargePadding,
                ),
                child: Obx(() {
                  return ElevatedButton(
                    style: ButtonStyle(
                      elevation: MaterialStateProperty.all(0),
                      backgroundColor: MaterialStateProperty.resolveWith(
                        (states) {
                          if (states.contains(MaterialState.disabled)) {
                            return AppColors.active.withAlpha(128);
                          } else {
                            return AppColors.primary;
                          }
                        },
                      ),
                      minimumSize: MaterialStateProperty.all(Size.zero),
                      padding: MaterialStateProperty.all(
                        const EdgeInsets.symmetric(
                          vertical: 6,
                          horizontal: 16,
                        ),
                      ),
                    ),
                    onPressed: ctrl.publishContent.isNotEmpty
                        ? () => ctrl.publish()
                        : null,
                    child: const Text('发布'),
                  );
                }),
              ),
            )
          ],
        ),
        body: CustomScrollView(
          slivers: [
            const SizedBox(height: 10).sliverBox,
            TextField(
              decoration: const InputDecoration(
                contentPadding: EdgeInsets.zero,
                border: InputBorder.none,
                focusedBorder: InputBorder.none,
                disabledBorder: InputBorder.none,
                fillColor: AppColors.transparent,
                filled: true,
                hintText: '这一刻的想法...',
                hintStyle: TextStyle(
                  fontSize: 14,
                ),
              ),
              onChanged: (value) => ctrl.publishContent.value = value,
              minLines: 7,
              maxLines: 14,
            ).sliverBox.contentPadding,
            const SizedBox(height: 8).sliverBox,
            Obx(() {
              return GridView.count(
                crossAxisCount: 3,
                childAspectRatio: 1,
                mainAxisSpacing: 8,
                crossAxisSpacing: 8,
                shrinkWrap: true,
                physics: const NeverScrollableScrollPhysics(),
                children: [
                  ...ctrl.publishFileList
                      .map((e) =>
                          showImageWidget(ctrl.publishFileList.indexOf(e)))
                      .toList(),
                  if (ctrl.publishFileList.length < 9) pickImageWidget(),
                ],
              ).sliverBox.contentPadding;
            }),
          ],
        ),
      ),
    );
  }

  Widget showImageWidget(int index) {
    final ctrl = PublishController.to;
    return GestureDetector(
      onLongPress: () => ctrl.deleteImageOrVideo(index),
      onTap: () => ctrl.previewFiles(index),
      child: ClipRRect(
        borderRadius: BorderRadius.circular(4),
        child: Image(
          image: AssetEntityImageProvider(
            ctrl.publishFileList[index],
            isOriginal: false,
          ),
          fit: BoxFit.cover,
          alignment: Alignment.center,
        ),
      ),
    );
  }

  Widget pickImageWidget() {
    return InkWell(
      onTap: () => PublishController.to.pickImageOrVideo(),
      child: Container(
        decoration: BoxDecoration(
          color: AppColors.unactive.withOpacity(0.2),
          borderRadius: BorderRadius.circular(4),
        ),
        child: const Icon(
          Icons.add_rounded,
          size: 40,
          color: AppColors.active,
        ),
      ),
    );
  }
}

extension on Widget {
  Widget get contentPadding {
    return SliverPadding(
      padding: const EdgeInsets.symmetric(
        horizontal: AppSize.horizontalLargePadding,
      ),
      sliver: this,
    );
  }
}