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

const TimesSign: 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.TimesSign)
  }, [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.TimesSign)
  }, [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="M2.67629 6.21144C2.09051 6.79723 2.09051 7.74697 2.6763 8.33276L14.3435 20L2.6768 31.6667C2.09106 32.2525 2.091 33.2021 2.67668 33.7879L6.21181 37.3239C6.79758 37.9098 7.74742 37.9098 8.33325 37.324L20.0004 25.6568L31.6677 37.3241C32.2534 37.9099 33.2032 37.9099 33.789 37.3241L37.3245 33.7886C37.9103 33.2028 37.9103 32.2531 37.3245 31.6673L25.6572 20L37.3245 8.33271C37.9103 7.74692 37.9103 6.79717 37.3245 6.21139L33.789 2.67588C33.2032 2.0901 32.2534 2.0901 31.6677 2.67588L20.0004 14.3432L8.33314 2.67589C7.74735 2.0901 6.7976 2.0901 6.21181 2.67589L2.67629 6.21144Z"
          strokeDasharray={strokeDasharray}
          strokeLinecap={strokeLinecap}
          stroke={stroke}
          fill={backgroundColor}
          strokeWidth={strokeWidth}
        />
      </svg>
    </div>
  )
}

export default TimesSign
