import { z } from 'zod'

const colorHex = z.string().regex(/^#([0-9a-fA-F]{3}){1,2}$/)

const baseObject = z.object({
  id: z.string().min(1),
  x: z.number(),
  y: z.number(),
  width: z.number().positive(),
  height: z.number().positive(),
  rotate: z.number(),
  zIndex: z.number().int().nonnegative(),
})

const textObject = baseObject.extend({
  type: z.literal('text'),
  props: z.object({
    text: z.string(),
    fontSize: z.number().positive(),
    color: colorHex,
  }),
})

const imageObject = baseObject.extend({
  type: z.literal('image'),
  props: z.object({
    src: z.string().min(1),
    alt: z.string().optional().default(''),
  }),
})

const buttonObject = baseObject.extend({
  type: z.literal('button'),
  props: z.object({
    label: z.string().min(1),
    href: z.string().optional().default(''),
    color: colorHex.optional(),
    background: colorHex.optional(),
  }),
})

export const objectSchema = z.discriminatedUnion('type', [textObject, imageObject, buttonObject])
export type WObject = z.infer<typeof objectSchema>

export const layerSchema = z.object({
  id: z.string().min(1),
  name: z.string().min(1),
  visible: z.boolean(),
  locked: z.boolean(),
  objects: z.array(objectSchema),
})

export const frameSchema = z.object({
  id: z.string().min(1),
  width: z.number().positive(),
  height: z.number().positive(),
  background: colorHex,
  layers: z.array(layerSchema),
})
export type Frame = z.infer<typeof frameSchema>