import React, { useState } from 'react'
import { useLanguage, useUtils } from 'ordering-components/native'
import { StyleSheet, TouchableOpacity, ScrollView } from 'react-native'
import { OButton, OIcon, OText } from '../shared'
import { Card, Logo, Information, MyOrderOptions, Status, WrappButton } from './styles'
import { PreviousOrdersParams } from '../../types'
import { useTheme } from 'styled-components/native'

export const PreviousOrders = (props: PreviousOrdersParams) => {
  const {
    orders,
    pagination,
    onNavigationRedirect,
    loadMoreOrders,
    getOrderStatus,
    handleReorder,
    reorderLoading
  } = props

  const theme = useTheme();

  const styles = StyleSheet.create({
    logo: {
      borderRadius: 10,
      width: 75,
      height: 75
    },
    reorderbutton: {
      width: 80,
      height: 40,
      paddingLeft: 0,
      paddingRight: 0,
      borderRadius: 10,
      flex: 1
    },
    reorderLoading: {
      width: 80,
      height: 40,
      borderRadius: 10,
    },
    buttonText: {
      color: theme.colors.white,
      fontSize: 12,
      marginLeft: 2,
      marginRight: 2
    }
  })

  const [, t] = useLanguage()
  const [reorderSelected,setReorderSelected] = useState<number | null>(null)
  const [{ parseDate, optimizeImage }] = useUtils()
  const allowedOrderStatus = [1, 11, 15]
  const [isReviewedOrders, setIsReviewedOrders] = useState<Array<any>>([])

  const handleReviewState = (orderId: any) => {
    if (!orderId || isReviewedOrders.includes(orderId)) return
    setIsReviewedOrders([ ...isReviewedOrders, orderId ])
  }

  const handleClickViewOrder = (uuid: string) => {
    onNavigationRedirect && onNavigationRedirect('OrderDetails', { orderId: uuid })
  }

  const handleClickOrderReview = (order: any) => {
    onNavigationRedirect && onNavigationRedirect(
      'ReviewOrder',
      {
        order: {
          id: order?.id,
          business_id: order?.business_id,
          logo: order.business?.logo,
          driver: order?.driver,
          products: order?.products,
          review: order?.review,
          user_review: order?.user_review
        },
        handleReviewState: handleReviewState
      }
    )
  }

  const handleReorderClick = (id : number) => {
    setReorderSelected(id)
    handleReorder(id)
  }

  return (
    <ScrollView
      style={{ height: '60%', marginBottom: 30 }}
    >
      {orders.map((order: any) => (
        <Card
          key={order.id}
        >
          {!!order.business?.logo && (
            <Logo>
              <OIcon
                url={optimizeImage(order.business?.logo, 'h_300,c_limit')}
                style={styles.logo}
              />
            </Logo>
          )}
          <Information>
            <ScrollView
              showsVerticalScrollIndicator={false}
              showsHorizontalScrollIndicator={false}
              horizontal
            >
              <OText size={17} >
                {order.business?.name}
              </OText>
            </ScrollView>
            <OText size={15} color={theme.colors.textSecondary} numberOfLines={1}>
              {order?.delivery_datetime_utc ? parseDate(order?.delivery_datetime_utc) : parseDate(order?.delivery_datetime, { utc: false })}
            </OText>
            <MyOrderOptions>
              <TouchableOpacity onPress={() => handleClickViewOrder(order?.uuid)}>
                <OText size={16} color={theme.colors.primary} mRight={5} numberOfLines={1}>{t('MOBILE_FRONT_BUTTON_VIEW_ORDER', 'View order')}</OText>
              </TouchableOpacity>
              {
                allowedOrderStatus.includes(parseInt(order?.status)) && !order.review && !isReviewedOrders.includes(order?.id) && (
                  <TouchableOpacity onPress={() => handleClickOrderReview(order)}>
                    <OText size={16} color={theme.colors.primary} numberOfLines={1}>{t('REVIEW_ORDER', 'Review Order')}</OText>
                  </TouchableOpacity>
                )}
            </MyOrderOptions>
          </Information>
          <Status>
            <ScrollView
                showsVerticalScrollIndicator={false}
                showsHorizontalScrollIndicator={false}
                horizontal
            >
              <OText
                color={theme.colors.primary}
                size={16}
                numberOfLines={1}
              >
                {getOrderStatus(order.status)?.value}
              </OText>
            </ScrollView>
            <OButton
              text={t('REORDER', 'Reorder')}
              imgRightSrc={''}
              textStyle={styles.buttonText}
              style={reorderLoading && order.id === reorderSelected ? styles.reorderLoading : styles.reorderbutton}
              onClick={() => handleReorderClick(order.id)}
              isLoading={reorderLoading && order.id === reorderSelected}
            />
          </Status>

        </Card>
      ))}
      {pagination.totalPages && pagination.currentPage < pagination.totalPages && (
        <WrappButton>
          <OButton
            onClick={loadMoreOrders}
            text={t('LOAD_MORE_ORDERS', 'Load more orders')}
            imgRightSrc={null}
            textStyle={{color: theme.colors.white}}
          />
        </WrappButton>
      )}
    </ScrollView>

  )
}