/// <reference types="vite/client" />

declare module '*.vue' {
    import type { DefineComponent } from 'vue';

    const component: DefineComponent<{}, {}, any>;
    export default component;
}

type ButtonType =
    'SCROLL_TO_TILE'
    | 'HYPER_LINK'
    | 'MAIL_LINK'
    | 'TEL_LINK'
    | 'GO_TO_STORE_LINK';

interface ButtonContentData {
    readonly title: string;
    readonly buttonType: ButtonType;
    readonly link?: string;
    readonly email?: string;
    readonly phone?: string;
    readonly tileId?: string;
}

interface ImageInfoData {
    readonly url: string;
    readonly width: number;
    readonly height: number;
}

interface ImageBorderInfoData {
    readonly homogeneity: boolean;
    readonly color: {
        readonly r: number;
        readonly g: number;
        readonly b: number;
        readonly a: number;
    };
}

interface ImageContentData {
    readonly bucket: string;
    readonly borderInfo: ImageBorderInfoData;
    readonly set: Record<string, ImageInfoData>;
}

interface ToggleContentData {
    readonly enabled: boolean;
}

type GlobalColorsString =
  'global.color.title' |
  'global.color.body' |
  'global.color.button' |
  'global.color.link' |
  'global.color.background';

type GlobalFontsString =
  'global.fontFamily.title' |
  'global.fontFamily.body';

type GlobalTextSizeString =
  'global.textSize.title' |
  'global.textSize.subtitle' |
  'global.textSize.body';

interface HSLColor {
    h: number;
    s: number;
    l: number;
    a: number;
}
interface RGBAColor {
    r: number;
    g: number;
    b: number;
    a: number;
}

interface Color {
    raw: string;
    hex: string;
    hsl: HSLColor;
    rgba: RGBAColor;
    auto?: boolean;
}

interface SolidColor {
    color: Color | GlobalColorsString | undefined;
}

interface GradientColor {
    fromColor: Color | GlobalColorsString| undefined;
    toColor: Color | GlobalColorsString| undefined;
}

interface TextDesignData {
    font: string | GlobalFontsString | undefined;
    size: number | GlobalTextSizeString | undefined;
    bold: boolean | undefined;
    italic: boolean | undefined;
    color: Color | GlobalColorsString | undefined;
    visible: boolean;
}

type ButtonAppearance =
    'solid-button'
    | 'outline-button'
    | 'text-link';

type ButtonSize =
    'small'
    | 'medium'
    | 'large';

type ButtonStyle =
    'round-corner'
    | 'rectangle'
    | 'pill';

interface ButtonDesignData {
    appearance: ButtonAppearance | undefined;
    font: string | GlobalFontsString | undefined;
    size: ButtonSize | undefined;
    style: ButtonStyle | undefined;
    color: Color | GlobalColorsString | undefined;
    visible: boolean;
}

type OverlayType =
    'solid'
    | 'gradient'
    | 'none';

interface Overlay {
    type: OverlayType | undefined;
    solid: SolidColor | undefined;
    gradient: GradientColor | undefined;
}

interface ImageDesignData {
    overlay: Overlay | undefined;
    visible: boolean;
}

interface SelectboxDesignData {
    value: string | undefined;
}

interface ToggleDesignData {
    enabled: boolean | undefined;
}

type BackgroundType =
    'solid'
    | 'gradient';

interface Background {
    type: BackgroundType | undefined;
    solid: SolidColor | undefined;
    gradient: GradientColor | undefined;
}

interface BackgroundDesignData {
    background: Background | undefined;
}

type MapEditorContentTypes = {
    readonly INPUTBOX: string;
    readonly TEXTAREA: string;
    readonly BUTTON: ButtonContentData;
    readonly IMAGE: ImageContentData;
    readonly TOGGLE: ToggleContentData;
    readonly SELECTBOX: string;
};

interface InputboxContentEditor {
    readonly type: 'INPUTBOX';
    readonly label: Record<string, string>;
    readonly placeholder: Record<string, string>;
}

interface TextareaContentEditor {
    readonly type: 'TEXTAREA';
    readonly label: Record<string, string>;
    readonly placeholder: Record<string, string>;
}

interface ButtonContentEditor {
    readonly type: 'BUTTON';
    readonly label: Record<string, string>;
}

interface ImageContentEditor {
    readonly type: 'IMAGE';
    readonly label: Record<string, string>;
}

interface ToggleContentEditor {
    readonly type: 'TOGGLE';
    readonly label: Record<string, string>;
    readonly description?: Record<string, string>;
}

interface SelectboxContentOption {
    readonly value: string;
    readonly label: Record<string, string>;
}

interface SelectboxContentEditor {
    readonly type: 'SELECTBOX';
    readonly label: Record<string, string>;
    readonly placeholder: Record<string, string>;
    readonly description?: Record<string, string>;
    readonly options: ReadonlyArray<SelectboxOption>;
}

type ContentEditor =
    TextContentEditor
    | MultilineTextContentEditor
    | ButtonContentEditor
    | ImageContentEditor
    | ToggleContentEditor
    | SelectboxContentEditor;

type InferContentType<T extends Record<string, ContentEditor>> = {
    readonly [P in keyof T]: MapEditorContentTypes[T[P]['type']]
}

type MapEditorDesignTypes = {
    readonly TEXT: string;
    readonly BUTTON: string;
    readonly IMAGE: string;
    readonly TOGGLE: string;
    readonly SELECTBOX: string;
    readonly BACKGROUND: string;
    readonly COLOR_PICKER: string;
};

interface TextDesignEditor {
    readonly type: 'TEXT';
    readonly label: string | Record<string, string>;
    defaults: Record<string, unknown>;
}

interface ButtonDesignEditor {
    readonly type: 'BUTTON';
    readonly label: string | Record<string, string>;
    defaults: Record<string, unknown>;
}

interface ImageDesignEditor {
    readonly type: 'IMAGE';
    readonly label: string | Record<string, string>;
    defaults: Record<string, unknown>;
}

interface ToggleDesignEditor {
    readonly type: 'TOGGLE';
    readonly label: string | Record<string, string>;
    defaults: Record<string, unknown>;
}

interface SelectboxDesignEditor {
    readonly type: 'SELECTBOX';
    readonly label: string | Record<string, string>;
    defaults: Record<string, unknown>;
}

interface BackgroundDesignEditor {
    readonly type: 'BACKGROUND';
    readonly label: string | Record<string, string>;
    defaults: Record<string, unknown>;
}

interface ColorPickerDesignEditor {
    readonly type: 'COLOR_PICKER';
    defaults: Record<string, unknown>;
}

type DesignEditor =
    TextDesignEditor
    | ButtonDesignEditor
    | ImageDesignEditor
    | ToggleDesignEditor
    | SelectboxDesignEditor
    | BackgroundDesignEditor
    | ColorPickerDesignEditor;

type InferDesignType<T extends Record<string, DesignEditor>> = {
    readonly [P in keyof T]: MapEditorDesignTypes[T[P]['type']]
}
