import { PisellSingleLineText } from "./PisellSingleLineText";
import { UserOutlined, SearchOutlined } from '@ant-design/icons';
import { Button } from 'antd';
import React from 'react';

/**
 * PisellSingleLineText 是一个通用的单行文本输入/展示组件。
 * 
 * ## 功能特性
 * - 支持三种状态：只读、编辑、禁用
 * - 完整的校验框架
 * - 受控/非受控模式
 * - 丰富的配置项
 */
var meta = {
  title: '表单/表单组件/PisellSingleLineText',
  component: PisellSingleLineText,
  parameters: {
    layout: 'centered',
    docs: {
      description: {
        component: '单行文本输入/展示组件，基于 Ant Design Input 开发。'
      }
    }
  },
  tags: ['autodocs'],
  argTypes: {
    mode: {
      control: 'radio',
      options: ['read', 'edit'],
      description: '状态模式',
      table: {
        defaultValue: {
          summary: 'edit'
        }
      }
    },
    disabled: {
      control: 'boolean',
      description: '是否禁用'
    },
    value: {
      control: 'text',
      description: '当前值（受控）'
    },
    defaultValue: {
      control: 'text',
      description: '默认值（非受控）'
    },
    placeholder: {
      control: 'text',
      description: '占位文本'
    },
    maxLength: {
      control: 'number',
      description: '最大长度'
    },
    showCount: {
      control: 'boolean',
      description: '显示字数统计'
    },
    allowClear: {
      control: 'boolean',
      description: '显示清空按钮'
    },
    required: {
      control: 'boolean',
      description: '是否必填'
    },
    minLength: {
      control: 'number',
      description: '最小长度'
    },
    ellipsis: {
      control: 'boolean',
      description: '超出省略（只读态）'
    },
    showTooltip: {
      control: 'boolean',
      description: '显示提示（只读态）'
    },
    fontSize: {
      control: 'text',
      description: '字号（只读态）'
    },
    color: {
      control: 'color',
      description: '文本颜色（只读态）'
    },
    displayVariant: {
      control: 'radio',
      options: ['text', 'link', 'badge', 'tag'],
      description: '展示样式变体（只读态）',
      table: {
        defaultValue: {
          summary: 'text'
        }
      }
    },
    badgeStatus: {
      control: 'select',
      options: ['success', 'processing', 'default', 'error', 'warning'],
      description: '徽标状态（displayVariant=badge 时有效）'
    },
    tagColor: {
      control: 'text',
      description: '标签颜色（displayVariant=tag 时有效）'
    },
    tagClosable: {
      control: 'boolean',
      description: '标签是否可关闭（displayVariant=tag 时有效）'
    }
  }
};
export default meta;
/**
 * 基础编辑态示例
 */
export var Basic = {
  args: {
    mode: 'edit',
    placeholder: '请输入内容'
  }
};

/**
 * 只读态示例 - 展示文本内容
 */
export var ReadMode = {
  args: {
    mode: 'read',
    value: '这是一段展示的文本内容'
  }
};

/**
 * 只读态 - 超长文本截断
 */
export var ReadModeEllipsis = {
  args: {
    mode: 'read',
    value: '这是一段非常非常非常非常非常非常非常非常非常非常长的文本内容，会被截断显示省略号',
    ellipsis: true,
    showTooltip: true
  },
  decorators: [function (Story) {
    return /*#__PURE__*/React.createElement("div", {
      style: {
        width: '300px'
      }
    }, /*#__PURE__*/React.createElement(Story, null));
  }]
};

/**
 * 禁用态示例
 */
export var Disabled = {
  args: {
    mode: 'edit',
    value: '禁用状态的内容',
    disabled: true
  }
};

/**
 * 必填校验示例
 */
export var Required = {
  args: {
    mode: 'edit',
    placeholder: '请输入（必填）',
    required: true,
    validateTrigger: 'onChange'
  }
};

/**
 * 长度校验示例
 */
export var LengthValidation = {
  args: {
    mode: 'edit',
    placeholder: '请输入 3-10 个字符',
    minLength: 3,
    maxLength: 10,
    showCount: true,
    validateTrigger: 'onChange'
  }
};

/**
 * 正则校验 - 仅数字
 */
export var PatternValidation = {
  args: {
    mode: 'edit',
    placeholder: '请输入数字',
    pattern: '^[0-9]+$',
    errorMessage: '只能输入数字',
    validateTrigger: 'onChange'
  }
};

/**
 * 自定义校验函数
 */
export var CustomValidator = {
  args: {
    mode: 'edit',
    placeholder: '请输入（不能包含"禁止"）',
    validator: function validator(value) {
      if (value.includes('禁止')) {
        return '内容不能包含敏感词';
      }
      return true;
    },
    validateTrigger: 'onChange'
  }
};

/**
 * 前缀图标
 */
export var WithPrefix = {
  args: {
    mode: 'edit',
    placeholder: '请输入用户名',
    prefix: /*#__PURE__*/React.createElement(UserOutlined, null)
  }
};

/**
 * 后缀文本
 */
export var WithSuffix = {
  args: {
    mode: 'edit',
    placeholder: '请输入金额',
    suffix: '元'
  }
};

/**
 * 前置标签
 */
export var WithAddonBefore = {
  args: {
    mode: 'edit',
    placeholder: 'www.example.com',
    addonBefore: 'https://'
  }
};

/**
 * 后置标签 - 按钮
 */
export var WithAddonAfter = {
  args: {
    mode: 'edit',
    placeholder: '请输入搜索内容',
    addonAfter: /*#__PURE__*/React.createElement(Button, {
      type: "primary"
    }, "\u641C\u7D22")
  }
};

/**
 * 完整配置示例
 */
export var FullFeatures = {
  args: {
    mode: 'edit',
    placeholder: '请输入',
    maxLength: 20,
    showCount: true,
    allowClear: true,
    prefix: /*#__PURE__*/React.createElement(SearchOutlined, null),
    required: true,
    minLength: 3,
    validateTrigger: 'both'
  }
};

/**
 * 自定义样式 - 只读态
 */
export var CustomStyle = {
  args: {
    mode: 'read',
    value: '这是自定义样式的文本',
    fontSize: '20px',
    fontWeight: 'bold',
    color: '#1890ff',
    textAlign: 'center'
  }
};

/**
 * 只读态 - 普通文本样式（默认）
 */
export var DisplayVariantText = {
  args: {
    mode: 'read',
    value: '普通文本样式',
    displayVariant: 'text'
  }
};

/**
 * 只读态 - 超链接样式
 */
export var DisplayVariantLink = {
  args: {
    mode: 'read',
    value: '点击查看详情',
    displayVariant: 'link',
    onLinkClick: function onLinkClick() {
      return alert('链接被点击');
    }
  }
};

/**
 * 只读态 - 徽标样式（圆形红色徽标）
 */
export var DisplayVariantBadge = {
  args: {
    mode: 'read',
    value: '5',
    displayVariant: 'badge',
    badgeStatus: 'error' // 使用红色
  }
};

/**
 * 只读态 - 徽标样式（文本内容）
 */
export var DisplayVariantBadgeText = {
  args: {
    mode: 'read',
    value: 'NEW',
    displayVariant: 'badge',
    badgeStatus: 'error'
  }
};

/**
 * 只读态 - 标签样式（默认灰色边框）
 */
export var DisplayVariantTag = {
  args: {
    mode: 'read',
    value: 'text',
    displayVariant: 'tag'
  }
};

/**
 * 只读态 - 标签样式（自定义颜色）
 */
export var DisplayVariantTagColored = {
  args: {
    mode: 'read',
    value: '重要',
    displayVariant: 'tag',
    tagColor: 'red'
  }
};

/**
 * 只读态 - 标签样式（可关闭）
 */
export var DisplayVariantTagClosable = {
  args: {
    mode: 'read',
    value: '可关闭标签',
    displayVariant: 'tag',
    tagClosable: true,
    onTagClose: function onTagClose() {
      return alert('标签被关闭');
    }
  }
};

/**
 * 展示样式对比 - 所有变体（基于 Figma 设计）
 */
export var AllDisplayVariants = {
  render: function render() {
    return /*#__PURE__*/React.createElement("div", {
      style: {
        display: 'flex',
        flexDirection: 'column',
        gap: '20px'
      }
    }, /*#__PURE__*/React.createElement("div", {
      style: {
        display: 'flex',
        alignItems: 'center',
        gap: '12px'
      }
    }, /*#__PURE__*/React.createElement("strong", {
      style: {
        width: '120px'
      }
    }, "\u666E\u901A\u6587\u672C\uFF1A"), /*#__PURE__*/React.createElement(PisellSingleLineText, {
      mode: "read",
      value: "Olivia Rhye",
      displayVariant: "text"
    })), /*#__PURE__*/React.createElement("div", {
      style: {
        display: 'flex',
        alignItems: 'center',
        gap: '12px'
      }
    }, /*#__PURE__*/React.createElement("strong", {
      style: {
        width: '120px'
      }
    }, "\u8D85\u94FE\u63A5\uFF1A"), /*#__PURE__*/React.createElement(PisellSingleLineText, {
      mode: "read",
      value: "Link",
      displayVariant: "link",
      onLinkClick: function onLinkClick() {
        return alert('链接被点击');
      }
    })), /*#__PURE__*/React.createElement("div", {
      style: {
        display: 'flex',
        alignItems: 'center',
        gap: '12px'
      }
    }, /*#__PURE__*/React.createElement("strong", {
      style: {
        width: '120px'
      }
    }, "\u5FBD\u6807\uFF08\u6570\u5B57\uFF09\uFF1A"), /*#__PURE__*/React.createElement(PisellSingleLineText, {
      mode: "read",
      value: "5",
      displayVariant: "badge",
      badgeStatus: "error"
    })), /*#__PURE__*/React.createElement("div", {
      style: {
        display: 'flex',
        alignItems: 'center',
        gap: '12px'
      }
    }, /*#__PURE__*/React.createElement("strong", {
      style: {
        width: '120px'
      }
    }, "\u5FBD\u6807\uFF08\u6587\u672C\uFF09\uFF1A"), /*#__PURE__*/React.createElement(PisellSingleLineText, {
      mode: "read",
      value: "text",
      displayVariant: "badge",
      badgeStatus: "error"
    })), /*#__PURE__*/React.createElement("div", {
      style: {
        display: 'flex',
        alignItems: 'center',
        gap: '12px'
      }
    }, /*#__PURE__*/React.createElement("strong", {
      style: {
        width: '120px'
      }
    }, "\u6807\u7B7E\uFF08\u9ED8\u8BA4\uFF09\uFF1A"), /*#__PURE__*/React.createElement(PisellSingleLineText, {
      mode: "read",
      value: "text",
      displayVariant: "tag"
    })), /*#__PURE__*/React.createElement("div", {
      style: {
        display: 'flex',
        alignItems: 'center',
        gap: '12px'
      }
    }, /*#__PURE__*/React.createElement("strong", {
      style: {
        width: '120px'
      }
    }, "\u6807\u7B7E\uFF08\u84DD\u8272\uFF09\uFF1A"), /*#__PURE__*/React.createElement(PisellSingleLineText, {
      mode: "read",
      value: "\u6807\u7B7E",
      displayVariant: "tag",
      tagColor: "blue"
    })), /*#__PURE__*/React.createElement("div", {
      style: {
        display: 'flex',
        alignItems: 'center',
        gap: '12px'
      }
    }, /*#__PURE__*/React.createElement("strong", {
      style: {
        width: '120px'
      }
    }, "\u6807\u7B7E\uFF08\u53EF\u5173\u95ED\uFF09\uFF1A"), /*#__PURE__*/React.createElement(PisellSingleLineText, {
      mode: "read",
      value: "\u53EF\u5173\u95ED",
      displayVariant: "tag",
      tagClosable: true,
      onTagClose: function onTagClose() {
        return alert('标签被关闭');
      }
    })));
  }
};