flisp_app/lib/widgets/flisp_form.dart

import 'package:flisp_app/models/flisp.dart';
import 'package:flisp_app/provider/flisp_provider.dart';
import 'package:flutter/material.dart';
import 'package:flutter_form_builder/flutter_form_builder.dart';
import 'package:provider/provider.dart';

class FlispForm extends StatefulWidget {
  final GlobalKey<FormBuilderState> formKey;
  final bool isEditing;
  final Flisp? initialFlisp;
  final VoidCallback onOk;

  const FlispForm({
    super.key,
    required this.formKey,
    required this.isEditing,
    required this.onOk,
    this.initialFlisp,
  });

  @override
  State<FlispForm> createState() => _FlispFormState();
}

class _FlispFormState extends State<FlispForm> {
  @override
  void initState() {
    super.initState();
  }

  @override
  Widget build(BuildContext context) {
    final int maxContentCount = 100;
    final provider = Provider.of<FlispProvider>(context);

    FormBuilderTextField buildContentField() {
      return FormBuilderTextField(
        name: 'content',
        initialValue: provider.formItem.content,
        onChanged: (value) {
          setState(() {
            provider.formItem.content = value ?? '';
          });
        },
        decoration: InputDecoration(
          hintText: '记录你的灵感瞬间...',
          counterText: '',
          suffixText: '${provider.formItem.content.length}/$maxContentCount',
          border: OutlineInputBorder(
            borderRadius: BorderRadius.circular(12),
            borderSide: BorderSide(color: Colors.grey.shade200),
          ),
          enabledBorder: OutlineInputBorder(
            borderRadius: BorderRadius.circular(12),
            borderSide: BorderSide(color: Colors.grey.shade200),
          ),
          focusedBorder: OutlineInputBorder(
            borderRadius: BorderRadius.circular(12),
            borderSide: BorderSide(color: Colors.orange),
          ),
          filled: true,
          fillColor: Colors.white,
          contentPadding: EdgeInsets.symmetric(horizontal: 16, vertical: 14),
        ),
        minLines: 4,
        maxLines: 8,
        maxLength: maxContentCount,
        validator: (value) {
          if (value != null && value.isEmpty) {
            return '请输入内容';
          }

          if (value != null && value.length > maxContentCount) {
            return '内容不能超过$maxContentCount个字符';
          }
          return null;
        },
      );
    }

    // 图标按钮组件
    Widget buildIconButton({
      required IconData icon,
      required Color color,
      required VoidCallback onTap,
    }) {
      return GestureDetector(
        onTap: onTap,
        child: Container(
          width: 32,
          height: 32,
          decoration: BoxDecoration(
            color: color.withAlpha(50),
            borderRadius: BorderRadius.circular(8),
            border: Border.all(color: color.withAlpha(80), width: 1),
          ),
          child: Icon(icon, size: 18, color: color),
        ),
      );
    }

    Widget buildBottomButton() {
      return Container(
        padding: EdgeInsets.only(top: 16),
        child: Row(
          mainAxisAlignment: MainAxisAlignment.spaceBetween,
          children: [
            // 功能图标区域
            Row(
              children: [
                // 上传图片按钮
                buildIconButton(
                  icon: Icons.photo_library_rounded,
                  color: Colors.blue,
                  onTap: () {
                    // 上传图片功能
                  },
                ),

                SizedBox(width: 12),

                // 选择标签按钮
                buildIconButton(
                  icon: Icons.local_offer_rounded,
                  color: Colors.orange,
                  onTap: () {
                    // 选择标签功能
                  },
                ),
              ],
            ),

            // 确认按钮（箭头形状）
            Container(
              width: 48,
              height: 48,
              decoration: BoxDecoration(
                color: Theme.of(context).primaryColor,
                borderRadius: BorderRadius.circular(24),
                border: Border.all(color: Theme.of(context).primaryColor, width: 1),
              ),
              child: IconButton(
                icon: Icon(Icons.arrow_forward_rounded, size: 24),
                color: Colors.white,
                onPressed: () => widget.onOk(),
              ),
            ),
          ],
        ),
      );
    }

    // 选择的标签显示
    Widget buildSelectedTags() {
      // 模拟选择的标签
      final selectedTags = ['旅行', '美食'];

      if (selectedTags.isEmpty) return SizedBox();

      return Column(
        crossAxisAlignment: CrossAxisAlignment.start,
        children: [
          SizedBox(height: 8),
          Wrap(
            spacing: 8,
            runSpacing: 8,
            children:
                selectedTags.map((tag) {
                  return Container(
                    padding: EdgeInsets.symmetric(horizontal: 12, vertical: 6),
                    decoration: BoxDecoration(
                      color: Colors.orange.withOpacity(0.1),
                      borderRadius: BorderRadius.circular(16),
                      border: Border.all(color: Colors.orange.withOpacity(0.3)),
                    ),
                    child: Row(
                      mainAxisSize: MainAxisSize.min,
                      children: [
                        Text(
                          tag,
                          style: TextStyle(
                            fontSize: 12,
                            color: Colors.orange,
                            fontWeight: FontWeight.w500,
                          ),
                        ),
                        SizedBox(width: 4),
                        GestureDetector(
                          onTap: () {
                            // 删除标签
                          },
                          child: Icon(
                            Icons.close,
                            size: 14,
                            color: Colors.orange,
                          ),
                        ),
                      ],
                    ),
                  );
                }).toList(),
          ),
          SizedBox(height: 12),
        ],
      );
    }

    // 图片预览
    Widget buildImagePreview() {
      // 模拟上传的图片
      final imageItems = [
        {'name': 'photo1.jpg'},
      ];

      if (imageItems.isEmpty) return SizedBox();

      return Column(
        crossAxisAlignment: CrossAxisAlignment.start,
        children: [
          Wrap(
            spacing: 8,
            runSpacing: 8,
            children:
                imageItems.map((image) {
                  return Container(
                    padding: EdgeInsets.symmetric(horizontal: 12, vertical: 8),
                    decoration: BoxDecoration(
                      color: Colors.blue.withOpacity(0.1),
                      borderRadius: BorderRadius.circular(12),
                      border: Border.all(color: Colors.blue.withOpacity(0.3)),
                    ),
                    child: Row(
                      mainAxisSize: MainAxisSize.min,
                      children: [
                        Icon(Icons.photo, size: 16, color: Colors.blue),
                        SizedBox(width: 6),
                        Text(
                          image['name']!,
                          style: TextStyle(fontSize: 12, color: Colors.blue),
                        ),
                        SizedBox(width: 4),
                        GestureDetector(
                          onTap: () {
                            // 删除图片
                          },
                          child: Icon(
                            Icons.close,
                            size: 14,
                            color: Colors.blue,
                          ),
                        ),
                      ],
                    ),
                  );
                }).toList(),
          ),
          SizedBox(height: 12),
        ],
      );
    }

    return FormBuilder(
      key: widget.formKey,
      child: Column(
        children: [
          // 文本输入区域
          Expanded(
            child: SingleChildScrollView(
              child: Column(
                crossAxisAlignment: CrossAxisAlignment.start,
                children: [
                  buildContentField(),
                  SizedBox(height: 4),
                  buildSelectedTags(),
                  buildImagePreview(),
                ],
              ),
            ),
          ),
          // 底部功能按钮行
          buildBottomButton(),
        ],
      ),
    );
  }
}