import type {
  RemoteDesignerDefinitionsLoadContext,
  RemoteFeatureDesignerDefinitions,
} from '@creatio-devkit/common';

import { RATING_PANEL_TYPE, RATING_TYPE } from './runtime-feature.ids';

const RATING_ICON = `
<svg width="72" height="64" viewBox="0 0 72 64" fill="none" xmlns="http://www.w3.org/2000/svg">
  <g transform="translate(8, 7)">
    <rect width="56" height="50" rx="3" fill="#70ACEE"/>
    <path
      d="M14 20l2.4-7.4L9 8h9.1L20.5 1 23 8h9.1l-7.4 4.6 2.4 7.4-7.1-4.6z"
      fill="#FFFFFF"
    />
    <path
      d="M39 20l2.4-7.4L34 8h9.1L45.5 1 48 8h9.1l-7.4 4.6 2.4 7.4-7.1-4.6z"
      fill="#FFFFFF"
    />
  </g>
</svg>
`.trim();

/**
 * Loads runtime designer metadata for the remote feature.
 *
 * @param context The designer load context provided by the host application.
 * @returns Runtime designer definitions for desktop and mobile view elements.
 */
export async function loadRuntimeDesignerDefinitions(
  context: RemoteDesignerDefinitionsLoadContext
): Promise<RemoteFeatureDesignerDefinitions> {
  return {
    viewElements: [
      {
        type: RATING_TYPE,
        toolbarConfig: {
          caption: 'Rating',
          icon: RATING_ICON,
        },
        defaultPropertyValues: {
          starCount: 5,
          ratingValue: 0,
          size: 'medium',
          activeColor: '#FFC107',
          inactiveColor: '#D1D5DB',
          visible: true,
          isReadOnly: false,
          isDisabled: false,
        },
        propertiesPanel: RATING_PANEL_TYPE,
      },
    ],
    mobileViewElements: [],
  };
}
