import * as React from 'react';
import { ReactElement } from 'react';
import { StoreState } from '../services/store';
import { IMedia } from './media';
import { IProduct } from './product';

/**
 * Handler for customizing "Shop This Look" URLs
 */
export type ShopThisLookHandler = (
  source: { media: IMedia; product: IProduct },
  targetUrl: string,
) => void;

/**
 * Custom renderer for "Shop This Look" section
 */
export type DisplayCustomShopThisLook = (props: {
  react: typeof React;
  products?: IProduct[];
  media: IMedia;
  isMobile: boolean;
  context: StoreState;
}) => ReactElement;

/**
 * Props for a custom product button
 */
export type CustomProductButtonProps = {
  onClick: () => void;
};

/**
 * Custom product button renderer
 */
export type CustomProductButton = (props: CustomProductButtonProps) => ReactElement;

/**
 * Custom product buttons for different positions
 */
export type CustomProductButtons = {
  topRight?: CustomProductButton;
  bottomRight?: CustomProductButton;
  topLeft?: CustomProductButton;
  bottomLeft?: CustomProductButton;
};

/**
 * Function to generate custom product buttons for a product/media pair
 */
export type GetCustomProductButtons = (
  react: typeof React,
  product: IProduct,
  media: IMedia,
) => CustomProductButtons;

/**
 * Handler called when the "Add to cart" button is clicked on a product
 */
export type AddToCartHandler = (source: { media: IMedia; product: IProduct }) => void;