import React from 'react'
import { useMeasure } from 'react-use'
import { AppProps, ExtensionType } from 'src/types'
import 'src/style.css'

import {
  getRotateAngleConfig,
  getSizeConfig,
  getBasicConfig,
  getShadowConfig,
  getStrokeConfig,
  getArrowPath
} from 'src/utils'
import {
  Large_Canvas_Width
} from 'src/contants'

const Arrow: React.FC<AppProps> = (props) => {
  const {
    properties,
    theme
  } = props
  const [containerRef, { width: offsetWidth, height: offsetHeight }] = useMeasure()

  const rotateAngle = React.useMemo(() => {
    return getRotateAngleConfig(properties)
  }, [properties])

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

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

  const {
    containerWidth,
    containerHeight,
    w,
    h,
  } = React.useMemo(() => {
    return getSizeConfig(offsetWidth, offsetHeight, rotateAngle)
  }, [offsetWidth, offsetHeight, rotateAngle])

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

  // arrow
  const arrowPath = getArrowPath(
    containerWidth,
    containerHeight,
    w,
    h,
    strokeWidth
  )
  return (
    <div className='graphicsContainer' ref={containerRef}>
      {/* 箭头 */}
      <svg version="1.1"
        className="graphics"
        xmlns="http://www.w3.org/2000/svg"
        fill-rule="evenodd"
        clip-rule="evenodd"
        height={containerHeight}
        width={containerWidth}
        viewBox={`0 0 ${containerWidth} ${containerHeight}`}
        style={{ filter: shadow }}
      >
        {w > 0 && (
          <path
            d={arrowPath}
            strokeDasharray={strokeDasharray}
            strokeLinecap={strokeLinecap}
            stroke={stroke}
            fill={backgroundColor}
            strokeWidth={strokeWidth}
            transform={`rotate(${rotateAngle}, ${containerWidth / 2}, ${containerHeight / 2})`}
          />
        )}
      </svg>
    </div>
  )
}

export default Arrow
