import { DfInteractiveBaseConfig } from '@allianz/taly-core/dynamic-form';

/**
 * Definition of the type - dynamic tile
 */
export const DfTileTypeName = 'TILE';

/**
 * Tile width options for fixed-width layout mode
 */
export const TileWidth = {
  Small: 'small',
  Medium: 'medium',
  Large: 'large'
} as const;
type TileWidth = (typeof TileWidth)[keyof typeof TileWidth];

/**
 * Tile layout direction options
 */
export const TileLayoutDirection = {
  Auto: 'auto',
  Horizontal: 'horizontal',
  Vertical: 'vertical'
} as const;
type TileLayoutDirection = (typeof TileLayoutDirection)[keyof typeof TileLayoutDirection];

/**
 * Definition of a tile option
 */
export interface DfTile {
  /**
   * Value of the tile option to be used as a form value when the tile is selected.
   */
  value: string;

  /**
   * The label to be displayed on the tile.
   * It's translatable by default and supports string interpolation.
   * @examples ["Option 1", "My option {$['bb-pgr-simple'].person.firstName}"]
   */
  label: string;

  /**
   * The hint text to be displayed under the label on the tile.
   * It's translatable by default and supports string interpolation.
   * @examples ["Hint 1", "My hint {$['bb-pgr-simple'].person.firstName}"]
   */
  hint?: string;

  /**
   * Name of the icon representing the tile option.
   * Available icon names can be found in the NDBX documentation: https://ngx-brand-kit.frameworks.allianz.io/documentation/icon/overview.
   * @examples ["product-car", "product-house"]
   */
  icon?: string;

  /**
   * The id used to select the element in the tests (unit test, e2e testing)
   */
  testId?: string;
}

export interface DfTileAutogridLayout extends DfTileBaseLayout {
  useAutogrid: true;

  /**
   * Maximum number of columns when autogrid is enabled.
   * Only applicable when `useAutogrid` is true.
   * @default 4
   */
  maxColumns?: 1 | 2 | 3 | 4 | 5 | 6 | 7;
}

export interface DfTileFixedWidthLayout extends DfTileBaseLayout {
  useAutogrid?: false;

  /**
   * Width of the tiles in the group.
   * Only applicable when `useAutogrid` is `false`.
   * @default "small"
   */
  tileWidth?: TileWidth;
}

export type DfTileLayout = DfTileAutogridLayout | DfTileFixedWidthLayout;

/**
 * Layout configuration for the tile group
 */
interface DfTileBaseLayout {
  /**
   * Whether to use Aquila's autogrid layout mode.
   * When `true`, tiles fill available space automatically using `NxTileGroupComponent`'s autoGrid feature.
   * When `false` fixed-width tiles are used.
   * @default false
   */
  useAutogrid?: boolean;

  /**
   * The layout orientation (`horizontal` or `vertical`) of tiles in the group (for both mobile and desktop).
   * `auto` will use vertical for desktop and horizontal for mobile.
   * @default "auto"
   */
  tileLayout?: TileLayoutDirection;
}

interface DfTileBaseConfig extends Omit<DfInteractiveBaseConfig, 'hint' | 'columnSpan'> {
  /**
   * Specifies the type of the field as `TILE`.
   */
  type: typeof DfTileTypeName;

  /**
   * This field's label.
   * It's translatable by default and supports string interpolation.
   * @examples ["My label", "My label {$['bb-pgr-simple'].person.firstName}"]
   */
  label: string;

  /**
   * Configuration for all tile options to be displayed.
   * For the best user experience, retail journeys should not have more than 6 options.
   */
  options: DfTile[];

  /**
   * The layout configuration for the tile group.
   */
  layout?: DfTileLayout;
}

export interface DfTileSingleSelectConfig extends DfTileBaseConfig {
  /**
   * Whether multiple tiles can be selected at the same time.
   * When `false`, only one tile can be selected (FormControl value is a string).
   * When `true`, multiple tiles can be selected (FormControl value is an array).
   * @default false
   */
  multiSelect?: false;

  /**
   * The field's initial value.
   *
   * If set, the field will be pre-filled with / pre-set to this value.
   */
  value?: string;
}

export interface DfTileMultiSelectConfig extends DfTileBaseConfig {
  /**
   * Whether multiple tiles can be selected at the same time.
   * When `false`, only one tile can be selected (FormControl value is a string).
   * When `true`, multiple tiles can be selected (FormControl value is an array).
   * @default false
   */
  multiSelect: true;

  /**
   * The field's initial value.
   *
   * If set, the field will be pre-filled with / pre-set to this value.
   */
  value?: string[];
}

/**
 * Configuration for a dynamic tile field.
 */
export type DfTileConfig = DfTileSingleSelectConfig | DfTileMultiSelectConfig;