import React from 'react'
import { Row, Col, Card, Spin } from 'antd'
import { Paragraph, Text } from 'components/Typography'
import { ShopifyProductItem } from 'models/talent/talent-profile-module.model'
import { formatterCurrency } from 'utils/currency'

import classNames from 'classnames'
import InfiniteScroll from 'react-infinite-scroll-component'

import './index.scss'
import { Icon } from '../Icon'

interface ShopifyProductListProps {
  list: ProductItem[]
  onSelectProduct?: (product: ShopifyProductItem) => void
  productsSelected?: ShopifyProductItem[]
  productsAdded?: ShopifyProductItem[]
  showListSelected: boolean
  availableProducts?: ShopifyProductItem[]
  fetchMoreProducts?: () => void
  hasMoreProducts?: boolean
}

interface ProductItem {
  id: string
  images: { src: string }[]
  title: string
  variants: { price: string }[]
}

const ShopifyProductList = ({
  list,
  onSelectProduct,
  productsSelected,
  showListSelected,
  availableProducts,
  productsAdded,
  fetchMoreProducts,
  hasMoreProducts = false
}: ShopifyProductListProps) => {
  const handleSelectProduct = (product: ShopifyProductItem) => {
    onSelectProduct && onSelectProduct(product)
  }
  const _renderItem = (item: any, index: number) => {
    const variant = item.variants.reduce(function (prev: any, curr: any) {
      return parseFloat(prev.price) < parseFloat(curr.price) ? prev : curr
    })
    const isSelected = !!productsSelected?.filter(
      product => product.id === item.id
    ).length
    return (
      <Card
        key={index}
        className={classNames('shopify-collection-item', {
          selected: isSelected
        })}
        onClick={() => handleSelectProduct(item)}
      >
        <Row gutter={16} align="middle" justify="start">
          <Col>
            {item.images[0]?.src ? (
              <img
                className="shopify-collection-item__image"
                src={item.images[0]?.src}
              />
            ) : (
              <Row align="middle" justify="center" className="empty-picture">
                <Icon name="shopping-empty" />
              </Row>
            )}
          </Col>
          <Col>
            <Paragraph preset="semibold16" className="d--block">
              {item.title}
            </Paragraph>
            <Paragraph preset="regular14" className="price m__t--4">
              {formatterCurrency(variant.priceV2?.currencyCode, 2).format(
                parseFloat(variant?.priceV2.amount)
              )}
            </Paragraph>
          </Col>
        </Row>
      </Card>
    )
  }
  const _renderItemAdded = (item: any, index: number) => {
    const variant = item.variants.reduce(function (prev: any, curr: any) {
      return parseFloat(prev.price) < parseFloat(curr.price) ? prev : curr
    })
    return (
      <Card
        key={index}
        className={classNames(
          'shopify-collection-item opacity--40 cursor-not-allowed'
        )}
      >
        <Row gutter={16} align="middle" justify="start">
          <Col>
            {item.images[0]?.src ? (
              <img
                className="shopify-collection-item__image"
                src={item.images[0]?.src}
              />
            ) : (
              <Row align="middle" justify="center" className="empty-picture">
                <Icon name="shopping-empty" />
              </Row>
            )}
          </Col>
          <Col>
            <Paragraph preset="semibold16" className="d--block">
              {item.title}
            </Paragraph>
            <Paragraph preset="regular14" className="price m__t--4">
              {formatterCurrency(variant.priceV2?.currencyCode, 2).format(
                parseFloat(variant?.priceV2.amount)
              )}
            </Paragraph>
          </Col>
        </Row>
      </Card>
    )
  }

  const renderAvailableProducts = () => {
    const listToRender = showListSelected ? availableProducts : list

    if (fetchMoreProducts) {
      return (
        <InfiniteScroll
          dataLength={list?.length}
          next={fetchMoreProducts}
          hasMore={hasMoreProducts}
          loader={
            <Row justify="center" align="middle">
              <Spin />
            </Row>
          }
          height={300}
        >
          {listToRender?.map(_renderItem)}
        </InfiniteScroll>
      )
    } else {
      return listToRender?.map(_renderItem)
    }
  }

  return (
    <>
      <Text preset="semibold16">Available Products</Text>
      <div className="shopify-product-list">{renderAvailableProducts()}</div>
      {showListSelected && productsAdded?.length ? (
        <>
          <Paragraph className="m__t--16" preset="semibold16">
            Products Added to This Module
          </Paragraph>
          <div className="shopify-product-list">
            {productsAdded?.map(_renderItemAdded)}
          </div>
        </>
      ) : null}
    </>
  )
}

export default ShopifyProductList
