import type { CSSProperties } from 'vue'
import type { RenderComponentProps } from '../types'
import { NodeUtils } from '@/hooks/business/useNodeUtils'
import { EnableEnum, GradientDirectionEnum, type MxShapeStyleType } from '@/fitCore/types'

const gradientDirectionMap = {
  [GradientDirectionEnum.NORTH]: 'to top',
  [GradientDirectionEnum.EAST]: 'to right',
  [GradientDirectionEnum.SOUTH]: 'to bottom',
  [GradientDirectionEnum.WEST]: 'to left',
}

export interface UseComponentStyleReturnType {
  style: CSSProperties
  textAalign?: string
  borderColor?: string
  borderWidth?: number
  borderStyle?: string
  backgroundColor?: string
  fontFamily?: string
  color?: string
  fontSize?: number
  gradientBackgroundColor?: string
  gradientDirection?: GradientDirectionEnum
  opacity?: number
}

export function useComponentStyle(props: RenderComponentProps): UseComponentStyleReturnType {
  const result: UseComponentStyleReturnType = { style: {} }

  const nodeUtils = new NodeUtils()
  const { cellInfo } = props.config
  const { id } = cellInfo || {}
  if (!id) return result
  const cell = nodeUtils.getCellById(id)

  if (!cell) return result

  const cellState = nodeUtils.getCellState(cell)

  const {
    align,
    dashed,
    fillColor,
    fontColor,
    fontFamily,
    fontSize,
    gradientColor,
    gradientDirection,
    opacity,
    // shadow,
    strokeColor,
    // sketch,
    strokeWidth = 1,
  } = cellState.style as MxShapeStyleType

  const getBackgroundColor = () => {
    return {
      background: gradientColor !== 'none'
        ? gradientDirection === GradientDirectionEnum.RADIAL
          ? `radial-gradient(${fillColor}, ${gradientColor})`
          : `linear-gradient(${gradientDirectionMap[gradientDirection]}, ${fillColor}, ${gradientColor})`
        : fillColor,
    } as CSSProperties
  }

  const getBorderStyle = () => {
    return {
      borderColor: strokeColor,
      borderWidth: strokeWidth,
      borderStyle: strokeColor
        ? dashed === EnableEnum.ENABLE
          ? 'dashed'
          : 'solid'
        : 'none',
    } as CSSProperties
  }

  return {
    style: {
      textAlign: align,
      opacity,
      fontSize,
      fontFamily,
      color: fontColor,
      ...getBorderStyle(),
      ...getBackgroundColor(),
    },
    textAalign: align,
    borderColor: strokeColor,
    borderWidth: strokeWidth,
    borderStyle: dashed === EnableEnum.ENABLE ? 'dashed' : 'solid',
    backgroundColor: fillColor,
    fontFamily,
    color: fontColor,
    fontSize,
    gradientBackgroundColor: gradientColor,
    gradientDirection,
    opacity,
  }
}