"use client";
import { useEffect } from "react";
import { useLang } from "@/lib/lang";
import { useConfig } from "@/lib/config";
import { useAccess } from "@/lib/access";
import { Button, ButtonContainer, CheckBox, Input, useData, useFormRefs } from "@/Theme/Midone/Forms";
import { Loading, Pic } from "@/Theme/Midone";
import { Frame } from "@/Theme/Midone/Forms";
import { Tab, TabBody, TabHeader, TabList, TabPanel } from "@/Theme/Midone/Forms/Tab";
import Link from "next/link";
import { useRouter } from 'next/navigation';
import { CheckBoxGroup } from "@/Theme/Midone/Forms/CheckBoxGroup";
import { useAuth } from "@/lib";

export function View({ id }) {
    const { Lang, local } = useLang();
    const { laraAdmin, mediaPath, nextAdmin } = useConfig();
    const { save, get } = useData();
    let url = `${laraAdmin}/payments/details/${id}`;
    const router = useRouter();
    const { componentPermission } = useAccess();
    componentPermission("payments.show");

    let component = useFormRefs();
    useEffect(() => {
        get(url, component, "info");
    }, []);
    const result = component?.state?.info;
    const data = result?.item;
    const back = () => router.back();
    let displayPrice = data?.price;
    let displayDiscount = "-";
    let displayPriceDiscount = "-";
    let displayFinalPrice = data?.final_price;
    let theme = ""
    if(displayPrice > 0)
    {
        let percenteCalculation = (displayPrice - data?.discounted_price)/displayPrice;                                        
        displayPrice = <>{displayPrice+"تومان"}</>
        if(data?.discounted_price > 0)
        {
            // displayPrice = data?.discounted_price+"تومان";                                            
            displayDiscount = (percenteCalculation*100)+"%";
            displayPriceDiscount = data?.discounted_price;
        }
    }
    else
    {
        displayPrice = 0;
        displayFinalPrice = Lang("public.free");
        theme = "text-theme-10";
    }
    let factorStatus = (data?.buy_status_id==1)? " bg-theme-10":" bg-theme-24";
    let pamentStatus = " text-theme-23 ";
    if(data?.payment?.status_id==1)
        pamentStatus = " text-theme-10 ";
    else if(data?.payment?.status_id==-1)
        pamentStatus = "text-theme-24 ";
    

    return (
        <>
            <Frame title={data?.title || Lang(["public.payment_details"])}>
                {result?.length==0?
                    <div className="col-span-12 lg:col-span-12">
                        <div className="intro-y box">
                            <div className="alert alert-danger show mb-2" role="alert">{"شما مجوز دسترسی به داده مورد نظر را ندارید"}</div>
                        </div>
                    </div>
                :
                    data?.id?
                        <>
                            <div className="intro-y col-span-12 lg:col-span-12">
                                <div className="box">
                                    <div className="flex flex-col lg:flex-row items-center p-3">
                                        <h4 className="text-xl font-medium leading-none mt-3">{Lang("public.payment_details")}</h4>
                                        <div className="lg:mr-8 lg:ml-auto text-center lg:text-right mt-3 lg:mt-0">
                                            <div className="flex mt-2">
                                                <span>{Lang("public.amount")+" : "+data?.payment?.amount}</span>
                                            </div>
                                            <div className="flex mt-2">
                                                <span className={pamentStatus+"block"}>{Lang("public.status")+" : "+data?.payment?.pay_status?.["title_"+local]}</span>
                                            </div>
                                            <div className="flex mt-2">
                                                <span>{data?.payment?.message}</span>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                            <div className="intro-y col-span-12 lg:col-span-8">
                                <div className="grid grid-cols-12 gap-5 mt-5 pt-5 border-t border-theme-25">
                                    <div className="intro-y col-span-12 md:col-span-6">
                                        <div className="box zoom-in" style={{"cursor":"default"}}>
                                            <div className="flex flex-col lg:flex-row items-center p-5">
                                                <div className="w-24 h-24 lg:w-12 lg:h-12 image-fit lg:ml-1">
                                                    <Pic src={mediaPath + "/users/" + data?.user?.photo} 
                                                    // defaultImg={`${mediaPath}/public/default/book.png`}
                                                        classImg="rounded-full" 
                                                        // key={"img" + data?.user?.photo}
                                                        />
                                                </div>
                                                <div className="lg:mr-2 lg:ml-auto text-center lg:text-right mt-3 lg:mt-0">
                                                    <span className="font-medium">{data?.user?.firstname+" "+data?.user?.lastname}</span> 
                                                    <div className="text-gray-600 text-xs mt-0.5">{data?.user?.mobile}</div>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                    <span className="intro-y block col-span-12 sm:col-span-6 xxl:col-span-3">
                                        <div className="box rounded-md p-3 relative zoom-in" style={{"cursor":"default"}}>
                                            <div className="flex-none pos-image relative block">
                                                <div className="pos-image__preview image-fit">
                                                    <Pic src={mediaPath + "/books/" + data?.book?.image} 
                                                    // defaultImg={`${mediaPath}/public/default/book.png`} key={"img" + data?.book?.image}
                                                    />
                                                </div>
                                            </div>
                                            <div className="block font-medium text-center truncate mt-3">
                                                <h4>{data?.book_type?.["title_"+local]}</h4>
                                                <span>{data?.book?.title}</span>
                                            </div>
                                        </div>
                                    </span>
                                </div>
                            </div>
                            <div className="col-span-12 lg:col-span-4">
                                <div className="tab-content">
                                    <div id="ticket" className="tab-pane active" role="tabpanel" aria-labelledby="ticket-tab">
                                        <div className="box p-5 mt-5">
                                            <div className="flex">
                                                <h4 className="text-xl font-medium leading-none mt-3">{Lang("public.num_factor")+" : "+data?.id}</h4>
                                            </div>
                                            <div className="flex mt-4">
                                                <span>{Lang("public.date")+" : "}<span dir="ltr" className="ml-0">{data?.created_at}</span></span>
                                            </div>
                                            <div className="flex mt-4">
                                                <span className={"px-4 py-3 rounded-full text-white ml-1"+factorStatus}>{data?.buy_satus?.["title_"+local]}</span>
                                            </div>
                                            <div className="flex mt-4 border-t border-gray-600 dark:border-dark-5">
                                                <div className="ml-auto">{Lang("public.price")}</div>
                                                <div className="font-medium">{displayPrice}</div>
                                            </div>
                                            <div className="flex mt-4">
                                                <div className="ml-auto">{Lang("public.discounted_price")}</div>
                                                <div className="font-medium text-theme-24">{displayPriceDiscount}</div>
                                            </div>
                                            <div className="flex mt-4">
                                                <div className="ml-auto">{Lang("public.discount")}</div>
                                                <div className="font-medium text-theme-24">{displayDiscount}</div>
                                            </div>
                                            <div className="flex mt-4 pt-4 border-t border-gray-200 dark:border-dark-5">
                                                <div className="ml-auto font-medium text-base">{Lang("public.total")}</div>
                                                <div className={"font-medium text-base "+theme}>{displayFinalPrice}</div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </>
                    :
                        <Loading />
                }
            </Frame>
            <ButtonContainer>
                <Button label="back" onClick={back} />
            </ButtonContainer>
        </>
    );
}