export type WidgetStyle = {
  [breakpoint: string]: Record<string, string>;
};

export type WidgetParent = {
  id: string;
  type: 'container';
  tag: string;
  style: WidgetStyle;
};

export type ImageSizes = {
  mobile?: string;
  tablet?: string;
  desktop?: string;
  [key: string]: string | undefined;
};

export type WidgetAttribute = {
  type:
    | 'image'
    | 'link'
    | 'divider'
    | 'icon'
    | 'text'
    | 'video'
    | 'collection'
    | 'container'
    | 'slider'
    | 'slider-item'
    | string;
  tag: string;
  parentId: string;
  value?: {
    text?: string;
    src?: string;
    alt?: string;
    href?: string;
    title?: string;
    target?: string;
    url?: string;
    type?: string;
    width?: string;
    height?: string;
    autoplay?: boolean;
    controls?: boolean;
    muted?: boolean;
    loop?: boolean;
    sizes?: { [size: string]: string };
    products?: Array<Product>;
    limit?: number;
    mobileSrc?: string;
    tabletSrc?: string;
    desktopSrc?: string;
    mediaQueries?: {
      mobile?: string;
      tablet?: string;
      desktop?: string;
      [key: string]: string | undefined;
    };
  };
  style: WidgetStyle;
  insideCollection?: boolean;
  containerId?: string;
  instanceId?: string;
  items?: number;
  slidesToSlide?: number;
  showDots?: string;
  arrows?: string;
  infinite?: string;
  autoPlay?: string;
  autoPlaySpeed?: number;
  selectedSlideItem?: number;
  sliderItems?: number;
  slider?: any;
};

export type WidgetData = {
  attributes: { [key: string]: WidgetAttribute };
  name: string;
  template: string;
  slug: string;
  parent?: WidgetParent;
  children?: WidgetData[];
};

export type Product = {
  absolute_url: string;
  attribute_set: number;
  attributes: {
    [key: string]: any;
  };
  attributes_kwargs: any;
  base_code: string;
  basket_offers: Array<{
    kwargs: { show_benefit_products: boolean };
    label: string;
    listing_kwargs: {
      [key: string]: any;
    };
    pk: number;
  }>;
  currency_type: string;
  data_source: null;
  item_id?: string;
  extra_attributes: {
    [key: string]: any;
  };
  form_schema: null;
  image?: string;
  in_stock: boolean;
  is_ready_to_basket: boolean;
  name: string;
  pk: number;
  price: string;
  price_type: string;
  product_type: string;
  productimage_set: Array<{
    created_date: Date;
    image: string;
    order: number;
    pk: number;
    specialimage_set: Array<{
      [key: string]: any;
    }>;
    status: string;
  }>;
  productvideo_set: Array<{
    [key: string]: any;
  }>;
  retail_price: string;
  sku: string;
  stock: number;
  unit_type: string;
  created_date: string;
  modified_date: string;
  description?: string;
  quantity: string;
  extra_data: {
    [key: string]: any;
  };
  [key: string]: any;
};

export interface WidgetContentProps {
  widgetData: WidgetData;
  skipParentWrapper?: boolean;
  collectionData?: any[];
  collectionLimit?: number;
  selectedWidget?: any;
  onWidgetClick?: (e: React.MouseEvent) => void;
  designMode?: boolean;
  responsive?: string;
  draggable?: boolean;
  onDragStart?: (e: React.DragEvent) => void;
  onDragOver?: (e: React.DragEvent) => void;
  onDragLeave?: (e: React.DragEvent) => void;
  onDrop?: (e: React.DragEvent) => void;
}

export interface DynamicWidgetContainerProps {
  onRender?: (widgetData: WidgetData) => void;
  customRender?: (
    widgetData: WidgetData
  ) => React.ReactNode | typeof RENDER_NOTHING;
  instanceId?: string;
}

export const RENDER_NOTHING = Symbol('RENDER_NOTHING');