import React from 'react'

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

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

import './index.less'

export type ILxBoxProps = ViewProps
& LayoutProps
& SpaceProps
& BorderProps
& ColorProps
& TypographyProps
& PositionProps
& FlexboxProps

/**
 * 视图容器，把常见的样式挂载在 view 组件上：LayoutProps, SpaceProps, ColorProps, TypographyProps, PositionProps
 *
 * 1、基本用法参考 https://docs.taro.zone/docs/components/viewContainer/view
 *
 * 2、绑定 css 属性 使用。
 *
 * @param props
 * @example
 * <LxBox className='custom-class' position='relative' fontSize={30} width={750} height={200} marginTop={20} paddingTop={20} backgroundColor='orange' color='#fff' >{ args.children }</LxBox>
 */
export function LxBox (props: ILxBoxProps) {
  const {
    style = commonStyleFn(props),
    className = null,
    children,
    ...rest
  } = props

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

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