import {
  mergeItemConfiguration,
  mergeButtonConfiguration,
} from "../mergeStyles";

const base = {
  background: {
    defaultColor: "transparent",
    focusedColor: "rgba(62, 62, 62, 1)",
    cornerRadius: 12,
  },
  image: {
    width: 48,
    height: 48,
    borderWidth: 1,
    borderColor: "rgba(255, 255, 255, 0.1)",
    cornerRadius: 6,
  },
  nowPlayingAsset: {},
  nowPlayingLabel: { fontColor: "#fff", fontSize: 12 },
  textLabel1: { fontColor: "#fff", fontSize: 15 },
  textLabel2: { fontColor: "#999", fontSize: 13 },
};

describe("mergeItemConfiguration background", () => {
  it("applies Studio focus background to focusedColor", () => {
    const merged = mergeItemConfiguration(base as any, {
      background: {
        default: { backgroundColor: "transparent" },
        focused: { backgroundColor: "#FF3B30" },
      },
    });

    expect(merged.background.defaultColor).toBe("transparent");
    expect(merged.background.focusedColor).toBe("#FF3B30");
  });

  it("accepts focus alias bucket from parser output", () => {
    const merged = mergeItemConfiguration(base as any, {
      background: {
        default: { backgroundColor: "transparent" },
        focus: { backgroundColor: "#00FF66" },
      },
    });

    expect(merged.background.focusedColor).toBe("#00FF66");
  });

  it("merges text label lineHeight from Studio keys", () => {
    const merged = mergeItemConfiguration(base as any, {
      textLabel1: {
        default: { fontSize: 28, lineHeight: 40 },
      },
    });

    expect(merged.textLabel1.fontSize).toBe(28);
    expect(merged.textLabel1.lineHeight).toBe(40);
  });

  it("merges background padding from Studio keys", () => {
    const merged = mergeItemConfiguration(base as any, {
      background: {
        default: {
          backgroundColor: "#2E7D32",
          paddingTop: 32,
          paddingBottom: 32,
          paddingLeft: 40,
          paddingRight: 40,
        },
      },
    });

    expect(merged.background.paddingTop).toBe(32);
    expect(merged.background.paddingBottom).toBe(32);
    expect(merged.background.paddingLeft).toBe(40);
    expect(merged.background.paddingRight).toBe(40);
    // Default-only override must not steal the base focused highlight color.
    expect(merged.background.focusedColor).toBe("rgba(62, 62, 62, 1)");
  });

  it("preserves base focusedColor when only default background is set", () => {
    const merged = mergeItemConfiguration(base as any, {
      background: {
        default: { backgroundColor: "#2E7D32" },
      },
    });

    expect(merged.background.defaultColor).toBe("#2E7D32");
    expect(merged.background.focusedColor).toBe("rgba(62, 62, 62, 1)");
  });

  it("applies Studio checkbox assets onto checkboxAssets", () => {
    const merged = mergeItemConfiguration(base as any, {
      checkbox: {
        default: {
          asset: "https://placehold.co/24x24/FF3B30/FFFFFF/png?text=CB",
          checkedAsset: "https://placehold.co/24x24/FFD60A/000000/png?text=CK",
        },
      },
    });

    expect(merged.checkboxAssets?.asset).toBe(
      "https://placehold.co/24x24/FF3B30/FFFFFF/png?text=CB"
    );

    expect(merged.checkboxAssets?.checkedAsset).toBe(
      "https://placehold.co/24x24/FFD60A/000000/png?text=CK"
    );
  });

  it("applies Studio reorder/remove assets onto actionButtonAssets", () => {
    const merged = mergeItemConfiguration(base as any, {
      actionButtons: {
        default: {
          removeAsset: "https://placehold.co/24x24/00FF00/000000/png?text=RM",
          dragAsset: "https://placehold.co/24x24/FF3B30/FFFFFF/png?text=RH",
        },
      },
    });

    expect(merged.actionButtonAssets?.removeAsset).toBe(
      "https://placehold.co/24x24/00FF00/000000/png?text=RM"
    );

    expect(merged.actionButtonAssets?.dragAsset).toBe(
      "https://placehold.co/24x24/FF3B30/FFFFFF/png?text=RH"
    );
  });
});

describe("mergeButtonConfiguration background", () => {
  const buttonBase = {
    background: {
      defaultColor: "#FFFFFF",
      focusedColor: "#E0E0E0",
      inactiveColor: "#CCCCCC",
      cornerRadius: 12,
      paddingTop: 12,
      paddingRight: 12,
      paddingBottom: 12,
      paddingLeft: 12,
      horizontalGutter: 8,
    },
    title: {
      fontColor: "#000000",
      focusedFontColor: "#000000",
      inactiveFontColor: "#666666",
      iosFontFamily: "SFProText-Semibold",
      androidFontFamily: "Roboto-Medium",
      fontSize: 15,
      lineHeight: 24,
      iosLetterSpacing: 0,
      androidLetterSpacing: 0,
      textTransform: "default" as const,
    },
    icons: {
      width: 24,
      height: 24,
      leadingIcon: { enabled: true },
    },
  };

  it("applies Studio button focus background to focusedColor", () => {
    const merged = mergeButtonConfiguration(buttonBase as any, {
      background: {
        default: { backgroundColor: "#FFFFFF" },
        focused: { backgroundColor: "#00FF00" },
      },
    });

    expect(merged.background.defaultColor).toBe("#FFFFFF");
    expect(merged.background.focusedColor).toBe("#00FF00");
  });

  it("applies Studio button title lineHeight", () => {
    const merged = mergeButtonConfiguration(buttonBase as any, {
      title: {
        default: { fontColor: "#000000", fontSize: 15, lineHeight: 40 },
      },
    });

    expect(merged.title.lineHeight).toBe(40);
    expect(merged.title.fontSize).toBe(15);
  });

  it("applies Studio button background padding", () => {
    const merged = mergeButtonConfiguration(buttonBase as any, {
      background: {
        default: {
          backgroundColor: "#FFFFFF",
          paddingTop: 32,
          paddingRight: 20,
          paddingBottom: 8,
          paddingLeft: 4,
        },
      },
    });

    expect(merged.background.paddingTop).toBe(32);
    expect(merged.background.paddingRight).toBe(20);
    expect(merged.background.paddingBottom).toBe(8);
    expect(merged.background.paddingLeft).toBe(4);
    expect(merged.background.focusedColor).toBe("#E0E0E0");
  });

  it("preserves base button focusedColor when only default background is set", () => {
    const merged = mergeButtonConfiguration(buttonBase as any, {
      background: {
        default: { backgroundColor: "#ABCDEF" },
      },
    });

    expect(merged.background.defaultColor).toBe("#ABCDEF");
    expect(merged.background.focusedColor).toBe("#E0E0E0");
  });

  it("applies Studio create-new leading icon asset", () => {
    const merged = mergeButtonConfiguration(buttonBase as any, {
      leadingIcon: {
        default: {
          asset: "https://placehold.co/24x24/FF00FF/FFFFFF/png?text=CN",
        },
      },
    });

    expect(merged.icons.leadingIcon.asset).toBe(
      "https://placehold.co/24x24/FF00FF/FFFFFF/png?text=CN"
    );
  });

  it("applies Studio button title typography (fontFamily, letterSpacing, textTransform)", () => {
    const merged = mergeButtonConfiguration(buttonBase as any, {
      title: {
        default: {
          fontFamily: "CustomFont",
          letterSpacing: -0.5,
          textTransform: "uppercase",
        },
      },
    });

    expect(merged.title.iosFontFamily).toBe("CustomFont");
    expect(merged.title.androidFontFamily).toBe("CustomFont");
    expect(merged.title.iosLetterSpacing).toBe(-0.5);
    expect(merged.title.androidLetterSpacing).toBe(-0.5);
    expect(merged.title.textTransform).toBe("uppercase");
  });
});