Toggle Button

"use client";

import { useState } from "react";
import { ToggleButton } from "@/components/composed/toggle-button/toggle-button";

/**
 * 默认单选示例
 */
export function ToggleButtonDefault() {
  const [selected, setSelected] = useState<string | undefined>();

  const options = [
    { id: "harmful", label: "有害/不安全" },
    { id: "false", label: "信息虚假" },
    { id: "inappropriate", label: "内容不当" },
  ];

  return (
    <div className="space-y-4">
      <ToggleButton
        options={options}
        value={selected}
        onChange={setSelected}
        variant="default"
      />
      {selected && (
        <div className="text-sm text-muted-foreground">
          当前选择：{options.find((opt) => opt.id === selected)?.label}
        </div>
      )}
    </div>
  );
}

"use client";

import { useState } from "react";
import { ToggleButton } from "@/components/composed/toggle-button/toggle-button";

/**
 * 默认单选示例
 */
export function ToggleButtonDefault() {
  const [selected, setSelected] = useState<string | undefined>();

  const options = [
    { id: "harmful", label: "有害/不安全" },
    { id: "false", label: "信息虚假" },
    { id: "inappropriate", label: "内容不当" },
  ];

  return (
    <div className="space-y-4">
      <ToggleButton
        options={options}
        value={selected}
        onChange={setSelected}
        variant="default"
      />
      {selected && (
        <div className="text-sm text-muted-foreground">
          当前选择：{options.find((opt) => opt.id === selected)?.label}
        </div>
      )}
    </div>
  );
}

"use client";

import { useState } from "react";
import { ToggleButton } from "@/components/composed/toggle-button/toggle-button";

/**
 * 紧凑样式示例（用于 sender 组件等场景）
 */
export function ToggleButtonCompact() {
  const [modes, setModes] = useState<string[]>([]);

  const modeOptions = [
    { id: "web-search", label: "联网搜索" },
    { id: "deep-think", label: "深度思考" },
  ];

  return (
    <div className="space-y-4">
      <ToggleButton
        options={modeOptions}
        values={modes}
        onValuesChange={setModes}
        multiple
        variant="compact"
      />
      {modes.length > 0 && (
        <div className="text-sm text-muted-foreground">
          已启用模式：
          {modes
            .map((id) => modeOptions.find((opt) => opt.id === id)?.label)
            .join("、")}
        </div>
      )}
    </div>
  );
}

"use client";

import { useState } from "react";
import { ToggleButton } from "@/components/composed/toggle-button/toggle-button";

/**
 * 多选模式示例
 */
export function ToggleButtonMultiple() {
  const [interests, setInterests] = useState<string[]>([]);

  const interestOptions = [
    { id: "tech", label: "科技" },
    { id: "sports", label: "体育" },
    { id: "music", label: "音乐" },
    { id: "travel", label: "旅行" },
    { id: "food", label: "美食" },
  ];

  return (
    <div className="space-y-4">
      <div className="space-y-2">
        <div className="text-sm font-medium">选择你的兴趣（可多选）</div>
        <ToggleButton
          options={interestOptions}
          values={interests}
          onValuesChange={setInterests}
          multiple
          variant="default"
        />
      </div>
      {interests.length > 0 && (
        <div className="text-sm text-muted-foreground">
          已选择：
          {interests
            .map((id) => interestOptions.find((opt) => opt.id === id)?.label)
            .join("、")}
        </div>
      )}
    </div>
  );
}

"use client";

import { useState } from "react";
import { ToggleButton } from "@/components/composed/toggle-button/toggle-button";

/**
 * 禁用状态示例
 */
export function ToggleButtonDisabled() {
  const [selected, setSelected] = useState<string | undefined>();

  const options = [
    { id: "option1", label: "可选项 1" },
    { id: "option2", label: "可选项 2" },
    { id: "option3", label: "禁用项", disabled: true },
    { id: "option4", label: "可选项 4" },
  ];

  return (
    <div className="space-y-4">
      <ToggleButton options={options} value={selected} onChange={setSelected} />
      {selected && (
        <div className="text-sm text-muted-foreground">
          当前选择：{options.find((opt) => opt.id === selected)?.label}
        </div>
      )}
    </div>
  );
}

"use client";

import { useState } from "react";
import { ToggleButton } from "@/components/composed/toggle-button/toggle-button";

/**
 * 反馈场景示例
 */
export function ToggleButtonFeedback() {
  const [feedback, setFeedback] = useState<string | undefined>();
  const [submitted, setSubmitted] = useState(false);

  const feedbackOptions = [
    { id: "harmful", label: "有害/不安全" },
    { id: "false", label: "信息虚假" },
    { id: "inappropriate", label: "内容不当" },
    { id: "unhelpful", label: "无用信息" },
    { id: "other", label: "其他问题" },
  ];

  const handleSubmit = () => {
    if (feedback) {
      setSubmitted(true);
      setTimeout(() => {
        setSubmitted(false);
        setFeedback(undefined);
      }, 2000);
    }
  };

  return (
    <div className="space-y-4 p-4 border rounded-lg">
      <div className="space-y-2">
        <div className="text-sm font-medium">这个回答有什么问题？</div>
        <ToggleButton
          options={feedbackOptions}
          value={feedback}
          onChange={setFeedback}
          variant="default"
        />
      </div>
      <button
        onClick={handleSubmit}
        disabled={!feedback || submitted}
        className="px-4 py-2 text-sm bg-primary text-primary-foreground rounded-md hover:bg-primary/90 disabled:opacity-50 disabled:cursor-not-allowed transition-colors"
      >
        {submitted ? "已提交" : "提交反馈"}
      </button>
    </div>
  );
}

"use client";

import { useState } from "react";
import { ToggleButton } from "@/components/composed/toggle-button/toggle-button";
import { Search, Brain } from "lucide-react";

/**
 * Sender 模式切换示例
 */
export function ToggleButtonSender() {
  const [modes, setModes] = useState<string[]>([]);
  const [input, setInput] = useState("");

  const modeOptions = [
    { id: "web-search", label: "联网搜索" },
    { id: "deep-think", label: "深度思考" },
  ];

  const handleSend = () => {
    console.log("发送消息:", input);
    console.log("已启用模式:", modes);
    setInput("");
  };

  return (
    <div className="space-y-4 p-4 border rounded-lg max-w-2xl">
      <div className="space-y-2">
        <textarea
          value={input}
          onChange={(e) => setInput(e.target.value)}
          placeholder="输入你的问题..."
          className="w-full min-h-[100px] p-3 border rounded-md resize-none focus:outline-none focus:ring-2 focus:ring-primary"
        />
      </div>
      <div className="flex items-center justify-between">
        <ToggleButton
          options={modeOptions}
          values={modes}
          onValuesChange={setModes}
          multiple
          variant="compact"
        />
        <button
          onClick={handleSend}
          disabled={!input.trim()}
          className="px-4 py-2 text-sm bg-primary text-primary-foreground rounded-md hover:bg-primary/90 disabled:opacity-50 disabled:cursor-not-allowed transition-colors"
        >
          发送
        </button>
      </div>
      {modes.length > 0 && (
        <div className="text-xs text-muted-foreground flex items-center gap-2">
          {modes.includes("web-search") && (
            <span className="flex items-center gap-1">
              <Search className="w-3 h-3" />
              联网搜索已启用
            </span>
          )}
          {modes.includes("deep-think") && (
            <span className="flex items-center gap-1">
              <Brain className="w-3 h-3" />
              深度思考已启用
            </span>
          )}
        </div>
      )}
    </div>
  );
}

"use client";

import { useState } from "react";
import { ToggleButton } from "@/components/composed/toggle-button/toggle-button";

/**
 * 筛选器示例
 */
export function ToggleButtonFilter() {
  const [categories, setCategories] = useState<string[]>(["all"]);

  const categoryOptions = [
    { id: "all", label: "全部" },
    { id: "tech", label: "科技" },
    { id: "design", label: "设计" },
    { id: "business", label: "商业" },
    { id: "lifestyle", label: "生活" },
  ];

  // 处理全部选项的特殊逻辑
  const handleCategoryChange = (newValues: string[]) => {
    // 如果选择了 "全部"，则清空其他选项
    if (newValues.includes("all") && !categories.includes("all")) {
      setCategories(["all"]);
    }
    // 如果有其他选项被选中，则移除 "全部"
    else if (newValues.length > 1 && newValues.includes("all")) {
      setCategories(newValues.filter((id) => id !== "all"));
    }
    // 如果取消所有选项，默认选中 "全部"
    else if (newValues.length === 0) {
      setCategories(["all"]);
    } else {
      setCategories(newValues);
    }
  };

  return (
    <div className="space-y-4">
      <div className="space-y-2">
        <div className="text-sm font-medium">选择类别</div>
        <ToggleButton
          options={categoryOptions}
          values={categories}
          onValuesChange={handleCategoryChange}
          multiple
          variant="default"
        />
      </div>
      <div className="p-4 border rounded-lg bg-muted/50">
        <div className="text-sm text-muted-foreground">
          {categories.includes("all") ? (
            <span>显示所有类别的内容</span>
          ) : (
            <span>
              显示以下类别的内容：
              {categories
                .map(
                  (id) => categoryOptions.find((opt) => opt.id === id)?.label,
                )
                .join("、")}
            </span>
          )}
        </div>
      </div>
    </div>
  );
}

"use client";

import { useState } from "react";
import { Globe } from "lucide-react";
import { ToggleButton } from "@/components/composed/toggle-button/toggle-button";

/**
 * 仅图标的开关按钮示例
 * 使用 option.tooltip 由组件内部正确包裹 Tooltip（Tooltip > button）
 */
export function ToggleButtonIcon() {
  const [webSearchEnabled, setWebSearchEnabled] = useState<
    string | undefined
  >();

  return (
    <ToggleButton
      options={[
        {
          id: "web-search",
          label: "联网搜索",
          icon: <Globe className="size-4" />,
          tooltip: "联网搜索",
        },
      ]}
      value={webSearchEnabled}
      onChange={setWebSearchEnabled}
      variant="compact"
      className="p-2"
    />
  );
}