import { defineBlock } from "@juo/blocks";
import { createReactRenderer } from "@juo/blocks/react";
import type { ExtendedJSONSchema, FromSchema } from "json-schema-to-ts";
import { {{ block.clsName }} } from "./{{ block.clsName }}.tsx";

// Default copy for this block, keyed by translation key. Shipped through the
// block's `locales` loader so the editor's translation panel can override each
// string per theme/locale. The keys here are the namespace for this block.
const enTranslations = {
  title: "{{ block.framework | capitalize }} + TypeScript",
  subtitle: "Starter Block",
};

// Allow the juo-specific schema keywords used below. `format: "color"` is a
// standard JSON Schema keyword and needs no extension.
type ExtendedSchema = ExtendedJSONSchema<{
  "x-juo-control-type": string;
  "x-juo-option-labels": Record<string, string>;
}>;

const schema = {
  type: "object",
  properties: {
    props: {
      type: "object",
      properties: {
        // `x-juo-control-type: "inline-text"` -> edited directly on the canvas
        // via <juo-text>; the edit is stored as a translation override.
        title: {
          type: "string",
          title: "Title",
          "x-juo-control-type": "inline-text",
          description: "Heading — edit inline on the canvas.",
        },
        subtitle: {
          type: "string",
          title: "Subtitle",
          "x-juo-control-type": "inline-text",
          description: "Supporting text — edit inline on the canvas.",
        },
        // `enum` -> Select control. `x-juo-option-labels` gives each option a
        // friendly label in the editor.
        buttonVariant: {
          enum: ["solid", "outline", "ghost"],
          title: "Button style",
          "x-juo-option-labels": {
            solid: "Solid",
            outline: "Outline",
            ghost: "Ghost",
          },
        },
        // `format: "color"` -> Color control
        accentColor: {
          type: "string",
          format: "color",
          title: "Accent color",
          description:
            "Color for the icons. Leave empty to use the default neutral color.",
        },
        // `x-juo-control-type: "stepper"` -> Stepper control
        initialCount: {
          type: "number",
          title: "Initial count",
          "x-juo-control-type": "stepper",
        },
      },
      required: ["title", "subtitle", "buttonVariant", "initialCount"],
      additionalProperties: false,
    },
  },
  required: ["props"],
  additionalProperties: false,
} as const satisfies ExtendedSchema;

type Schema = FromSchema<typeof schema>;
export type Props = Schema["props"];

export const {{ block.clsName }}Block = defineBlock<Schema>("{{ block.name }}", {
  group: "theme",
  schema,
  initialValue: () => ({
    props: {
      title: enTranslations.title,
      subtitle: enTranslations.subtitle,
      buttonVariant: "solid",
      accentColor: "",
      initialCount: 0,
    },
    slots: {},
  }),
  renderer: createReactRenderer({{ block.clsName }}),
  locales: {
    supported: ["en"],
    load: async () => enTranslations,
  },
});