import { PisellImport } from "./PisellImport";
import { PisellExport } from "../pisellExport";
import { UploadOutlined } from '@ant-design/icons';
var meta = {
  title: 'Data Entry/PisellImport',
  component: PisellImport,
  tags: ['autodocs'],
  argTypes: {
    variant: {
      description: '展示形态',
      control: 'radio',
      options: ['icon', 'button']
    },
    size: {
      description: '尺寸',
      control: 'radio',
      options: ['small', 'medium', 'large']
    },
    type: {
      description: '视觉类型',
      control: 'radio',
      options: ['default', 'primary']
    },
    disabled: {
      description: '是否禁用',
      control: 'boolean'
    },
    label: {
      description: 'Button 形态文案',
      control: 'text'
    }
  }
};
export default meta;
/**
 * 默认 Button 形态
 */
export var Basic = {
  args: {
    variant: 'button',
    size: 'medium',
    type: 'default',
    onImport: function onImport() {
      return console.log('onImport');
    }
  }
};

/**
 * 仅图标形态
 */
export var IconOnly = {
  args: {
    variant: 'icon',
    size: 'medium',
    type: 'default',
    onImport: function onImport() {
      return console.log('onImport');
    }
  }
};

/**
 * 三种尺寸 - Button
 */
export var SizesButton = {
  render: function render() {
    return /*#__PURE__*/React.createElement("div", {
      style: {
        display: 'flex',
        alignItems: 'center',
        gap: 16,
        flexWrap: 'wrap'
      }
    }, /*#__PURE__*/React.createElement(PisellImport, {
      variant: "button",
      size: "small",
      onImport: function onImport() {}
    }), /*#__PURE__*/React.createElement(PisellImport, {
      variant: "button",
      size: "medium",
      onImport: function onImport() {}
    }), /*#__PURE__*/React.createElement(PisellImport, {
      variant: "button",
      size: "large",
      onImport: function onImport() {}
    }));
  }
};

/**
 * 三种尺寸 - Icon
 */
export var SizesIcon = {
  render: function render() {
    return /*#__PURE__*/React.createElement("div", {
      style: {
        display: 'flex',
        alignItems: 'center',
        gap: 16
      }
    }, /*#__PURE__*/React.createElement(PisellImport, {
      variant: "icon",
      size: "small",
      onImport: function onImport() {}
    }), /*#__PURE__*/React.createElement(PisellImport, {
      variant: "icon",
      size: "medium",
      onImport: function onImport() {}
    }), /*#__PURE__*/React.createElement(PisellImport, {
      variant: "icon",
      size: "large",
      onImport: function onImport() {}
    }));
  }
};

/**
 * 默认样式 vs 主色样式
 */
export var DefaultVsPrimary = {
  render: function render() {
    return /*#__PURE__*/React.createElement("div", {
      style: {
        display: 'flex',
        alignItems: 'center',
        gap: 16
      }
    }, /*#__PURE__*/React.createElement(PisellImport, {
      variant: "button",
      type: "default",
      onImport: function onImport() {}
    }), /*#__PURE__*/React.createElement(PisellImport, {
      variant: "button",
      type: "primary",
      onImport: function onImport() {}
    }));
  }
};

/**
 * 禁用态
 */
export var Disabled = {
  render: function render() {
    return /*#__PURE__*/React.createElement("div", {
      style: {
        display: 'flex',
        alignItems: 'center',
        gap: 16
      }
    }, /*#__PURE__*/React.createElement(PisellImport, {
      variant: "button",
      disabled: true,
      onImport: function onImport() {}
    }), /*#__PURE__*/React.createElement(PisellImport, {
      variant: "button",
      type: "primary",
      disabled: true,
      onImport: function onImport() {}
    }), /*#__PURE__*/React.createElement(PisellImport, {
      variant: "icon",
      disabled: true,
      onImport: function onImport() {}
    }));
  }
};

/**
 * 自定义文案
 */
export var CustomLabel = {
  args: {
    variant: 'button',
    label: '导入 Excel',
    onImport: function onImport() {}
  }
};

/**
 * 自定义图标（antd 图标）
 */
export var CustomIcon = {
  args: {
    variant: 'button',
    icon: /*#__PURE__*/React.createElement(UploadOutlined, {
      style: {
        fontSize: 20
      }
    }),
    label: '上传',
    onImport: function onImport() {}
  }
};

/**
 * 文件选择：限制类型与大小
 */
export var FileSelect = {
  args: {
    variant: 'button',
    accept: '.xlsx,.xls,.csv',
    multiple: false,
    maxSize: 10,
    onImport: function onImport(files) {
      console.log('已选文件', files);
      alert("\u5DF2\u9009\u62E9 ".concat(files.length, " \u4E2A\u6587\u4EF6\uFF1A").concat(files.map(function (f) {
        return f.name;
      }).join(', ')));
    },
    onError: function onError(err) {
      console.error('onError', err);
      alert(err.message);
    }
  }
};

/**
 * 多选文件
 */
export var MultipleFiles = {
  args: {
    variant: 'button',
    label: '选择多个文件',
    multiple: true,
    onImport: function onImport(files) {
      return alert("\u5DF2\u9009\u62E9 ".concat(files.length, " \u4E2A\u6587\u4EF6"));
    }
  }
};

/**
 * 与 Export 并排
 */
export var WithExport = {
  render: function render() {
    return /*#__PURE__*/React.createElement("div", {
      style: {
        display: 'flex',
        alignItems: 'center',
        gap: 16
      }
    }, /*#__PURE__*/React.createElement(PisellImport, {
      variant: "button",
      onImport: function onImport() {}
    }), /*#__PURE__*/React.createElement(PisellExport, {
      variant: "button",
      onExport: function onExport() {}
    }));
  }
};