import React, { FC } from "react";
import NairaBag from "../../assets/images/dashboard/naira-bag.png";
import { Button, Icons } from "../";
import { useSelector } from "react-redux";
import PendingList from "../paginated-list/PendingList";

export interface DashBoardCardProps {
  title?: string;
  desc?: string;
  descSpan?: string;
  descSpanClass?: string;
  onClick?: any;
  cardClass?: string;
  titleClass?: string;
  descClass?: string;
  btnTitle?: string;
  btnTextClass?: string;
  image?: any;
  imgClass?: string;
}

export const DashBoardCard: React.FC<DashBoardCardProps> = ({
  title,
  desc,
  onClick,
  cardClass,
  titleClass,
  descClass,
  descSpan,
  descSpanClass,
  btnTitle,
  btnTextClass,
  image,
  imgClass,
}) => {
  return (
    <div
      className={`h-full w-full rounded-lg p-5 shadow-lg hover:shadow-none bg-no-repeat bg-[90%] flex justify-between gap-4 items-center transition-all duration-300 ${
        cardClass && cardClass
      }`}
      // onClick={onClick}
    >
      <div className="w-3/4 flex flex-col gap-[2.3125rem]">
        {title && (
          <h1
            className={`mb-1 text-[#FFF] text-lg text-left font-bold ${
              titleClass && titleClass
            }`}
          >
            {title}
          </h1>
        )}
        {desc && (
          <p className={`text-lg text-left ${descClass && descClass}`}>
            {desc}{" "}
            {descSpan && (
              <span className={`${descSpanClass && descSpanClass}`}>
                {descSpan}
              </span>
            )}
          </p>
        )}
        {btnTitle && (
          <Button className={btnTextClass} text={btnTitle} onClick={onClick} />
        )}
      </div>
      {image && <img className={imgClass} src={image} alt="card-image" />}
    </div>
  );
};

interface DashboardHomeIntroProps {
  handleNextStep:(value:{})=>any
  step?:number|string
}

const DashboardHomeIntro: FC<DashboardHomeIntroProps> = ({ handleNextStep, step }) => {
  const { userDetails } = useSelector((state:any) => state?.userDetails); // CHECKS IF USER Details are avaliable
  return (
    <div className='w-full'>
    {step == 1 ?
      <>
        <h1 className="font-bold my-5 text-2xl">Hello, {userDetails.firstname}</h1>
        <div className="group w-full lg:w-[27.8125rem] h-[12.75rem] mt-7 ">
          <DashBoardCard
            cardClass="bg-[#5C2684] relative"
            desc="Begin your application and get up to "
            descSpan="5 million naira loan."
            descClass="leading-[1.5625rem] text-lg text-white"
            descSpanClass="font-bold"
            btnTitle="Apply here"
            btnTextClass="w-[11.125rem] h-[2.8125rem] flex justify-center item-center btn-W text-[#FBB700]"
            image={NairaBag}
            imgClass="translate-y-4 -rotate-6"
            onClick={()=>handleNextStep({})}
            />
        </div>
      </>
      :
      <>
        <h1 className="font-bold my-5 text-2xl">Welcome Back, {userDetails.firstname}</h1>
        <div className="group w-full lg:w-[27.8125rem] h-[12.75rem] mt-7 ">
          <DashBoardCard
            cardClass="bg-[#5C2684] relative"
            desc="Your loan application has been reviewed and accepted, please confirm for disbursement."
            // descSpan="5 million naira loan."
            descClass="leading-[1.5625rem] text-lg text-white"
            // descSpanClass="font-bold"
            btnTitle="View and accept"
            btnTextClass="w-[11.125rem] h-[2.8125rem] flex justify-center item-center btn-W text-[#FBB700]"
            image={NairaBag}
            imgClass="translate-y-4 -rotate-6"
            // onClick={handleNextStep}
            />
        </div>
    </>
    }
      <div className='mt-5 w-full'>
        <PendingList
          data={dummyData}
          itemsPerPage={5}
          tableTitle='Current Applications'
        >
          {({data}:any)=>(
            <div className="w-full p-4 rounded-lg shadow-lg bg-white overflow-x-auto min-h-[250px] max-h-[450px]">
              <table className="w-full table-auto">
                <thead>
                  <tr className='text-left border-b-2'>
                    <th className='px-1 py-4'>Date</th>
                    <th className='px-1 py-4'>Amount</th>
                    <th className='px-1 py-4'>Payment Term</th>
                    <th className='px-1 py-4'>Status</th>
                    <th className='px-1 py-4'>Action</th>
                  </tr>
                </thead>
                <tbody>
                  {data.map((item:any, index:any) =>(
                    <tr key={index || item} className='even:bg-slate-100'>
                      <td className='px-1 py-2'>{'item.date'}</td>
                      <td className='px-1 py-2'>The Sliding Mr. Bones (Next Stop, Pottersville)</td>
                      <td className='px-1 py-2'>12</td>
                      <td className='px-1 py-2'>Malcolm Lockyer</td>
                      <td className='px-1 py-2'>
                        <button className='px-2 py-1 border-2 border-black flex gap-2 items-center'>
                          View
                          <Icons name='arrow-right' />
                        </button>
                      </td>
                    </tr>
                  ))}
                </tbody>
              </table>
            </div>
          )}
        </PendingList>
      </div>
    </div>
  );
};

export default DashboardHomeIntro;

const dummyData = [
  {id: 1, name: 'obi John', last_login: '12/12/2024', image: 'string'},
  {id: 1, name: 'obi John', last_login: '12/12/2024', image: 'string'},
  {id: 1, name: 'obi John', last_login: '12/12/2024', image: 'string'},
  {id: 1, name: 'obi John', last_login: '12/12/2024', image: 'string'},
  {id: 1, name: 'obi John', last_login: '12/12/2024', image: 'string'},
  {id: 1, name: 'obi John', last_login: '12/12/2024', image: 'string'}
]

//  {/* <div className="group w-full lg:w-96 h-32">
//         <DefaultCard
//           descText="You currently do not have any open application. Click on apply for a loan to get started."
//           iconName="arrow"
//           iconColor="#FBB700"
//           cardClass={`p-4 bg-[#FFFAFA] border border-[#EE4040]`}
//           descTextClass="text-[#423131] leading-5"
//           onClick={() => {
//             console.log("working");
//           }}
//         />
//       </div> */}

//       {/* <div className="w-full mt-20 flex gap-16 flex-wrap">
//         <div className="group h-40 w-full lg:w-80">
//           <DefaultCard
//             title="Apply for a loan"
//             descText="You currently do not have any open application. Click on apply for a loan to get started."
//             iconName="greater-than"
//             iconColor="#FFF"
//             cardClass={`bg-[#5C2684] bg-[url('../../../src/assets/images/dashboard/card_bg.png')]`}
//             titleClass="text-[#FFF]"
//             descTextClass="text-[#EFEFEF] leading-5"
//             onClick={() => {
//               console.log("working");
//             }}
//           />
//         </div>
//         <div className="group h-40 w-full lg:w-80">
//           <DefaultCard
//             title="Loan history"
//             descText="You currently do not have any open application. Click on apply for a loan to get started."
//             iconName="greater-than"
//             iconColor="#FFF"
//             cardClass={`bg-[#635D4D] bg-[url('../../../src/assets/images/dashboard/card_bg.png')]`}
//             titleClass="text-[#FFF]"
//             descTextClass="text-[#EFEFEF] leading-5"
//             onClick={() => {
//               console.log("working");
//             }}
//           />
//         </div>
//         <div className="group h-40 w-full lg:w-80">
//           <DefaultCard
//             title="How it works?"
//             descText="Steps to follow to complete your loan application successfully."
//             iconName="greater-than"
//             iconColor="#FFF"
//             cardClass={`bg-[#635D4D] bg-[url('../../../src/assets/images/dashboard/card_bg.png')]`}
//             titleClass="text-[#FFF]"
//             descTextClass="text-[#EFEFEF] leading-5"
//             onClick={() => {
//               console.log("working");
//             }}
//           />
//         </div>
//       </div> */}