'use client'
import { Heart, Hierarchy2, RowHorizontal } from 'iconsax-react'
import { FC, useEffect, useState } from 'react'
import { Product } from '@/types/product.types'
import { useAddWishlist, useRemoveWishlist } from '@/app/products/hooks/useProductsData'
import { useSharedStore } from '@/share/store/sharedStore'
import { toast } from '@/components/Toast'
import { useCheckWishProduct } from '../hooks/useProductData'
import { useProductStore } from '../store/Store'
import PriceHistory from './PriceHistory'
import Link from 'next/link'
import ChangePrice from './ChangePrice'

interface ActionProductProps {
    product: Product
}

const ActionProduct: FC<ActionProductProps> = ({ product }) => {

    const { variantId } = useProductStore()
    const { isLogin } = useSharedStore()
    const [isWishlist, setIsWishlist] = useState(false)
    const [isWishlistLoading, setIsWishlistLoading] = useState(false)

    const { mutate: addWishlist } = useAddWishlist()
    const { mutate: removeWishlist } = useRemoveWishlist()
    const { data } = useCheckWishProduct(product._id.toString(), variantId)

    const handleWishlist = () => {
        if (!isLogin) return
        if (!product._id || !product.default_variant?._id) return

        setIsWishlistLoading(true)

        if (isWishlist) {
            removeWishlist(
                {
                    productId: product._id.toString(),
                    variantId: variantId
                },
                {
                    onSuccess: () => {
                        setIsWishlist(false)
                        setIsWishlistLoading(false)
                    },
                    onError: () => {
                        setIsWishlistLoading(false)
                    }
                }
            )
        } else {
            addWishlist(
                {
                    productId: product._id.toString(),
                    variantId: variantId
                },
                {
                    onSuccess: () => {
                        setIsWishlist(true)
                        setIsWishlistLoading(false)
                    },
                    onError: () => {
                        setIsWishlistLoading(false)
                    }
                }
            )
        }
    }

    useEffect(() => {
        if (data) {
            setIsWishlist(data?.results?.isInWishlist)
        }
    }, [data])

    const handleShare = () => {
        if (navigator.share) {
            navigator.share({
                title: product.title_fa,
                text: product.description,
                url: window.location.href,
            })
        } else {
            navigator.clipboard.writeText(window.location.href)
            toast('')
        }
    }

    return (
        <div className='absolute top-6 right-4'>
            <div className='flex flex-col gap-3'>
                <button
                    onClick={handleWishlist}
                    disabled={!isLogin || isWishlistLoading}
                    className={`p-2 rounded-full bg-white/80 backdrop-blur-sm transition-colors ${isLogin && !isWishlistLoading ? 'hover:bg-white' : 'opacity-50 cursor-not-allowed'
                        }`}
                    title={
                        !isLogin
                            ? 'برای افزودن به علاقه‌مندی‌ها وارد شوید'
                            : isWishlist
                                ? 'حذف از علاقه‌مندی‌ها'
                                : 'افزودن به علاقه‌مندی‌ها'
                    }
                >
                    <Heart
                        size={20}
                        color={isWishlist ? '#000' : '#333333'}
                        variant={isWishlist ? 'Bold' : 'Outline'}
                    />
                </button>

                <button
                    onClick={handleShare}
                    className='p-2 rounded-full bg-white/80 backdrop-blur-sm hover:bg-white transition-colors'
                    title={'اشتراک‌گذاری'}
                >
                    <Hierarchy2
                        size={20}
                        color={'#333333'}
                        variant={'Outline'}
                    />
                </button>

                <ChangePrice />

                <PriceHistory productId={product._id.toString()} />

                <Link href={`/compare?productId=${product._id}`}>
                    <button
                        className='p-2 rounded-full bg-white/80 backdrop-blur-sm hover:bg-white transition-colors'
                        title='مقایسه کالا'
                    >
                        <RowHorizontal size={20} color='#333333' variant='Bulk' />
                    </button>
                </Link>
            </div>
        </div>
    )
}

export default ActionProduct