import React from 'react'
import { View } from '@tarojs/components'

import type { ColorProps } from '@lx-react-materiel/shared'
import { color, transformValue } from '@lx-react-materiel/shared'

interface LxSemiCircleProps {
  size?: number
  backgroundColor?: Pick<ColorProps, 'backgroundColor'>['backgroundColor']
  type?: 'left' | 'right' // 左半圆，右半圆
}

/**
 * 内凹分割组件
 * @param props
 * @constructor
 */
export function LxSemiCircle (props: LxSemiCircleProps) {
  const {
    size = 30,
    type = 'left'
  } = props

  const sizesValue = transformValue(size)
  const style = {
    width: sizesValue,
    height: sizesValue,
    ...color(props)
  }

  const topStyle = {
    ...style,
    ...(type === 'left' && { borderTopLeftRadius: sizesValue }),
    ...(type === 'right' && { borderTopRightRadius: sizesValue })
  }

  const bottomStyle = {
    ...style,
    ...(type === 'left' && { borderBottomLeftRadius: sizesValue }),
    ...(type === 'right' && { borderBottomRightRadius: sizesValue })
  }

  return (
    <View className='lx-semi-circle'>
      <View className='lx-semi-circle--top' style={topStyle}></View>
      <View className='lx-semi-circle--bottom' style={bottomStyle}></View>
    </View>
  )
}

export default LxSemiCircle