import { AllProducts } from 'types/graphql-nodes';
import { MerchantProduct } from 'types/product';
import { UIStoreType } from 'types/stores';
import BasketStore from 'stores/basket-store';
import CheckoutStore from 'stores/checkout-store';

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: BasketStore;
  checkoutStore: CheckoutStore;
  uiStore: UIStoreType;
}

export enum FieldType {
  TextField = 'TextField',
  TextArea = 'TextArea',
  Dropdown = 'Dropdown',
  TextCaption = 'TextCaption'
}

export type FieldId =
  | 'billingAddressFirstName'
  | 'billingAddressLastName'
  | 'email'
  | 'billingAddressPhone'
  | 'billingAddressAddress1'
  | 'billingAddressAddress2'
  | 'billingAddressBusinessName'
  | 'billingAddressCity'
  | 'billingAddressZipCode'
  | 'shippingAddressBusinessName'
  | 'shippingAddressFirstName'
  | 'shippingAddressLastName'
  | 'shippingAddressPhone'
  | 'shippingAddressAddress1'
  | 'shippingAddressAddress2'
  | 'shippingAddressBusinessName'
  | 'shippingAddressCity'
  | 'shippingAddressZipCode'
  | 'orderDeliveryInstructions'
  | 'orderDeliveryNotHome';

export interface ValidatedField {
  fieldType: FieldType;
  rule?: string | null;
  data: {
    id: FieldId;
    label?: string;
    config?: {
      inputType?: 'textInput' | 'email' | 'tel';
      width?: string | string[];
    }
  };
}

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

export interface Dropdown extends ValidatedField {
  placeholder?: string;
  options: DropdownOption[];
}

export interface TextBlock {
  fieldType: FieldType;
  copy: string;
}

export type CheckoutFieldType =
  | ValidatedField
  | Dropdown
  | TextBlock;

export interface CheckoutFieldGroup {
  title: string;
  fields: (CheckoutFieldType)[]
}