import React, { useState } from "react";
import DeviceSelection from "./DeviceSelection";
import FriendSelection from "./FriendSelection";
import GroupSelection from "./GroupSelection";
import { Button, Space } from "antd-mobile";

export default function SelectionTest() {
  // 设备选择
  const [selectedDevices, setSelectedDevices] = useState<string[]>([]);
  const [deviceDialogOpen, setDeviceDialogOpen] = useState(false);

  // 好友选择
  const [selectedFriends, setSelectedFriends] = useState<string[]>([]);
  const [friendDialogOpen, setFriendDialogOpen] = useState(false);

  // 群组选择
  const [selectedGroups, setSelectedGroups] = useState<string[]>([]);
  const [groupDialogOpen, setGroupDialogOpen] = useState(false);

  return (
    <div style={{ padding: 24 }}>
      <h2>选择弹窗测试</h2>
      <Space direction="vertical" block>
        <div>
          <b>DeviceSelection（内嵌输入框+弹窗）</b>
          <DeviceSelection
            selectedDevices={selectedDevices}
            onSelect={setSelectedDevices}
          />
        </div>
        <div>
          <b>FriendSelection</b>
          <Button color="primary" onClick={() => setFriendDialogOpen(true)}>
            打开好友选择弹窗
          </Button>
          <FriendSelection
            selectedFriends={selectedFriends}
            onSelect={setSelectedFriends}
            placeholder="请选择微信好友"
            className=""
            visible={friendDialogOpen}
            onVisibleChange={setFriendDialogOpen}
          />
        </div>
        <div>
          <b>GroupSelection</b>
          <Button color="primary" onClick={() => setGroupDialogOpen(true)}>
            打开群组选择弹窗
          </Button>
          <GroupSelection
            selectedGroups={selectedGroups}
            onSelect={setSelectedGroups}
            placeholder="请选择群聊"
            className=""
            visible={groupDialogOpen}
            onVisibleChange={setGroupDialogOpen}
          />
        </div>
      </Space>
      <div style={{ marginTop: 32 }}>
        <div>已选设备ID: {selectedDevices.join(", ")}</div>
        <div>已选好友ID: {selectedFriends.join(", ")}</div>
        <div>已选群组ID: {selectedGroups.join(", ")}</div>
      </div>
    </div>
  );
}