import { MonetbilPaymentWidget } from "@/_utils/monetbil-payments/src/MonetbilPaymentWidget";
import { useFormData } from "@/context/provider";
import splitDate from "@/lib/split-date";
import convertDateFormat from "@/lib/convertDate";
import addWeeksToDate from "@/lib/addWeekDate";
import { Formation } from "@/types/formation";
import { CalendarDaysIcon, ClockIcon } from "@heroicons/react/24/outline";
import { BanknotesIcon } from "@heroicons/react/24/solid";
import {
  Button,
  Chip,
  Dialog,
  DialogBody,
  DialogFooter,
  DialogHeader,
  IconButton,
  MenuItem,
  Typography,
} from "@material-tailwind/react";
import { redirect } from "next/navigation";
import Image from "next/image";
import Link from "next/link";
import React, { FC, useCallback, useEffect, useState } from "react";
import { DialogPaiement } from "../paiement/dialog-paiement";
import { Account } from "@/api/account.api";
import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
import { faRightToBracket, faPlus } from "@fortawesome/free-solid-svg-icons";

// interface CardFormationProps {
//   item: Formation;
//  // onSaveContext: (item:Formation)=>void;
// }
export const CardFormation = ({ item }, id) => {
  const [open, setOpen] = React.useState(false);
  const [openDialogAccount, setOpenDialogAccount] = useState(false);
  const handleOpen = () => {
    if (Account.isAuth()) {
      setOpen(!open);
    } else {
      setOpenDialogAccount(!openDialogAccount);
    }
  };

  // let dataMonetbilWidget = {
  //   amount: 50,
  //   // phone: 653337183,
  //   // phone_lock : true,
  //   locale: "fr",
  //   // operator : 'CM_ORANGEMONEY',
  //   country: "CM",
  //   currency: "XAF",
  //   // item_ref : '1000000001',
  //   // payment_ref : '1000000001',
  //   // user  : '',
  //   first_name: "valdo",
  //   last_name: "steve",
  //   // email  : '',
  //   return_url: "http://localhost:3000", //Not Required
  //   //notify_url : 'https://google.com',//Important
  //   logo: "http://localhost:3000/assets/images/logo.png", //Not Required
  // };
  const handleSaveContext = () => {
    //onSaveContext(item);
  };

  return (
    <div className="group shadow-lg bg-white rounded-md hover:shadow-2xl transition-all">
      <div className="flex md:flex-row md:h-60 h-96 lg:h-[250px] flex-col">
        <div className="relative h-full rounded-md md:w-2/5 bg-black">
          <Image
            src={item.image}
            layout="fill"
            objectFit="cover"
            alt="une image de formation"
            className="rounded-l-md"
            loading="eager"
          />
          <span className="group-hover:bg-jaune_vif group-hover:outline-jaune_vif outline-white outline outline-2 group-hover:text-black transition duration-200 text-white px-4 font-bold text-lg py-2 absolute bottom-4 left-4">
            {Intl.NumberFormat().format(item.prix_formation)} xaf
          </span>
        </div>

        <div className="p-5 md:w-3/5 flex flex-col justify-between gap-2">
          {/* <div className="inline-flex gap-4">
            <div className="rounded-sm bg-vert_clair px-3 font-bold">
              {item.difficulte}
            </div>
            <div className="rounded-sm bg-jaune_vif px-3 font-bold">
              {item.categorie}
            </div>
          </div> */}
          <Link href={`/formation/${item.slug}`}>
            <h1 className="text-xl line-clamp-2 font-bold text-vert_fonce hover:text-green-950">
              {item.name}
              <hr />
            </h1>
          </Link>
          <div
            className="line-clamp-2 h-auto"
            dangerouslySetInnerHTML={{ __html: item.content }}
          />

          {/* <p className="line-clamp-2">{item.content} </p> */}

          <div className="flex justify-between">
            <span className="inline-flex gap-1">
              <ClockIcon className="h-5" />
              Durée:{item.duration}
            </span>
            <span className="inline-flex gap-1 text-md ">
              <CalendarDaysIcon className="h-5" /> Débute le{" "}
              {convertDateFormat(item.date_debut)}
            </span>
          </div>

          <div className="flex flex-row justify-between">
            <Link href={`/formation/${item.slug}`}>
              <Button
                // onClick={handleSaveContext}
                className="outline outline-1 outline-vert_fonce text-black bg-white  rounded-md hover:bg-vert_fonce hover:text-white transition-all"
              >
                En savoir plus
              </Button>
            </Link>
            {addWeeksToDate(item.date_debut, item.duration) > new Date() ? (
              <Button
                onClick={handleOpen}
                className="bg-vert_fonce text-white hover:bg-vert_fonce transition-all"
              >
                S'inscrire
              </Button>
            ) : (
              <Chip
                variant="ghost"
                color="yellow"
                size="sm"
                value="Terminée !"
                icon={
                  <span className="mx-auto mt-1 block h-2 w-2 rounded-full bg-yellow-900 content-['']" />
                }
              />
            )}
          </div>
        </div>
      </div>
      {/* <DialogPaiement cours_id={item.id} cours_prix={item.prix_formation} state_modal={open} cours_name={item.name}/> */}
      <Dialog
        className="p-5 z-50"
        open={open}
        size="sm"
        handler={handleOpen}
        dismiss={false}
        animate={{
          mount: { scale: 1, y: 0 },
          unmount: { scale: 0.9, y: -100 },
        }}
      >
        <DialogHeader className="flex justify-between ">
          <span className="text_vert_fonce">{item.name}</span>
          <span className="flex items-center">
            <BanknotesIcon height={30} className="text-vert_fonce" />
            {Intl.NumberFormat().format(item.prix_formation)}&nbsp;XAF
          </span>
        </DialogHeader>
        <DialogBody className="text-xl flex flex-col gap-7 items-center">
          <p>
            Vous êtes sur le point de finaliser votre inscription en effectuant
            le paiement pour cette formation. Merci de procéder au règlement
            pour compléter votre inscription
          </p>
          <MonetbilPaymentWidget
            buttonClass={
              "flex items-center gap-4 bg-vert_fonce text-white text-md p-4 rounded-md hover:shadow-lg hover:bg-jaune_vif transition-all hover:text-vert_fonce font-bold"
            }
            buttonType="full"
            color="primary"
            serviceKey="AeznALjhi0GqTt5LOlY1LZvR63EDKnqE"
            version="v2.1"
            dataPayment={{
              amount: item.prix_formation,
              locale: "fr",
              country: "CM",
              currency: "XAF",
              item_ref: item.id,
              // payment_ref : '1000000001',
              // user  : '',
              //first_name: "valdo",
              //last_name: "steve",
              // email  : '',
              return_url: "https://promillys-academy.com/", //Not Required
              //notify_url : 'https://google.com',//Important
              logo: "https://promillys-academy.com/assets/images/logo.png",
            }}
            icon={
              <Image
                src={"/assets/images/Momo.jpg"}
                width={60}
                height={60}
                alt={""}
              />
            }
          />
        </DialogBody>
        <DialogFooter>
          {/* <Button
            variant="text"
            color="red"
            onClick={handleOpen}
            className="mr-1"
          >
            <span>Cancel</span>
          </Button>
          <Button variant="gradient" color="green" onClick={handleOpen}>
            <span>Confirm</span>
          </Button> */}
        </DialogFooter>
      </Dialog>

      <Dialog size="xs" open={openDialogAccount} handler={handleOpen}>
        <DialogHeader className="justify-between">
          <div>
            <Typography variant="h3" color="blue-gray">
              Connexion récquise
            </Typography>
            <Typography color="gray" variant="paragraph">
              Vous devez être connecté pour pouvoir poursuivre cet achat
            </Typography>
          </div>
          <IconButton
            color="blue-gray"
            size="sm"
            variant="text"
            onClick={handleOpen}
          >
            {" "}
            <svg
              xmlns="http://www.w3.org/2000/svg"
              fill="none"
              viewBox="0 0 24 24"
              stroke="currentColor"
              strokeWidth={2}
              className="h-5 w-5"
            >
              <path
                strokeLinecap="round"
                strokeLinejoin="round"
                d="M6 18L18 6M6 6l12 12"
              />
            </svg>
          </IconButton>
        </DialogHeader>
        <DialogBody className="overflow-y-scroll !px-5">
          <div className="mb-6">
            <ul className="mt-3 -ml-2 flex flex-col gap-1">
              <Link href={"/account/login"}>
                <MenuItem className="mb-4 flex items-center justify-center gap-3 !py-4 shadow-md">
                  <FontAwesomeIcon
                    icon={faRightToBracket}
                    className="text-vert_fonce h-6 w-6"
                  />
                  <Typography
                    className="uppercase"
                    color="blue-gray"
                    variant="h6"
                  >
                    Se Connecter
                  </Typography>
                </MenuItem>
              </Link>
              <Link href={"/account/login"}>
                <MenuItem className="mb-1 flex items-center justify-center gap-3 !py-4 shadow-md">
                  <FontAwesomeIcon
                    icon={faPlus}
                    className="text-vert_fonce h-6 w-6"
                  />
                  <Typography
                    className="uppercase"
                    color="blue-gray"
                    variant="h6"
                  >
                    Créer un compte
                  </Typography>
                </MenuItem>
              </Link>
            </ul>
          </div>
          <div></div>
        </DialogBody>
        <DialogFooter className="justify-between gap-2"></DialogFooter>
      </Dialog>
    </div>
  );
};