"use client";

import Image from "next/image";
import { BillingTypo } from "@/types";
import { useState } from "react";
import { useTranslations } from "next-intl";

import { cn } from "@/lib/cn";
import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card";

import { BankTransfer } from "./payments/bank";
import { Fatoorah } from "./payments/fatoorah";
import { Tabby } from "./payments/tabby";
import { Jeel } from "./payments/jeel";

export function BillingForm({ user, form }: BillingTypo) {
    const t = useTranslations("checkout");
    const [selectedWay, setSelectedWay] = useState(form?.getValues()?.way);

    const ways = [
        // {
        //     title: t('bank_transfer.title'),
        //     subjects: t.raw('bank_transfer.subjects'),
        //     value: 'bank_transfer',
        //     component: <BankTransfer user={user} register={form?.register} />
        // },
        {
            title: t('fatoorah.title'),
            subjects: t.raw('fatoorah.subjects'),
            wayImg: '/images/myfatora.png',
            waySubjectImgs: '/images/myfatoorah-cards.png',
            value: 'fatoorah',
            component: <Fatoorah user={user} register={form?.register} />
        },
        {
            title: t('tabby.title'),
            subjects: t.raw('tabby.subjects'),
            wayImg: '/images/tabby.png',
            waySubjectImgs: '/images/tabby-cards.png',
            value: 'tabby',
            component: <Tabby user={user} register={form?.register} />
        },
        // {
        //     title: t('jeel.title'),
        //     subjects: t.raw('jeel.subjects'),
        //     wayImg: '/images/jeelpay.png',
        //     waySubjectImgs: '/images/jeel-cards.png',
        //     value: 'jeel',
        //     component: <Jeel user={user} register={form?.register} />
        // },
    ];

    const selectedWayData = ways.find(
        way => way.value === selectedWay
    );

    const setWayAndValue = (way) => {
        form?.setValue("way", way?.value);
        setSelectedWay(way?.value);
    };

    return (
        <form className="space-y-6" id="checkout" onSubmit={(e) => e.preventDefault()}>
            {/* way choose */}
            <Card>
                <CardHeader>
                    <CardTitle className="text-xl capitalize">
                        {t("paymentWays")}
                    </CardTitle>
                    <CardDescription />
                </CardHeader>

                <CardContent>
                    <div className="grid md:grid-cols-2 gap-2">
                        {
                            ways?.map((way, index) => (
                                <div
                                    key={index}
                                    className={cn("text-start h-full flex flex-col justify-start border rounded-md p-2 space-y-2 cursor-pointer relative z-0",
                                        way?.value === selectedWay && "bg-primary-tw-100"
                                    )}
                                >
                                    <button
                                        type="button"
                                        className="absolute inset-0 z-10 bg-transparent cursor-pointer"
                                        onClick={() => setWayAndValue(way)}
                                        aria-label={`Select ${way?.title}`}
                                    />

                                    <div className="font-bold w-full rounded-md px-2 flex items-center justify-between gap-2">
                                        <p>
                                            {way?.title}
                                        </p>
                                        <div>
                                            {
                                                way?.wayImg &&
                                                <Image
                                                    src={way?.wayImg}
                                                    alt={way?.title}
                                                    className="w-full max-h-7"
                                                    width={100}
                                                    height={100}
                                                    priority
                                                />
                                            }
                                        </div>
                                    </div>

                                    <ul className="text-sm list-disc px-8">
                                        {
                                            way?.subjects?.map((subject, sIndex) => (
                                                <li key={sIndex}>
                                                    {subject}
                                                </li>
                                            ))
                                        }
                                    </ul>
                                </div>
                            ))
                        }
                    </div>
                </CardContent>
            </Card>

            {/* way data */}
            <Card className="!min-h-[230px]">
                <CardHeader>
                    <CardTitle className="text-xl capitalize flex items-center justify-between">
                        <h3>
                            {selectedWayData?.title}
                        </h3>
                        <div>
                            {
                                selectedWayData?.wayImg &&
                                <Image
                                    src={selectedWayData?.wayImg}
                                    alt={selectedWayData?.title}
                                    className="w-full max-h-7"
                                    width={100}
                                    height={100}
                                    priority
                                />
                            }
                        </div>
                    </CardTitle>
                    <CardDescription />
                </CardHeader>

                <CardContent>
                    {selectedWayData?.component}
                </CardContent>
            </Card>

        </form>
    );
}