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

declare module '*.vue' {
  import type { DefineComponent } from 'vue';
  // eslint-disable-next-line
  const component: DefineComponent<{}, {}, any>;
  export default component;
}

type ActionLinkType
  = 'SCROLL_TO_TILE'
    | 'HYPER_LINK'
    | 'MAIL_LINK'
    | 'TEL_LINK'
    | 'GO_TO_STORE'
    | 'GO_TO_STORE_LINK'
    | 'GO_TO_PAGE'
    | 'GO_TO_CATEGORY'
    | 'GO_TO_CATEGORY_LINK';

interface ButtonContentData {
  readonly title: string;
  readonly type: ActionLinkType;
  readonly link?: string;
  readonly email?: string;
  readonly phone?: string;
  readonly tileId?: string;
  readonly pageId?: string;
  readonly pageUrl?: 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;
}

interface ActionLink {
  id: string;
  title?: string;
  type?: ActionLinkType;
  link?: string;
  email?: string;
  phone?: string;
  tileIdForScroll?: string;
  pageIdForNavigate?: string;
  showStoreCategories?: boolean;
  isSubmenuOpened?: boolean;
  categoryId?: number;
  performAction?: () => void;
}

interface MenuContentData {
  readonly items: ReadonlyArray<ActionLink>;
}

type LogoType = 'TEXT' | 'IMAGE';

interface LogoContentData {
  readonly type: LogoType;
  readonly text: string;
  readonly image: ImageContentData;
}

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;
}

interface TextareaDesignData extends TextDesignData {
  readonly whiteSpace: string;
}

type CapitalizationType =
  'none'
  | 'all'
  | 'small';

interface Frame {
  visible: boolean;
  width: number | undefined;
  color: Color | GlobalColorsString | undefined;
}

interface LogoDesignData {
  font: string | GlobalFontsString | undefined;
  size: number | GlobalTextSizeString | undefined;
  bold: boolean | undefined;
  italic: boolean | undefined;
  color: Color | GlobalColorsString | undefined;
  visible: boolean;
  spacing: number | undefined;
  capitalization: CapitalizationType | undefined;
  frame: Frame | undefined;
}

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;
  readonly MENU: MenuContentData;
  readonly LOGO: LogoContentData;
};

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 ReportAbuse {
  readonly title: string;
  readonly url: string | undefined;
  readonly target: string | undefined;
}

interface MadeWith {
  readonly url: string | undefined;
  readonly target: string | undefined;
  readonly icon: string | undefined;
  readonly poweredBy: string | undefined;
  readonly company: string | undefined;
}

interface Language {
  readonly code: string;
  readonly description: string;
  readonly main: boolean;
  readonly selected: boolean;
  readonly url: string;
}

interface Account {
  readonly title: string | undefined;
  readonly url: string | undefined;
  readonly target: string | undefined;
}

interface Cart {
  readonly url: string | undefined;
  readonly count: number;
}

interface LegalPage {
  readonly title: string | undefined;
  readonly url: string | undefined;
}

interface SiteContent {
  readonly isPreviewMode: boolean;
  readonly reportAbuse?: ReportAbuse;
  readonly madeWith?: MadeWith;
  readonly languages?: Language[];
  readonly account?: Account;
  readonly cart?: Cart;
  readonly legalPages?: LegalPage[];
}

interface CategoryListComponentItem {
  readonly id: number;
  readonly name: string;
  readonly url: string;
  readonly imageUrl?: string;
  readonly thumbnailImageUrl?: string;
  readonly imageBorderInfo?: ImageBorderInfo;
  readonly alt?: string;
}

interface CategoryTree {
  readonly id: number;
  readonly name: string;
  readonly nameTranslated: Record<string, string>;
  readonly urlPath: string;
  readonly enabled: boolean;
  readonly children: CategoryTree[];
}

interface Category {
  readonly categories?: CategoryListComponentItem[];
  readonly categoryTree?: CategoryTree[];
}

interface ExternalContentData {
  readonly site?: SiteContent;
  readonly category?: Category;
}

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>;
}

interface MenuContentEditor {
  readonly type: 'MENU';
  readonly label: Record<string, string>;
  readonly items: ReadonlyArray<ActionLink>;
}

interface NavigationMenuContentEditor {
  readonly type: 'NAVIGATION_MENU';
}

interface LogoContentEditor {
  readonly type: 'LOGO';
  readonly label: Record<string, string>;
}

type ContentEditor =
  TextContentEditor
  | MultilineTextContentEditor
  | ButtonContentEditor
  | ImageContentEditor
  | ToggleContentEditor
  | SelectboxContentEditor
  | MenuContentEditor
  | NavigationMenuContentEditor
  | LogoContentEditor;

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;
  readonly LOGO: string;
  readonly DIVIDER: 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>;
}

interface LogoDesignEditor {
  readonly type: 'LOGO';
  readonly label?: string | Record<string, string>;
  defaults: Record<string, unknown>;
}

interface DividerDesignEditor {
  readonly type: 'DIVIDER';
  readonly label: string | Record<string, string>;
}

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

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

type SettingsEditor = DesignEditor | ContentEditor;
