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 DivisionSign: React.FC<AppProps> = (props) => {
  const {
    properties,
    theme
  } = props
  const [containerRef, { width: offsetWidth, height: offsetHeight }] = useMeasure()

  const {
    borderColor,
    backgroundColor,
  } = React.useMemo(() => {
    return getBasicConfig(properties, theme, ExtensionType.DivisionSign)
  }, [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.DivisionSign)
  }, [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
          fill-rule="evenodd"
          clip-rule="evenodd"
          d="M25 6C25 8.76142 22.7614 11 20 11C17.2386 11 15 8.76142 15 6C15 3.23858 17.2386 1 20 1C22.7614 1 25 3.23858 25 6ZM0 17.5C0 16.6716 0.671573 16 1.5 16H38.5C39.3284 16 40 16.6716 40 17.5V22.5C40 23.3284 39.3284 24 38.5 24H1.5C0.671574 24 0 23.3284 0 22.5V17.5ZM20 39C22.7614 39 25 36.7614 25 34C25 31.2386 22.7614 29 20 29C17.2386 29 15 31.2386 15 34C15 36.7614 17.2386 39 20 39Z"
          strokeDasharray={strokeDasharray}
          strokeLinecap={strokeLinecap}
          stroke={stroke}
          fill={backgroundColor}
          strokeWidth={strokeWidth}
        />
      </svg>
    </div>
  )
}

export default DivisionSign
