import React, { useState } from 'react'
import { useLanguage, useUtils } from 'ordering-components-external/native'
import { StyleSheet, TouchableOpacity, ScrollView } from 'react-native'
import { OButton, OIcon, OText } from '../shared'
import { Card, Logo, Information, MyOrderOptions, Status, WrappButton, Wrapper } 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: 7.6,
      width: 75,
      height: 75
    },
    reorderbutton: {
      width: 80,
      height: 32,
      paddingLeft: 0,
      paddingRight: 0,
      borderRadius: 3,
      flex: 1
    },
    reorderLoading: {
      width: 80,
      height: 32,
      borderRadius: 3,
    },
    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, 2, 5, 6, 10, 11, 12]

  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, products: order?.products } })
  }

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

  return (
    <Wrapper>
      {orders.sort((a: any, b: any) => a.delivery_datetime < b.delivery_datetime).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>
            <OText size={14} numberOfLines={1}>
              {order.business?.name}
            </OText>
            <OText size={12} 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={12} 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 && (
                  <TouchableOpacity onPress={() => handleClickOrderReview(order)}>
                    <OText size={12} color={theme.colors.primary} numberOfLines={1}>{t('REVIEW_ORDER', 'Review Order')}</OText>
                  </TouchableOpacity>
                )}
            </MyOrderOptions>
          </Information>
          <Status>
            <OText
              color={theme.colors.primary}
              size={11}
              numberOfLines={1}
            >
              {getOrderStatus(order.status)?.value}
            </OText>
            <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, fontSize: 14 }}
            style={{ borderRadius: 3, height: 42, marginTop: 12 }}
          />
        </WrappButton>
      )}
    </Wrapper>

  )
}
