import React, {useMemo} from 'react';
import {translate} from "@/utils/i18nUtils";
import {FiEdit, FiTrash} from "react-icons/fi";
import {Link, useRouter} from "@/i18n/routing";
import {productService} from "@/services/productService";
import {notification} from "@/utils/helpersUtils";
import {showAlert} from "@/utils/alertUtils";

function ProductViewEdit({product, statistic}) {

    const router = useRouter()

    const handleDelete =  () => {
        showAlert({
            title: translate('notification.warningTitle'),
            message: translate('notification.deleteDialog'),
            onAction: async() => {
                const res = await productService.deleteProduct({
                    product_id: product.id,
                })

                if (res.responseStatus.messageId === 1000) {
                    notification({
                        message: translate('notification.success')
                    })

                    router.push('/profile/products?type=deleted')
                }
            }
        })
    }

    const url = useMemo(() => {
        return '/' + (product.category_id === 98 ? 'action' : 'product') + '/edit?id=' + product.id;
    }, [product])

    const options = useMemo(() => {
        if (!statistic || Object.keys(statistic).length === 0) {
            return []
        }
        return [
            {value: statistic?.message_clicks || 0, label: statistic?.message_title},
            {value: statistic?.wapp_clicks || 0, label: statistic?.wapp_title},
            {value: statistic?.call_clicks || 0, label: statistic?.call_title},
        ]
    }, [statistic])

    return (
        <div className="border border-primary bg-[#F1FCFE] p-[20px] mt-[20px] rounded-[8px]">
            <div>
                <h4 className="text-[15px] mb-[12px]">{translate('pages.productView.orderPanel')}</h4>
            </div>
            <div className="flex items-center gap-[20px] mb-[26px]">
                <Link href={url}
                      className="btn !bg-[white] flex items-center gap-1 !border !border-solid !border-primary btn--block">
                    <FiEdit/>
                    <span>{translate('pages.productView.btnEdit')}</span>
                </Link>
                <button
                    onClick={handleDelete}
                    className="btn !bg-[white] !border !border-solid flex text-[#F23030] items-center gap-1 !border-primary btn--block">
                    <FiTrash/>
                    <span>{translate('pages.productView.btnDelete')}</span>
                </button>
            </div>
            {options.length > 0 && (
                <div>
                    <h6>{translate('pages.productView.clickCount')}</h6>
                    <div className="flex items-center mt-[16px] text-[#848484] text-[13px]">
                        {options.map((item, index) => (
                            <span key={index} className="flex-1">
                            {item.label}: {item.value}
                        </span>
                        ))}
                    </div>
                </div>
            )}

        </div>
    );
}

export default ProductViewEdit;