// @flow

import * as React from 'react'
import { compose, pure, type HOC } from 'recompose'
import { Query } from 'react-apollo'
import { connect } from 'react-redux'
import { withStyles } from '@material-ui/core/styles'
import { withRouter } from 'react-router'
import { isEmpty, find, map } from 'lodash'

import TotalBarOrder from './totalBarOrder'

import styles, {
  Main,
  MainEmpty,
  CardWrapper,
  CardContainer,
  TableItem,
  PhotoContainer,
  Photo,
  TextContainer,
  ProductText,
  ItemCounterWrap,
  AddIcon,
  RemoveIcon,
  DestroyIcon,
  NumberButtonAmount,
  RemoveLink,
  EmptyContainer,
  BasketIcon,
  EmptyTitle,
  EmptyText
} from './styles'

import cartActions from '../../redux/cart'

import QUERY from './query'

import noPhoto from '../../images/icons/no-photo.png'

type CartProps = {
  confirmDialog: boolean,
  setConfirmDialog: Function,
  createOrder: Function,
  products: Array<Object>,
  creating: boolean,
  minicart: boolean,
  mutations: {
    createOrder: Function,
  },
};

const mapStateToProps = state => ({ cart: state.cart })
const mapDispatchToProps = { ...cartActions }

const enhance: HOC<*, CartProps> = compose(
  pure,
  connect(mapStateToProps, mapDispatchToProps),
  withRouter,
  withStyles(styles)
)

const OrderResume = enhance(
  ({
    cart,
    history,
    cartModifyItem,
    asideCart
  }) => (
    <Query
      query={QUERY}
      variables={{
        where: {
          $and: {
            id: {
              $in: map(cart.items, 'id')
            }
          }
        }
      }}
    >
      {({ data, loading }) => {
        console.log('props cart.items', cart.items)
        console.log('props data', data)
        const { allProducts = {} } = data
        if (isEmpty(allProducts)) {
          return (
            <MainEmpty elevation={0} minicart={asideCart ? 1 : 0}>
              <EmptyContainer>
                <BasketIcon />
                <EmptyTitle>Tu canasta está vacía</EmptyTitle>
                <EmptyText align='center'>
                  Te invitamos a visitar nuestras marcas y categorías para agregar productos a tu canasta
                </EmptyText>
              </EmptyContainer>
              <TotalBarOrder minicart={asideCart} />
            </MainEmpty>
          )
        }
        console.log('allProducts', allProducts)
        return (
          <Main minicart={asideCart}>
            <CardWrapper elevation={0} minicart={asideCart ? 1 : 0}>
              <CardContainer>
                {allProducts.map(item => {
                  console.log('cart.items', cart.items)
                  const cartItem = find(cart.items, { id: item.id })
                  console.log('cartItem', cartItem)
                  console.log('item', item)
                  return (
                    <TableItem minicart={asideCart} key={`CartItem:${item.id}`}>
                      <PhotoContainer minicart={asideCart}>
                        <Photo src={item.reference && item.reference.image ? item.reference.image.thumb : noPhoto} />
                      </PhotoContainer>

                      <TextContainer minicart={asideCart}>
                        <ProductText>{item.reference.name}</ProductText>

                        <RemoveLink
                          onClick={() => cartModifyItem(item, false, true)}
                        >
                          Eliminar
                        </RemoveLink>
                      </TextContainer>

                      <ItemCounterWrap>
                        {cartItem.quantity > 1 && (
                          <RemoveIcon
                            disabled={cartItem.quantity <= 1}
                            onClick={() => cartModifyItem(item, false)}
                          />
                        )}

                        {cartItem.quantity <= 1 && (
                          <DestroyIcon
                            onClick={() => cartModifyItem(item, false, true)}
                          />
                        )}

                        <NumberButtonAmount>
                          {cartItem.quantity}
                        </NumberButtonAmount>

                        <AddIcon
                          disabled={cartItem.quantity >= item.stock}
                          onClick={() => cartModifyItem(item, true)}
                        />
                      </ItemCounterWrap>
                    </TableItem>
                  )
                })}
              </CardContainer>
            </CardWrapper>
            <TotalBarOrder minicart={asideCart} />

          </Main>
        )
      }}
    </Query>
  )
)

export default OrderResume