import { AllProducts } from 'types/graphql-nodes';
import { MerchantProduct } from 'types/product';
import { UIStoreType, BasketStoreType } from 'types/stores';

export interface ShopProps {
  data: {
    products: AllProducts;
  };
}

export interface SortOptionType {
  slug: string;
  title: string;
  valueKey: number;
}

export interface ShopState {
  sort: string;
}

export interface ProductItemType {
  node: MerchantProduct;
}

export type SortType =
| 'nameASC'
| 'nameDESC'
| 'priceASC'
| 'priceDESC';

export type SortByTypes = {
  [sortType in SortType]: (a: ProductItemType, b: ProductItemType) => number;
};

export interface CheckoutProps {
  isBasketVisible: boolean;
  basketStore: BasketStoreType;
  uiStore: UIStoreType;
}

export interface InputField {
  value: string;
  data: {
    id: string;
    label: string;
    config: {
      inputType: string;
    }
  };
  rule?: string;
  error?: string | null;
}

export interface OptionType {
  slug: string;
  title: string;
  valueKey: number;
}

export interface Dropdown {
  options: OptionType[];
}

export interface FieldsType {
  [key: string]: InputField | Dropdown;
}