import React, { useState, useEffect } from 'react'
import { OrderList, useLanguage, useOrder, ToastType, useToast } from 'ordering-components/native'
import { useTheme } from 'styled-components/native';
import { useFocusEffect } from '@react-navigation/native'
import { OText, OButton } from '../shared'
import { ActiveOrders } from '../ActiveOrders'
import { PreviousOrders } from '../PreviousOrders'
import { PreviousBusinessOrdered } from './PreviousBusinessOrdered'
import { PreviousProductsOrdered } from './PreviousProductsOrdered'
import { OptionTitle, NoOrdersWrapper } from './styles'
import { OrdersOptionParams } from '../../types'
import { _setStoreData } from '../../providers/StoreUtil';
import { NotFoundSource } from '../NotFoundSource';
import {
  Placeholder,
  PlaceholderLine,
  Fade
} from "rn-placeholder";

import { View, ScrollView } from 'react-native'
import { getOrderStatus, flatArray } from '../../utils'

const OrdersOptionUI = (props: OrdersOptionParams) => {
  const {
    navigation,
    activeOrders,
    preOrders,
    orderList,
    pagination,
    titleContent,
    customArray,
    onNavigationRedirect,
    orderStatus,
    loadMoreStatus,
    loadMoreOrders,
    loadOrders,
    setOrdersLength,
    ordersLength,
    refreshOrders,
    setRefreshOrders,
    reorderState,
    handleReorder,
    handleUpdateOrderList,
    isBusiness,
    isProducts,
    businessOrderIds,
    products,
    businessesSearchList,
    hideOrders,
    BusinessControllerSkeletons,
    businesses,
    businessPaginationProps,
    handleUpdateProducts,
    handleUpdateBusinesses,
    businessId
  } = props

  const theme = useTheme();

  const [, t] = useLanguage()
  const [{ carts }] = useOrder()
  const [, { showToast }] = useToast()
  const { loading, error, orders: values } = orderList
  const [businessLoading, setBusinessLoading] = useState(true)
  const [orders, setOrders] = useState([])

  const imageFails = activeOrders
    ? theme.images.general.emptyActiveOrders
    : theme.images.general.emptyPastOrders

  const _orders = customArray || values || []
  const uniqueOrders: any = []

  useEffect(() => {
    if (loading || error) return
    const ordersReduced = _orders.map((order: any) => order?.cart_group_id
      ? _orders
        .filter((_order: any) => _order?.cart_group_id === order?.cart_group_id)
        .map((_o: any, _: any, _ordersList: any) => {
          const obj = {
            ..._o,
            id: _ordersList.map(o => o.id),
            review: _o.review,
            user_review: _o.user_review,
            total: _ordersList.reduce((acc: any, o: any) => acc + o.summary.total, 0),
            business: _ordersList.map((o: any) => o.business),
            business_id: _ordersList.map((o: any) => o.business_id),
            products: _ordersList.map((o: any) => o.products)
          }
          return obj
        }).find((o: any) => o)
      : order)
    const orders = ordersReduced?.filter((order: any) => {
      if (!order?.cart_group_id) return true
      const isDuplicate = uniqueOrders.includes(order?.cart_group_id)
      if (!isDuplicate) {
        uniqueOrders.push(order?.cart_group_id)
        return true
      }
      return false
    })
    setOrders(orders)
  }, [JSON.stringify(_orders)])

  const onProductClick = (product: any) => {
    if (product?.product_id && product?.category_id && product?.businessId &&
      product?.business.slug && product?.business.header && product?.business.logo) {
      onNavigationRedirect('ProductDetails', {
        isRedirect: 'business',
        businessId: product?.businessId,
        categoryId: product?.category_id,
        productId: product?.product_id,
        business: {
          store: product?.business.slug,
          header: product?.business.header,
          logo: product?.business.logo,
        }
      })
    } else {
      showToast(ToastType.Error, t('ERROR_FAILED_REDIRECT_IDS', 'Failed to redirect product for ids'))
    }
  }

  useEffect(() => {
    if (reorderState?.loading) return
    const _businessId = 'businessId:' + reorderState?.result?.business_id
    if (reorderState?.error) {
      if (reorderState?.result?.business_id) {
        _setStoreData('adjust-cart-products', JSON.stringify(_businessId))
        navigation.navigate('Business', { store: reorderState?.result?.business?.slug })
      }
    }
    if (!reorderState?.error && !reorderState.loading && reorderState?.result?.business_id) {
      const cartProducts = carts?.[_businessId]?.products

      const available = cartProducts.every((product: any) => product.valid)
      const orderProducts = orders.find(
        (order: any) => Array.isArray(order?.id)
          ? order?.id?.includes(reorderState?.result?.orderId)
          : order?.id === reorderState?.result?.orderId
      )?.products

      const productsFlatten = orderProducts?.length && flatArray(orderProducts)?.filter(product => product?.order_id === reorderState?.result?.orderId)

      if (available && reorderState?.result?.uuid && (cartProducts?.length === productsFlatten?.length)) {
        const multiOrders = flatArray(orderProducts)?.map(product => product.order_id)
        const params = multiOrders?.length > 1
          ? { screen: 'MultiCheckout', checkCarts: true }
          : { cartUuid: reorderState?.result.uuid }

        onNavigationRedirect && onNavigationRedirect('CheckoutNavigator', params)
      } else {
        _setStoreData('adjust-cart-products', JSON.stringify(_businessId))
        cartProducts?.length !== productsFlatten?.length && _setStoreData('already-removed', JSON.stringify('removed'))
        navigation.navigate('Business', { store: reorderState?.result?.business?.slug })
      }
    }
  }, [reorderState])

  useEffect(() => {
    if (reorderState?.error) {
      const errorMessage = (Array.isArray(reorderState?.result) || typeof reorderState?.result === 'string')
        ? reorderState?.result
        : t('CANT_REORDER_FOR_THIS_BUSINESS', 'Can’t reorder for this store, please create order manually.')
      showToast(ToastType.Error, errorMessage)
    }
  }, [reorderState])

  useFocusEffect(
    React.useCallback(() => {
      if (!businessesSearchList) {
        loadOrders(false, false, false, true)
      }
    }, [navigation])
  )

  useEffect(() => {
    const hasMore = pagination?.totalPages && pagination?.currentPage !== pagination?.totalPages
    if (loadMoreStatus && hasMore && !loading) {
      loadMoreOrders()
    }
  }, [loadMoreStatus, loading, pagination])

  useEffect(() => {
    if (loading) return

    const updateOrders = _orders.filter((order: any) => orderStatus.includes(order.status))

    if (activeOrders) {
      setOrdersLength && setOrdersLength({ ...ordersLength, activeOrdersLength: updateOrders?.length })
    } else if (!preOrders) {
      setOrdersLength && setOrdersLength({ ...ordersLength, previousOrdersLength: updateOrders?.length })
    } else {
      setOrdersLength && setOrdersLength({ ...ordersLength, preordersLength: updateOrders?.length })
    }
  }, [_orders, activeOrders, preOrders])

  useEffect(() => {
    if (refreshOrders) {
      loadOrders(false, false, false, true)
      setRefreshOrders && setRefreshOrders(false)
    }
  }, [refreshOrders])

  return (
    <>
      {!loading && ordersLength.activeOrdersLength === 0 && ordersLength.previousOrdersLength === 0 && ordersLength?.preordersLength === 0 && !activeOrders && !preOrders && (
        <NoOrdersWrapper>
          <NotFoundSource
            hideImage
            btnStyle={{ borderRadius: 8 }}
            content={t('YOU_DONT_HAVE_ORDERS', 'You don\'t have any orders')}
            btnTitle={t('ORDER_NOW', 'Order now')}
            onClickButton={() => onNavigationRedirect && (businessId ? onNavigationRedirect('Business') : onNavigationRedirect('BusinessList'))}
          />
        </NoOrdersWrapper>
      )}
      {((ordersLength?.activeOrdersLength > 0 && activeOrders) ||
        (ordersLength?.previousOrdersLength > 0 && !activeOrders && !preOrders) ||
        (ordersLength?.preordersLength > 0 && preOrders)
      ) && (
          <>
            {((titleContent && ((isBusiness && businessOrderIds?.length > 0) || isProducts)) || !titleContent) && (
              <OptionTitle titleContent={!!titleContent} isBusinessesSearchList={!!businessesSearchList}>
                <OText size={16} lineHeight={24} weight={'500'} color={theme.colors.textNormal} mBottom={10} >
                  {titleContent || (activeOrders
                    ? t('ACTIVE', 'Active')
                    : preOrders
                      ? t('PREORDERS', 'Preorders')
                      : t('PAST', 'Past'))}
                </OText>
              </OptionTitle>
            )}
          </>
        )}
      {isBusiness && !!businessesSearchList && businesses?.loading && (
        <ScrollView horizontal>
          <BusinessControllerSkeletons paginationProps={businessPaginationProps} />
        </ScrollView>
      )}
      {isBusiness && (
        <PreviousBusinessOrdered
          onNavigationRedirect={onNavigationRedirect}
          isBusinessesSearchList={!!businessesSearchList}
          businesses={businesses}
          handleUpdateBusinesses={handleUpdateBusinesses}
        />
      )}

      {isProducts && !loading && (
        <PreviousProductsOrdered
          products={products}
          onProductClick={onProductClick}
          handleUpdateProducts={handleUpdateProducts}
          isBusinessesSearchList={!!businessesSearchList}
        />
      )}
      {(loading && isProducts) && (
        <>
          {[...Array(!!businessesSearchList ? 1 : 4).keys()].map(
            (item, i) => (
              <Placeholder key={i} style={{ padding: 5, paddingLeft: !!businessesSearchList ? 0 : 40, marginBottom: !!businessesSearchList ? 38 : 0 }} Animation={Fade}>
                <View style={{ flexDirection: 'row' }}>
                  <PlaceholderLine
                    width={24}
                    height={70}
                    style={{ marginRight: 10, marginBottom: 10 }}
                  />
                  <Placeholder style={{ paddingVertical: 10 }}>
                    <PlaceholderLine width={60} style={{ marginBottom: 25 }} />
                    <PlaceholderLine width={20} />
                  </Placeholder>
                </View>
              </Placeholder>
            ),
          )}
        </>
      )}
      {!error && orders.length > 0 && !hideOrders && (
        preOrders ? (
          <ActiveOrders
            orders={orders.filter((order: any) => orderStatus.includes(order.status))}
            pagination={pagination}
            loadMoreOrders={loadMoreOrders}
            reorderLoading={reorderState?.loading}
            customArray={customArray}
            getOrderStatus={getOrderStatus}
            onNavigationRedirect={onNavigationRedirect}
            handleUpdateOrderList={handleUpdateOrderList}
          />
        ) : activeOrders ? (
          <ActiveOrders
            orders={orders.filter((order: any) => orderStatus.includes(order.status))}
            pagination={pagination}
            reorderLoading={reorderState?.loading}
            customArray={customArray}
            getOrderStatus={getOrderStatus}
            onNavigationRedirect={onNavigationRedirect}
            handleUpdateOrderList={handleUpdateOrderList}
          />
        ) : (
          <PreviousOrders
            reorderLoading={reorderState?.loading}
            orders={orders.filter((order: any) => orderStatus.includes(order.status)).sort((a: any, b: any) => a?.id < b?.id)}
            pagination={pagination}
            loadMoreOrders={loadMoreOrders}
            getOrderStatus={getOrderStatus}
            onNavigationRedirect={onNavigationRedirect}
            handleReorder={handleReorder}
            handleUpdateOrderList={handleUpdateOrderList}
            loading={loading}
          />
        )
      )}
      {loading && !hideOrders && !preOrders && (
        <>
          {!activeOrders ? (
            <Placeholder style={{ marginTop: 30 }} Animation={Fade}>
              <View style={{ width: '100%', flexDirection: 'row' }}>
                <PlaceholderLine width={20} height={70} style={{ marginRight: 20, marginBottom: 35 }} />
                <Placeholder>
                  <PlaceholderLine width={30} style={{ marginTop: 5 }} />
                  <PlaceholderLine width={50} />
                  <PlaceholderLine width={70} />
                </Placeholder>
              </View>
            </Placeholder>
          ) : (
            <View style={{ marginTop: 30 }}>
              {[...Array(5)].map((item, i) => (
                <Placeholder key={i} Animation={Fade}>
                  <View style={{ width: '100%', flexDirection: 'row' }}>
                    <PlaceholderLine width={20} height={70} style={{ marginRight: 20, marginBottom: 20 }} />
                    <Placeholder>
                      <PlaceholderLine width={30} style={{ marginTop: 5 }} />
                      <PlaceholderLine width={50} />
                      <PlaceholderLine width={20} />
                    </Placeholder>
                  </View>
                </Placeholder>
              ))}
            </View>
          )}
        </>
      )}
    </>
  )
}

export const OrdersOption = (props: OrdersOptionParams) => {
  const getAllOrders = props.activeOrders && props.pastOrders && props.preOrders

  const MyOrdersProps = {
    ...props,
    UIComponent: OrdersOptionUI,
    noGiftCardOrders: true,
    orderStatus: getAllOrders
      ? [0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15, 16, 17, 18, 19, 20, 21, 22, 23, 24, 25, 26]
      : props.preOrders ? [13] : props.activeOrders
        ? [0, 3, 4, 7, 8, 9, 14, 18, 19, 20, 21, 22, 23, 24, 25, 26]
        : [1, 2, 5, 6, 10, 11, 12, 15, 16, 17],
    useDefualtSessionManager: true,
    paginationSettings: {
      initialPage: 1,
      pageSize: getAllOrders ? 30 : 10,
      controlType: 'infinity'
    }
  }

  return <OrderList {...MyOrdersProps} />

}