import React from 'react'
import { useMeasure } from 'react-use'
import { AppProps, ExtensionType } from 'src/types'
import 'src/style.css'
import {
  getBasicConfig,
  getStrokeConfig,
  getShadowConfig
} from 'src/utils'
import {
  Small_Canvas_Width
} from 'src/contants'

const RightParenthesis: React.FC<AppProps> = (props) => {

  const {
    properties,
    theme
  } = props
  const [containerRef, { width: offsetWidth, height: offsetHeight }] = useMeasure()

  const {
    backgroundColor,
  } = React.useMemo(() => {
    return getBasicConfig(properties, theme, ExtensionType.RightParenthesis)
  }, [properties, theme])

  const shadow = React.useMemo(() => {
    return getShadowConfig(properties, theme)
  }, [properties, theme])

  const {
    strokeDasharray,
    strokeLinecap,
    stroke,
    strokeWidth
  } = React.useMemo(() => {
    return getStrokeConfig(properties, theme, offsetWidth, Small_Canvas_Width, ExtensionType.RightParenthesis)
  }, [properties, theme, offsetWidth])

  return (
    <div className='graphicsContainer' ref={containerRef}>
      <svg
        className="graphics"
        version="1.1"
        xmlns="http://www.w3.org/2000/svg"
        fill-rule="evenodd"
        clip-rule="evenodd"
        height="40"
        width="40"
        viewBox="0 0 40 40"
        style={{ filter: shadow }}
      >
        {/* 右括号 */}
        <path
          d="M15.3718 38.8719C15.2056 39.208 15.4478 39.6059 15.8227 39.6059H19.2944C19.7831 39.6059 20.2439 39.3696 20.5112 38.9605C21.2783 37.7868 21.9639 36.5113 22.568 35.1339C23.2847 33.4999 23.8723 31.8229 24.331 30.1029C24.8183 28.3542 25.1767 26.6056 25.406 24.8569C25.6353 23.0796 25.75 21.3882 25.75 19.7829C25.75 16.4002 25.2483 13.0606 24.245 9.76389C23.3494 6.73463 22.1028 3.85059 20.5053 1.11178C20.2421 0.660586 19.7555 0.389893 19.2331 0.389893H15.8553C15.4828 0.389893 15.2406 0.782932 15.4023 1.11854C16.7972 4.01528 17.8385 6.9974 18.526 10.0649C19.2713 13.3902 19.644 16.7729 19.644 20.2129C19.644 23.5956 19.257 26.9209 18.483 30.1889C17.7975 33.1681 16.7605 36.0624 15.3718 38.8719Z"
          strokeDasharray={strokeDasharray}
          strokeLinecap={strokeLinecap}
          stroke={stroke}
          fill={backgroundColor}
          strokeWidth={strokeWidth}
        />
      </svg>
    </div>
  )
}

export default RightParenthesis
