"use client"
import { ArrowLeftIcon, DropDownIcon } from '@/assets/svgs/TraderIcons';
import EmptyProducts from '@/components/sharedComponents/empty/EmptyProducts';
import ImageWithFallback from '@/components/UiComponents/ImageWithFallback';
import LocalePath from '@/components/UiComponents/LocalePath';
import { Dropdown } from 'antd';
import { useTranslations } from 'next-intl';
import { useRouter, useSearchParams } from 'next/navigation';
import { useState } from 'react'

const StatisticsList = ({data}:{data:any}) => {
  const t = useTranslations();

  const searchParams = useSearchParams();
  const [selectedSort, setSelectedSort] = useState<any>(searchParams.get("sales") || "most");
  const router = useRouter();

  const items =[
    {
        key:"most",
        label:t("Text.moreSale"),
    },
    {
        key:"low",
        label:t("Text.lowSale"),
    }
  ];

  const handleSortChange = (key: string) => {
    const newSearchParams = new URLSearchParams(searchParams.toString());
    newSearchParams.set("sales", key);
    setSelectedSort(key);
    router.replace(`?${newSearchParams.toString()}`, { scroll: false });
  };


    return (
        <div className="app-card-wrapper">
          <div>
            <div className="flex items-center justify-between mb-4">
                <h3 className="text-xl font-bold">{data.title}</h3>
                {data?.hasFilter && data?.list?.length > 0 && (
                    <Dropdown menu={{ items, onClick: ({ key }) => handleSortChange(key) }} trigger={["click"]} >
                        <div className="flex items-center font-bold justify-center gap-2.5 text-sm  py-3 min-w-[132px] border border-platinum rounded-2xl">
                            {items.find((item) => item.key === selectedSort)?.label || "الفرز"}
                            <DropDownIcon/>   
                        </div>
                    </Dropdown>
                )}

                {data?.href && data?.list?.length > 0 && (
                    <LocalePath href={data?.href} className="more-btn" >
                    {t("buttons.more")}
                    <ArrowLeftIcon />
                    </LocalePath>
                )}
            </div>
            <ul className="max-h-[426px] overflow-y-auto">
              {data?.list?.length > 0 ? data.list?.map((el:any, index:number) => (
                <li key={`list_el_${index}`} className="py-3 pe-3 border-b flex items-center gap-4 border-b-[#EDEDED] last:border-b-0">
                  {el?.image && (
                    <figure className="size-14 rounded-full overflow-hidden bg-greynormal">
                        <ImageWithFallback
                            src={el?.image}
                            width={80}
                            height={80}
                            alt={el.name}
                            className=" size-full object-contain"
                            style={{ mixBlendMode: "multiply" }}
                        />
                    </figure>
                  )}
                  <div className="flex items-center justify-between w-full">
                    <div className='w-full'>
                        <p className="flex items-center justify-between mb-2 font-bold text-xs md:text-sm">
                          <span>{el.name}</span>
                          <span className="font-bold">{el.value}</span>
                        </p>
                        <p className="text-[#797979] font-semibold text-[10px] md:text-xs ">{el.quantity}</p>
                    </div>
                    {el?.href && data?.list?.length &&(
                      <LocalePath href={el?.href} className="min-w-12 size-12 flex-center-content border border-[#EDEDED] rounded-full">
                        <ArrowLeftIcon className="*:fill-[#292D32]" />
                      </LocalePath>
                    )}
                  </div>
                </li>
              )):<EmptyProducts withoutBtn hideDesc title={t("orders.no_stats")} />}
            </ul>
          </div>
        </div>
      );
    };

export default StatisticsList