"use client";

import Image from "next/image";
import CommonModal from "@/components/theme/ui/CommonModal";
import {ProductsInOrderDetails, ProductItemAdditional} from "@/types/customer/type";


// 根据products 计算总价和总个数
function caclculateTotal(products: ProductsInOrderDetails[]) {
    let total = 0;
    let totalItems = 0;

    products.forEach((product) => {
        total += product.total * 100;
        totalItems += product.qtyOrdered;
    });
    let ss = String(total);
    if(ss.length >= 3) {
        ss = ss.slice(0, ss.length - 2) + "." + ss.slice(ss.length - 2);
    } else if(ss.length === 2) {
        ss = "0." + ss;
    } else {
        ss = "0.0" + ss;
    }

    return { 
        subTotal: ss, 
        totalItems: totalItems > 1 ? String(totalItems) + " Items" : String(totalItems) + " Item"
    };
}

function getProductAdditionalInfo(productItem: ProductItemAdditional) { 
    const attributeKeys = Object.keys(productItem.attributes);
    let res = '';
    attributeKeys.forEach(key => {
      const attribute = productItem.attributes[key];
      if (attribute) {
        // option_label value_label

        if(res) {
            res = res + ', ' + attribute.option_label + ': ' + attribute.value_label;
        } else {
            res = attribute.option_label + ': ' + attribute.value_label;
        }
      }
    });
    return res;
}

export default function ProductsModalPendingOrder({
    isOpen,
    products,
    currencySymbol,
    onClose,
}: {
    isOpen: boolean;
    products: ProductsInOrderDetails[],
    currencySymbol: string;
    onClose: () => void;
}) {

    const { subTotal, totalItems } = caclculateTotal(products);
    

    const closeModal = () => {
        onClose();
    };
  return (
    <CommonModal
      isOpen={isOpen}
      onClose={() => closeModal()}
      header={
        <div className="relative w-full box-border p-4">
            <div className="flex justify-between items-center">
                <span className="text-ly-16 flex-none">Order Summary</span>
                <button className="flex-none w-6 h-6" onClick={() => closeModal()}>
                    <svg className="block w-full h-full" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" strokeWidth="1.5" stroke="currentColor" aria-hidden="true" data-slot="icon"><path strokeLinecap="round" strokeLinejoin="round" d="M6 18 18 6M6 6l12 12"></path></svg>
                </button>
            </div>
            
            <div className="mt-6 flex justify-between items-center">
                <span className="text-ly-12">{totalItems}</span>
                <span className="text-ly-14 font-bold">{currencySymbol + subTotal}</span>
            </div>
        </div>
      }
      body={
        <div className="w-full px-4 pb-6">
            {products.map((product) => {
                return (
                    <div key={product.id} className="flex justify-between w-full box-border pb-4 border-b-1 border-[#f0f0f0] mt-4 last:border-0 last:pb-0 last:mt-0">
                        <div className="relative flex-none w-33 h-44 mr-2">
                            <Image fill={true} src="https://cdn.asteriahair.com/media/catalog/product/6/_/6_3_2.png" alt={product.name} />
                        </div>
                        <div className="flex-auto flex flex-col justify-between ">
                            <div>
                                <p className="text-ly-12 leading-ly-20 line-clamp-2 text-ly-placeholder">
                                    {product.name}
                                </p>
                                <p className="text-ly-12 leading-ly-20 mt-3">
                                    {getProductAdditionalInfo(JSON.parse(product.additional))}
                                </p>
                            </div>
                            <div className="flex justify-between items-center">
                                <span className="text-ly-14 font-bold">
                                    {currencySymbol + product.price}
                                </span>
                                <span className="text-ly-12">X {product.qtyOrdered}</span>
                            </div>
                        </div>
                    </div>
                )
            })}
            
        </div>
      }
      
    />
  )
}