import React from 'react'
import type { ColorProps, FontSizeProps, HeightProps, PaddingProps, WidthProps } from '@lx-react-materiel/shared'

import { commonStyleFn } from '@lx-react-materiel/shared'
import { LxImage } from '../lxImage'
import { LxText } from '../lxText'

import type { ImageProps, ViewProps } from '@tarojs/components'
import { View } from '@tarojs/components'

import type { Optional as IOptional } from 'utility-types'

import './index.less'

// 合并类型
interface ILxTipsBase extends Pick<PaddingProps, 'paddingTop'>, FontSizeProps, ColorProps, HeightProps, WidthProps, Pick<ViewProps, 'className'> {
  description: string
  image: Pick<ImageProps, 'src'>['src']
}

// ILxTipsBase 返回的类型，除了 paddingTop 都是必选字段
type ILxTipsProps = IOptional<ILxTipsBase, 'paddingTop' | 'backgroundColor' | 'color' | 'fontSize'>

/**
 * 空数据，异常等场景，提示组件
 * @param props
 * @constructor
 */
export function LxTips (props: ILxTipsProps) {
  const {
    width,
    height,
    image,
    description,
    color,
    className,
    fontSize,

    // 注意，只有这剩余属性才属于最外层 view 的
    ...rest
  } = props

  // 基础属性。
  const mergeProps = {
    className: `lx-tips ${className ?? ''}`,
    style: commonStyleFn(rest)
  }

  return (
    <>
      <View {...mergeProps}>
        <LxImage width={width} height={height} src={image}></LxImage>
        <LxText fontSize={fontSize} color={color}>{ description }</LxText>
      </View>
    </>
  )
}

// 默认值
LxTips.defaultProps = {
  paddingTop: 237,
  backgroundColor: 'none',
  color: '#868A93',
  fontSize: 28
}