import { resolveSize, useTheme, type ViewStyle } from "@/components/theme/ThemeDefine";
import { solveUrl } from "@/components/theme/ThemeTools";

export interface BackgroundBoxProps {
  /**
   * 背景颜色（1）。
   * 
   * 格式：字符串格式或主题中定义的颜色预设。
   */
  color1?: string;
  /**
   * 背景颜色（2）。
   * 
   * 格式：字符串格式或主题中定义的颜色预设。
   */
  color2?: string;
  /**
   * 背景颜色（3）。
   * 
   * 格式：字符串格式或主题中定义的颜色预设。
   */
  color3?: string;
  /**
   * 背景颜色（2）位置。
   * 
   * 格式：50% 表示颜色（2）位置为50%，即颜色（2）在背景中间。
   */
  color2Position?: string;
  /**
   * 圆角。
   */
  radius?: string | number;
  /**
   * 背景渐变角度。
   * 只有 color1 和 color2 都定义时有效。
   *
   * 格式：角度（0-360）。
   */
  gradientAngle?: number;
  /**
   * 背景图片。
   */
  backgroundImage?: string;
  /**
   * 背景填充方式。
   *
   * 格式：
   * - fillW：横向填充，高度变化。
   * - fillH：纵向填充，宽度变化。
   * - none：不填充。
   */
  backgroundFillType?: 'none'|'fillH'|'fillW';
  /**
   * 背景填充大小。
   */
  backgroundSize?: string;
  /**
   * 背景填充位置。
   */
  backgroundPosition?: string;
  /**
   * 背景图片九宫格裁剪大小。
   *
   * 格式：
   * - 数组：[ top, right, bottom, left ]
   */
  backgroundCutBorder?: Array<number|string> | string | number;
  /**
   * 背景图片九宫格渲染大小。
   *
   * 格式：
   * - 数组：[ top, right, bottom, left ]
   */
  backgroundCutBorderSize?: Array<number|string> | string | number;
}

export function useBackgroundBoxStyleMaker(props: BackgroundBoxProps) {

  const theme = useTheme();
  
  function makeStyle() {
    const o : ViewStyle = {}
    if (props.radius) {
      o.borderRadius = theme.resolveThemeSize(props.radius);
    }
    if (props.color1 !== undefined && (props.color2 !== undefined || props.color3 !== undefined)) {
      // 支持 color2Position, color3
      if (props.color3 !== undefined) {
        // 当有 color3 时，支持三色渐变
        const colorStops = [
          `${theme.resolveThemeColor(props.color1)} 0%`,
          props.color2Position !== undefined
            ? `${theme.resolveThemeColor(props.color2)} ${props.color2Position}`
            : `${theme.resolveThemeColor(props.color2)} 50%`,
          `${theme.resolveThemeColor(props.color3)} 100%`
        ];
        o.background = `linear-gradient(${props.gradientAngle || 180}deg, ${colorStops.join(', ')})`;
      } else {
        // 仅 color1/color2 时，支持 color2Position
        if (props.color2Position !== undefined) {
          o.background = `linear-gradient(${props.gradientAngle || 180}deg, ${theme.resolveThemeColor(props.color1)} 0%, ${theme.resolveThemeColor(props.color2)} ${props.color2Position})`;
        } else {
          o.background = `linear-gradient(${props.gradientAngle || 180}deg, ${theme.resolveThemeColor(props.color1)}, ${theme.resolveThemeColor(props.color2)})`;
        }
      }
  
    } else if (props.backgroundImage) {
      const b = props.backgroundCutBorder;
      let s = props.backgroundCutBorderSize;
      if (!s) {
        if (Array.isArray(b)) {
          s = b.map((i) => resolveSize(i) as any);
        } else {
          s = resolveSize(b) as any;
        }
      }
      if (b) {
        o.borderImageSource = solveUrl(props.backgroundImage);
        o.borderImageSlice =  Array.isArray(b) ? `${b[0]} ${b[1]} ${b[2]} ${b[3]} fill` : `${b} fill`;
        o.borderImageWidth = Array.isArray(s) ? `${theme.resolveSize(s[0])} ${theme.resolveSize(s[1])} ${theme.resolveSize(s[2])} ${theme.resolveSize(s[3])}` : `${theme.resolveSize(s)}`;
        o.borderImageRepeat = 'stretch';
      } else {
        o.backgroundImage = solveUrl(props.backgroundImage);
        o.backgroundPosition = props.backgroundPosition;
        o.backgroundRepeat = "no-repeat";
        switch (props.backgroundFillType) {
          case 'fillW':
            o.backgroundSize = `${props.backgroundSize} auto`;
            break;
          case 'fillH':
            o.backgroundSize = `auto ${props.backgroundSize}`;
            break;
          case 'none':
            o.backgroundSize = `${props.backgroundSize}`;
            break;
        }
      }
    } else if (props.color1) {
      o.backgroundColor = theme.resolveThemeColor(props.color1);
    } else if (props.color2) {
      o.backgroundColor = theme.resolveThemeColor(props.color2);
    }
    return o;
  }
  return {
    makeStyle,
  }
}