import {CSSProperties, FC} from "react";
import {Button, View} from "@tarojs/components";
import styles from './myButton.module.scss'
import {ButtonProps} from "@tarojs/components/types/Button";
import Loading from "@/components/loading";

interface Props extends ButtonProps {
  fillet?: boolean
  loading?: boolean
  width?: number
}

const MyButton: FC<Props> = (props) => {

  const buttonStyle = (): CSSProperties | string => {
    let style: CSSProperties | string = {}
    switch (props.type) {
      case 'default':
        style.background = '#f5f8f7'
        break
      case 'warn':
        style.background = '#c94f4f'
        style.color = '#fff'
        break
      case 'primary':
      case undefined:
        style.background = '#45D4A8'
        style.color = '#fff'
    }

    if (props.fillet) {
      style.borderRadius = '100px'
    }
    if (props.width) {
      style.width = props.width + "px"
    }

    if (props.style && typeof props.style === 'object') {
      style = {
        ...style,
        ...props.style
      }
    }

    if (props.disabled) {
      style.background = '#f5f8f7'
      style.color = '#ddd'
      style.boxShadow = 'none'
    }

    return style
  }

  return (
    <Button
      plain
      {...props}
      loading={false}
      style={buttonStyle()}
      onClick={(event) => !props.disabled && props.onClick?.(event)}
      className={`${styles.Mybutton} ${props.className}`}>
      {
        props.loading && <View className='mr-1'>
          <Loading/>
        </View>
      }
      <View>{props.children}</View>
    </Button>
  )
}
export default MyButton
