import React from 'react';
import { Actionable, Flexbox, Button, Text, View, Swiper, Image } from '@evlop/native-components';
import { Money, ShopifyProduct, ShopifyImage } from '@evlop/shopify';

const ProductListItemBlock: NativeAppBlock = function ({data}) {
  const product: ShopifyProduct = data.product

  const [containerWidth, setContainerWidth] = React.useState(0);

  if (!product || product.isLoading) return <View style={{aspectRatio: 1}} width="100%" bg="gray-100" />;

  const images: ShopifyImage[] = product.images!

  const renderImage = ({ item }: { item: ShopifyImage }) => {

    return (
      <View key={item.id} style={{ width: containerWidth }}>
        <Image
          src={item}
          aspectRatio={1}
          borderTopRightRadius={10}
          borderTopLeftRadius={10}
          resizeMode="cover"
        />
      </View>
    );
  };

  return (
    <Flexbox flexDirection="column" gap={10}>
      <Flexbox
        flexDirection="column"
        style={{ width: '100%' }}
        onLayout={(e) => {
          const w = e.nativeEvent.layout.width;
          if (w && w !== containerWidth) setContainerWidth(w);
        }}
      >
        {images.length > 0 && containerWidth > 0 ? (
          <Swiper
            data={images}
            renderItem={renderImage}
            itemWidth={containerWidth}
            autoplay={false}
            paginationType="dash"
          />
        ) : null}

        <Button
          borderRadius={0}
          borderBottomRightRadius={10}
          borderBottomLeftRadius={10}
          py={8}
          variant="filled"
          color="black"
          icon="entypo:plus"
          label="Add to cart"
          size="sm"
          action={product?.actions?.addToCart}
        >
          Add to cart
        </Button>
      </Flexbox>
      <Actionable action={(product.actions && product.actions.openDetailsPage) || null}>
        <Flexbox flexDirection="column" gap={4}>
          <Text fontWeight="Bold" color="primary">
            <Money fontSize="2xl" color="primary" fontWeight="Bold" price={product?.priceRange?.minVariantPrice} />
          </Text>

          <Text fontWeight="bold" numberOfLines={1}>
            {product.vendor}
          </Text>

          <Text numberOfLines={2} fontSize="sm">
            {product.title}
          </Text>
        </Flexbox>
      </Actionable>
    </Flexbox>
  );
}

export default ProductListItemBlock;

{}