import React from 'react'

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

import type { BackgroundProps, BoxShadowProps, HeightProps } from '@lx-react-materiel/shared'
import { commonStyleFn } from '@lx-react-materiel/shared'

import { LxSafeArea } from '../lxSafeArea'

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

import './index.less'

interface ILxFooterSlotProps {
  slotLeft?: React.ReactNode
  slotRight?: React.ReactNode
  children?: React.ReactNode
}

type ILxFooterProps<CurSlotProps extends ILxFooterSlotProps = ILxFooterSlotProps> = CurSlotProps
// ViewProps 只用到的部分属性。
& Pick<ViewProps, 'style' | 'className'>
& BackgroundProps
& BoxShadowProps
& HeightProps

export type ILxFooterDefaultProps = IRequired<ILxFooterProps<Pick<ILxFooterSlotProps, 'children'>>, 'children'>
export type ILxFooterSlotLeftRightProps = IRequired<ILxFooterProps<Pick<ILxFooterSlotProps, 'slotLeft' | 'slotRight'>>, 'slotLeft' | 'slotRight'>

/**
 * 底部组件
 * @param props
 * @constructor
 */
export const LxFooter = <P extends ILxFooterProps = ILxFooterDefaultProps>(props: P) => {
  const {
    slotLeft,
    slotRight,
    children,
    height,
    className = null,
    ...rest
  } = props

  // 基础属性。
  const mergeProps = {
    ...rest,
    className: `lx-footer ${className ?? ''}`,
    // 最外层组件有额外属性，height 这类，用在子组件的，索引不能传递 props
    style: commonStyleFn(rest)
  }

  // 让组件支持高度修改
  const containerProps = {
    style: {
      ...(height && { height: commonStyleFn({ height }) })
    }
  }

  return (
    <LxSafeArea>
      <View {...mergeProps}>
        <View { ...containerProps } className='lx-footer__container'>
          { children ?? <>
              <View className='lx-footer--left'>
                {slotLeft}
              </View>
              <View className='lx-footer--right'>
                {slotRight}
              </View>
            </>
          }
        </View>
      </View>
    </LxSafeArea>
  )
}

export default LxFooter