import 'package:flutter/material.dart';
import 'package:provider/provider.dart';
import 'package:win_text_editor/app/providers/editor_provider.dart';

import '../providers/file_provider.dart';

class EditorTabBar extends StatelessWidget {
  const EditorTabBar({super.key});

  @override
  Widget build(BuildContext context) {
    final editorProvider = Provider.of<EditorProvider>(context);

    return Container(
      height: 40,
      color: Colors.grey[300],
      child: Row(
        children: [
          // 布局切换按钮
          PopupMenuButton<int>(
            icon: const Icon(Icons.grid_view),
            itemBuilder:
                (context) => [
                  const PopupMenuItem(value: 0, child: Text('平铺布局')),
                  const PopupMenuItem(value: 1, child: Text('层叠布局')),
                  const PopupMenuItem(value: 2, child: Text('单页布局')),
                ],
            onSelected: (value) => editorProvider.changeLayout(value),
          ),
          // 标签页
          Expanded(
            child: ListView.builder(
              scrollDirection: Axis.horizontal,
              itemCount: editorProvider.openTabs.length,
              itemBuilder: (context, index) {
                final tab = editorProvider.openTabs[index];
                return InkWell(
                  onTap: () => editorProvider.setActiveTab(index),
                  child: Container(
                    padding: const EdgeInsets.symmetric(horizontal: 16.0),
                    decoration: BoxDecoration(
                      color:
                          editorProvider.activeTabIndex == index ? Colors.white : Colors.grey[200],
                      border: Border(
                        bottom: BorderSide(
                          color:
                              editorProvider.activeTabIndex == index
                                  ? Colors.blue
                                  : Colors.transparent,
                          width: 2.0,
                        ),
                      ),
                    ),
                    child: Center(
                      child: Row(
                        children: [
                          Text(tab.title),
                          const SizedBox(width: 8),
                          IconButton(
                            icon: const Icon(Icons.close, size: 16),
                            onPressed: () => editorProvider.closeTab(tab.id),
                          ),
                        ],
                      ),
                    ),
                  ),
                );
              },
            ),
          ),
          // 打开文件按钮
          IconButton(
            icon: const Icon(Icons.add),
            onPressed: () async {
              final fileProvider = Provider.of<FileProvider>(context, listen: false);
              await fileProvider.pickAndOpenFile();
            },
          ),
        ],
      ),
    );
  }
}