import Flex from '@/components/atoms/Flex'
import React from 'react'
import {
    StyledWishlist,
    StyledWishlistItem,
    StyledWishlistPhoto
} from './Wishlists.theme'
import Heading from '@/components/atoms/Heading'
import Button from '@/components/atoms/Button'
import Icon from '@/components/atoms/Icon'
import { Column } from '@/components/atoms/FlexGrid'
import {
    IWishlists,
    IWishlistItem,
    IWishlistProducts
} from './Wishlists.interface'
import ImageWrapper from '@/components/atoms/ImageWrapper'
import Separator from '@/components/atoms/Separator'
import { colors } from '@/styles/variables'

export const Wishlists = ({ wishlists = [] }) => {
    return (
        <StyledWishlist>
            {wishlists &&
                wishlists.map((wishlistItem: IWishlistItem) => (
                    <WishlistItem
                        wishName={wishlistItem.wishName}
                        productList={wishlistItem.productList}

                    />
                ))}
        </StyledWishlist>
    )
}

export const WishlistItem: React.FC<IWishlistItem> = ({
    wishName,
    productList,
    actionButtonLabel = 'SEE MORE',
    editButtonLabel = 'EDIT',
    removeButtonLabel = 'REMOVE',
    onRemoveButtonClick,
    onEditButtonClick,
    hrefOnActionButtonClick,

}) => {

    function getRenderCards(maxVisibleCards: number, productsList: IWishlistProducts[]) {
        if (!productsList) return null;
        const visibleCards = productsList.slice(0, maxVisibleCards);
        const emptyCardCount = Math.max(0, maxVisibleCards - productsList.length);
        const combinedEmptyAndFilledCards = [...Array(emptyCardCount), ...visibleCards];

        const renderedCards = combinedEmptyAndFilledCards.map((product: IWishlistProducts, index: number) => (
            <Column lg={2} sm={2} xs={6} key={index} className={'mb-3'}>
                <StyledWishlistPhoto>
                    {product?.imageElement ?? ''}
                </StyledWishlistPhoto>
            </Column>
        ));

        return renderedCards;
    }
    const productCardsToRender = getRenderCards(4, productList)




    return (
        <StyledWishlistItem>
            <Separator height={'1px'} color={colors.gray30} />
            <Flex justify="flex-end" className='p-3'>
                <Button
                    theme="light"
                    variant="link"
                    rightIcon={<Icon icon="icon-pencil" />}
                    className="uppercase"
                    onClick={onEditButtonClick}
                >
                    {editButtonLabel}
                </Button>
                <Button
                    theme="light"
                    variant="link"
                    rightIcon={<Icon icon="icon-trash" />}
                    onClick={onRemoveButtonClick}
                    className="delete-button"
                >
                    {removeButtonLabel}
                </Button>

            </Flex>
            <Flex direction="row" className='p-3'>
                <Column lg={4} sm={4} xs={12} style={{ display: 'grid', alignContent: 'space-between', height: '100%' }}>
                    <Heading size="h1" tag="h2" className='clamp-line'>
                        {wishName}
                    </Heading>
                    <Button
                        theme="light"
                        variant="link"
                        rightIcon={<Icon icon="icon-arrow-forward" />}
                        href={hrefOnActionButtonClick}
                    >
                        {actionButtonLabel}
                    </Button>
                </Column>
                {productCardsToRender && productCardsToRender}
            </Flex>
            <Separator height={'1px'} color={colors.gray30} />

        </StyledWishlistItem >
    )
}