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 LeftParenthesis: React.FC<AppProps> = (props) => {

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

  const {
    backgroundColor,
  } = React.useMemo(() => {
    return getBasicConfig(properties, theme, ExtensionType.LeftParenthesis)
  }, [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.LeftParenthesis)
  }, [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="M25.4046 1.13091C25.5766 0.79406 25.3346 0.389893 24.9564 0.389893H21.465C20.9711 0.389893 20.5062 0.631429 20.2393 1.047C19.472 2.24126 18.7862 3.52723 18.182 4.90489C17.494 6.53889 16.9063 8.23023 16.419 9.97889C15.9603 11.7276 15.602 13.4906 15.344 15.2679C15.1147 17.0166 15 18.6936 15 20.2989C15 23.6816 15.4873 27.0069 16.462 30.2749C17.3839 33.2778 18.6447 36.1476 20.2444 38.8842C20.508 39.3352 20.9945 39.6059 21.5169 39.6059H24.9243C25.3 39.6059 25.542 39.2067 25.3744 38.8705C23.9325 35.978 22.868 33.0125 22.181 29.9739C21.4643 26.6772 21.106 23.3089 21.106 19.8689C21.106 16.4862 21.4787 13.1609 22.224 9.89289C22.909 6.86329 23.9692 3.94263 25.4046 1.13091Z"
          strokeDasharray={strokeDasharray}
          strokeLinecap={strokeLinecap}
          stroke={stroke}
          fill={backgroundColor}
          strokeWidth={strokeWidth}
        />
      </svg>
    </div>
  )
}

export default LeftParenthesis
