import { MerchantProduct, ProductVariation, DeliveryConfig } from 'types/product';
import { FieldId } from 'templates/checkout/checkout.types';
import { Image } from 'react-images';

export interface UIStoreType {
  isBasketVisible: boolean;
  isMobileMenuVisible: boolean;
  isLightboxVisible: boolean;
  lightBoxImageIndex: number;
  lightBoxImages: Array<Image>;
  lightBoxLayoutId: string;
  updateLightboxIndex: (index: number) => void;
  toggleLightbox: () => void;
  toggleBasket: () => void;
  toggleMobileMenu: () => void;
  closeBasket: () => void;
  closeMobileMenu: () => void;
}

export interface BasketStoreType {
  totalPrice: number;
  totalItems: number;
  totalItemTypes: number;
  basket: BasketType;
  deliveryConfig: DeliveryConfig;
  increaseQuantity: (productId: string, variationType: ProductVariation) => void;
  decreaseQuantity: (productId: string, variationType: ProductVariation) => void;
  removeItem: (basketIndex: string, variationType: ProductVariation) => void;
  updateMessage: (basketIndex: number, orderIndex: number, message: string) => void;
  addToBasket: (
      product: MerchantProduct,
      variationType: ProductVariation
  ) => void;
}

export interface BasketType {
  [id: number]: BasketItemType;
}

export interface OrderItemType {
  productId: string;
  variationId: string;
  price: number;
  message: string;
}

export interface BasketItemType {
  product: MerchantProduct;
  quantity: number;
  variationType: ProductVariation;
  total: number;
  orderItems: OrderItemType[];
}

export interface CheckoutStoreCheckoutField {
  value: string;
  error: string | null;
}

export interface CheckoutStoreForm {
  fields: { [fieldID in FieldId]: CheckoutStoreCheckoutField };
  meta: {
    isValid: boolean | void,
    error: string | null;
  };
}

export interface CheckoutStoreType {
  onChange: () => void;
  onSelectChange: () => void;
  onSubmit: () => void;
  form: CheckoutStoreForm;
}