import { defineComponent } from "vue"
import "./index.scss"

/**
 * 主题组件
 * @version 1.0.0
 */
export default defineComponent({
	name: "MpButton",
	props: {
		/**
		 * 按钮类型
		 * @values primary, info, success, warning, danger, default
		 */
		type: { type: String, default: "default" },
		/**
		 * 表单类型
		 * @values button, submit, reset
		 */
		formType: { type: String, default: "button" },

		/**
		 * 按钮大小
		 * @values large, normal, small, mini
		 */
		size: { type: String, default: "normal" },

		/**
		 * 失效状态
		 */
		disabled: { type: Boolean, default: false },

		/**
		 * 形状
		 * @values round, square
		 */
		shape: { type: String, default: "round" },

		/**
		 * 是否块状按钮
		 */
		block: { type: Boolean, default: true },

		/**
		 * 按钮标签
		 */
		text: { type: String, default: "" },

		/**
		 * 按钮图标，需要使用
		 *
		 */
		icon: { type: Object, default: null },

		/**
		 * 按钮图标位置
		 * @values left, right
		 */
		iconPosition: { type: String, default: "left" },

		/**
		 * 请求状态控制器
		 * @param {boolean} fetcher.loading 是否加载中
		 */
		fetcher: {
			type: Object,
			default: () => ({ loading: false }),
		},

		/**
		 * [原生配置](https://nutui.jd.com/taro/vue/4x/#/zh-CN/component/button)
		 */
		buttonProps: {
			type: Object,
			default: () => ({}),
		},
	},
	emits: [
		/**
		 * @event click
		 * @param {Event} event 点击事件
		 */
		"click",
	],

	setup(props, { emit, slots }) {
		const onClick = (e) => {
			/**
			 * @event click 点击事件
			 */
			emit("click", e)
		}

		const defaultLabel = () => {
			return props.text || slots.default?.()
		}

		const defaultSlot = () => {
			if (props.icon && props.iconPosition === "left") {
				return [props.icon, defaultLabel()]
			} else if (props.icon && props.iconPosition === "right") {
				return [defaultLabel(), props.icon]
			}
			return [defaultLabel()]
		}

		return () => (
			<nut-button
				loading={props.fetcher.loading}
				type={props.type}
				size={props.size}
				disabled={props.disabled}
				block={props.block}
				shape={props.shape}
				onClick={onClick}
				{...props.buttonProps}
			>
				{{
					default: () => defaultSlot(),
				}}
			</nut-button>
		)
	},
})