import React from 'react'
import { GestureResponderEvent } from 'react-native'
import { Path } from 'react-native-svg'

function arc(r: number, dx: number, dy: number) {
  return `a${r} ${r} 0 0 1 ${dx},${dy}`
}

export const TopRoundedBar: React.FC<{
  x: number
  y: number
  r: number
  width: number
  height: number
  fill: string
  onPress?: (event: GestureResponderEvent) => void
}> = ({ x, y, r, width, height, fill, onPress }) => {
  const minDim = Math.min(width, height)
  const rr = minDim - r * 2 > 0 ? r : minDim / 2
  const halfWidth = width / 2

  return (
    <Path
      d={`
    M${x - halfWidth},${y}
    h${width - rr}
    ${arc(rr, rr, rr)}
    v${height}
    h-${width}
    v-${height}
    ${arc(rr, rr, -rr)}
    z`}
      fill={fill}
      onPress={onPress}
    />
  )
}