import React from 'react'

import type { ButtonProps } from '@tarojs/components'
import { Button } from '@tarojs/components'

import type { BorderProps, ColorProps, FlexboxProps, LayoutProps, SpaceProps, TypographyProps } from '@lx-react-materiel/shared'
import { commonStyleFn } from '@lx-react-materiel/shared'

import { type Required as IRequired } from 'utility-types'

import './index.less'

// 合并类型 space && color & typography & layout & flexbox
type ILxButtonBasic = ButtonProps
& ColorProps
& FlexboxProps
& LayoutProps
& SpaceProps
& TypographyProps
& BorderProps

// 必须要有 children ，其他属性都是可选
export type ILxButtonProps = IRequired<ILxButtonBasic, 'children'>

/**
 * 按钮组件
 *
 * 1、在 taro button 组件属性使用方式不改变。
 * 文档：https://docs.taro.zone/docs/components/forms/button#buttonprops
 *
 * 2、绑定布局常用的相关 css 属性 到 props 上
 * 文档：https://styled-system.com/table
 *
 * @constructor
 * @example
 * <LxButton>默认按钮</LxButton>
 */
export function LxButton (props: ILxButtonProps) {
  const {
    style = commonStyleFn(props),
    children = null,
    className = null,
    ...rest
  } = props

  const mergeProps = {
    ...rest,
    className: `lx-button ${className ?? ''}`,
    style
  }

  return (
    <Button { ...mergeProps }>{children}</Button>
  )
}

// 默认值
// 温馨提示：如果 defaultProps 包含的必备属性。那么即使外部不传递。ts 类型检查也不会报错
LxButton.defaultProps = {
  width: 'auto',
  fontSize: 30,
  fontWeight: 'normal',
  display: 'inline-block',
  borderRadius: 8,
  borderColor: '#FF4500',
  paddingTop: 20,
  paddingRight: 49,
  paddingBottom: 20,
  paddingLeft: 49,
  backgroundColor: '#FF4500',
  color: '#ffffff'
}

export default LxButton