import React from 'react'

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

import type { TextProps } from '@tarojs/components'
import { Text } from '@tarojs/components'

import './index.less'

type ILxTextProps = TextProps
& ColorProps
& LayoutProps
& SpaceProps
& TypographyProps
& {
  line?: number
}

/**
 * 文字组件
 *
 * 1. 基本用法，请参考 https://docs.taro.zone/docs/components/base/text
 *
 * 2. 支持样式用法，请查看 https://styled-system.com/table/ 传递 css 属性
 *
 * 3. 超出省略，请传递 line
 *
 * @param props
 * @constructor
 * @example
 * <LxText className='diy-class' fontSize={30} color='#333'>测试文案</LxText>
 *
 * 传递 line属性控制超出省略
 * <LxText line={1} className='diy-class' fontSize={30} color='#333'>阿斯顿发送到发阿斯蒂芬阿道夫</LxText>
 */
export function LxText (props: ILxTextProps) {
  const {
    style = commonStyleFn(props),
    children = null,
    className = null,
    line,
    ...rest
  } = props

  const mergeProps = {
    ...rest,
    className: `lx-text ${className ?? ''}`,
    style: {
      ...style,
      ...(line && { WebkitLineClamp: line })
    }
  }

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