import { compose, layers } from "@synthome/sdk";

const execution = await compose(
  layers([
    { media: "https://example.com/background.mp4" },
    { media: "https://example.com/logo.png", placement: "top-right" },
  ]),
).execute();

layers([
  { media: "https://example.com/main.mp4" },
  { media: "https://example.com/webcam.mp4", placement: "pip" },
]);

layers([
  { media: "https://example.com/video.mp4" },
  { media: "https://example.com/logo.png", placement: "top-right" },
]);

layers([
  { media: "https://example.com/background.mp4" },
  { media: "https://example.com/title.png", placement: "center" },
]);

layers([
  { media: "https://example.com/main.mp4" },
  { media: "https://example.com/overlay.mp4", placement: "pip" },
]);

// 1/4 width overlay in bottom-right
layers([
  { media: "https://example.com/main.mp4" },
  { media: "https://example.com/pip.mp4", placement: "w-1/4 bottom-right" },
]);

// Half-width overlay centered
layers([
  { media: "https://example.com/background.mp4" },
  { media: "https://example.com/content.mp4", placement: "w-1/2 center" },
]);

// 1/3 height overlay at top
layers([
  { media: "https://example.com/main.mp4" },
  { media: "https://example.com/banner.png", placement: "h-1/3 top" },
]);

layers([
  { media: "https://example.com/background.mp4" },
  {
    media: "https://example.com/overlay.png",
    placement: {
      width: "300", // Fixed width in pixels
      height: "200", // Fixed height in pixels
      position: {
        x: "50", // 50px from left
        y: "100", // 100px from top
      },
    },
  },
]);

placement: {
  width: "50%",
  height: "50%",
  position: {
    x: "25%",
    y: "25%",
  },
}

placement: {
  width: "25%",
  position: { x: "100%", y: "100%" }, // Bottom-right
  padding: 20, // 20px padding from edge
}

layers([
  { media: "https://example.com/background.mp4" },
  {
    media: "https://example.com/greenscreen-speaker.mp4",
    placement: "w-1/3 bottom-right",
    chromaKey: true,
  },
]);

layers([
  { media: "https://example.com/background.mp4" },
  {
    media: "https://example.com/bluescreen.mp4",
    chromaKey: true,
    chromaKeyColor: "0000ff", // Blue instead of green
    similarity: 0.3, // Color match threshold
    blend: 0.1, // Edge blending
  },
]);

layers([
  { media: "https://example.com/background.mp4", main: true }, // Duration from this
  { media: "https://example.com/logo.png", placement: "top-right" },
]);

layers(
  [
    { media: "https://example.com/background.jpg" },
    { media: "https://example.com/overlay.png" },
  ],
  { duration: 10 }, // 10 second output
);

layers(
  [
    { media: "https://example.com/video.mp4" },
    { media: "https://example.com/overlay.png" },
  ],
  { width: 1920, height: 1080 },
);

layers([
  { media: "https://example.com/background.mp4", main: true },
  [
    // Timeline: plays sequentially on this layer
    { media: "https://example.com/title1.png", duration: 3 },
    { media: "https://example.com/title2.png", duration: 3 },
    { media: "https://example.com/title3.png", duration: 3 },
  ],
]);

layers([
  {
    media: generateVideo({
      model: videoModel("bytedance/seedance-1-pro", "replicate"),
      prompt: "Abstract flowing colors",
    }),
  },
  { media: "https://example.com/logo.png", placement: "center" },
]);

layers([
  { media: "https://example.com/video.mp4" },
  {
    media: generateImage({
      model: imageModel("google/nano-banana", "replicate"),
      prompt: "Watermark logo",
    }),
    placement: "w-1/6 bottom-right",
  },
]);

layers([
  {
    media: generateVideo({
      model: videoModel("minimax/video-01", "replicate"),
      prompt: "Ocean waves",
    }),
    main: true,
  },
  {
    media: generateVideo({
      model: videoModel("bytedance/seedance-1-pro", "replicate"),
      prompt: "Person speaking on green screen",
    }),
    placement: "w-1/3 bottom-right",
    chromaKey: true,
  },
]);