import type {
  BaseElement,
  EditConfig,
  ElementMetadata,
} from "@/definitions/shared/base"
import type { ValidationConfig } from "@/definitions/shared/validation"

/**
 * Variants of the `boolean` element type. Each value here maps 1:1 to a
 * Vue file under `src/elements/boolean/` via the engine's registry.
 */
export type BooleanStyle = "checkbox" | "switch" | "radio" | "icon-toggle"

export interface BooleanElement extends BaseElement<`boolean.${BooleanStyle}`> {
  name: string
  label: string
  defaultValue?: boolean
  required?: boolean
  readonly?: boolean
  /** For `radio`: render the two choices on the same row. */
  inline?: boolean
  /** Override the label shown next to / on top of the control's "true" state. */
  trueLabel?: string
  /** Override the label shown next to / on top of the control's "false" state. */
  falseLabel?: string
  /** For `icon-toggle`: lucide icon name when value is true. */
  trueIcon?: string
  /** For `icon-toggle`: lucide icon name when value is false. */
  falseIcon?: string
  /** Validation rules (Laravel-style strings). */
  validation?: ValidationConfig
}

export const BooleanElementDefaults = {
  type: "boolean.checkbox",
  label: "Boolean Label",
  defaultValue: false,
  columns: 12,
  columnsSm: 12,
  columnsMd: 12,
  columnsLg: 12,
  columnsXl: 12,
} as const satisfies Partial<BooleanElement>

export const BooleanElementMetadata = {
  icon: "square-check",
  displayLabel: "True or False",
  elementCategory: "boolean",
  description:
    "Create a boolean field to store true/false values and display as a checkbox, switch, radio button, or icon toggle.",
} as const satisfies ElementMetadata

/**
 * EditConfig describes how the FormBuilder inspector renders each
 * configurable property. Each key matches a property on `BooleanElement`;
 * the value is a (loosely-typed) element spec.
 */
export const BooleanElementEditConfig = {
  label: {
    type: "input.text",
    defaultValue: "",
    label: "Label",
    columns: 12,
    section: "configuration",
  },
  name: {
    type: "picker.data-model",
    defaultValue: "",
    label: "Name",
    columns: 12,
    section: "advanced",
  },
  style: {
    type: "option-select.select",
    defaultValue: "checkbox",
    label: "Boolean Style",
    columns: 6,
    selectOptions: [
      { label: "Checkbox", value: "checkbox" },
      { label: "Switch", value: "switch" },
      { label: "Radio", value: "radio" },
      { label: "Icon Toggle", value: "icon-toggle" },
    ],
    section: "layout",
  },
  defaultValue: {
    type: "boolean.checkbox",
    label: "Default Value",
    columns: 12,
    section: "configuration",
  },
  required: {
    type: "boolean.switch",
    label: "Make item required",
    columns: 6,
    section: "configuration",
  },
  readonly: {
    type: "boolean.switch",
    label: "Make item read-only",
    columns: 6,
    section: "configuration",
  },
  inline: {
    type: "boolean.switch",
    label: "Inline Options",
    columns: 6,
    section: "layout",
    conditionParams: [{ name: "style", logic: "==", value: "radio" }],
  },
  trueLabel: {
    type: "input.text",
    label: "True Label",
    columns: 6,
    section: "configuration",
    conditionParams: [
      { name: "style", logic: "in-array", value: ["radio", "switch"] },
    ],
  },
  falseLabel: {
    type: "input.text",
    label: "False Label",
    columns: 6,
    section: "configuration",
    conditionParams: [
      { name: "style", logic: "in-array", value: ["radio", "switch"] },
    ],
  },
  trueIcon: {
    type: "picker.icon",
    label: "True Icon",
    columns: 6,
    section: "configuration",
    conditionParams: [{ name: "style", logic: "==", value: "icon-toggle" }],
  },
  falseIcon: {
    type: "picker.icon",
    label: "False Icon",
    columns: 6,
    section: "configuration",
    conditionParams: [{ name: "style", logic: "==", value: "icon-toggle" }],
  },
} as const satisfies EditConfig

export const BooleanStyleMetadataMap: Partial<Record<BooleanStyle, { displayLabel: string; description: string }>> = {
  checkbox: { displayLabel: "Checkbox", description: "A standard checkbox for toggling a true/false value." },
  switch: { displayLabel: "Switch", description: "A toggle switch for enabling or disabling a setting." },
  radio: { displayLabel: "Radio", description: "Radio buttons showing true/false as two labelled choices." },
  "icon-toggle": { displayLabel: "Icon Toggle", description: "An icon that toggles between two states with custom icons." },
}
