import { FC, useEffect, useState } from 'react';
import { useIntl } from 'react-intl';
import { toAbsoluteUrl } from '../../../_digifi/helpers';
import { PageTitle } from '../../../_digifi/layout/core';
import {
  // ListsWidget2,
  ListsWidget3,
  // ListsWidget4,
  // ListsWidget6,
  // TablesWidget5,
  TablesWidget10,
  // MixedWidget8,
  CardsWidget7,
  CardsWidget17,
  CardsWidget20,
  ListsWidget26,
  EngageWidget10,
} from '../../../_digifi/partials/widgets';
import { ToolbarWrapper } from '../../../_digifi/layout/components/toolbar';
import { Content } from '../../../_digifi/layout/components/content';
import { getUserDashDetails } from '../../modules/auth/core/_requests';
import { DashDataProps } from './model';

const DashboardPage: FC = () => {
  const [dashDetails, setDashDetails] = useState<DashDataProps>({loading:true, data:{}})

  useEffect(()=>{
    getUserDashDetails().then(res => {
      setDashDetails({loading:false, data:res.data})
    }).catch(err => {
      setDashDetails({loading:false, data:{}})
      console.log(err)
    })
  },[])

  return (
    <>
      <ToolbarWrapper />
      <Content>
        {/* begin::Row */}
        <div className="row g-5 g-xl-10 mb-5 mb-xl-10">
          {/* begin::Col */}
          <div className="col-md-6 col-lg-6 col-xl-6 col-xxl-3 mb-md-5 mb-xl-10">
            <CardsWidget20
              className="h-md-50 mb-5 mb-xl-10"
              description="Active Applications"
              color="#F1416C"
              img={toAbsoluteUrl('media/patterns/vector-1.png')}
              dashData={dashDetails}
            />
            <CardsWidget7
              className="h-md-50 mb-5 mb-xl-10"
              description="Todays Applications"
              icon={false}
              stats={357}
              labelColor="dark"
              textColor="gray-300"
              dashData={dashDetails}
            />
          </div>
          {/* end::Col */}

          {/* begin::Col */}
          <div className="col-md-6 col-lg-6 col-xl-6 col-xxl-3 mb-md-5 mb-xl-10">
            <CardsWidget17 dashData={dashDetails} className="h-md-50 mb-5 mb-xl-10" />
            <ListsWidget26 className="h-lg-50" />
          </div>
          {/* end::Col */}

          {/* begin::Col */}
          <div className="col-xxl-6">
            <EngageWidget10 className="h-md-100" />
          </div>
          {/* end::Col */}
        </div>
        {/* end::Row */}

        {/* begin::Row */}
        <div className="row gx-5 gx-xl-10">
          {/* begin::Col */}
          <div className="col-xxl-6 mb-5 mb-xl-10">
            {/* <app-new-charts-widget8 cssclassName="h-xl-100" chartHeight="275px" [chartHeightNumber]="275"></app-new-charts-widget8> */}
          </div>
          {/* end::Col */}

          {/* begin::Col */}
          <div className="col-xxl-6 mb-5 mb-xl-10">
            {/* <app-cards-widget18 cssclassName="h-xl-100" image="./assetsmedia/stock/600x600/img-65.jpg"></app-cards-widget18> */}
          </div>
          {/* end::Col */}
        </div>
        {/* end::Row */}

        {/* begin::Row */}
        <div className="row gy-5 gx-xl-8">
          {/* BVN VERIFICATION */}
          <div className="col-xxl-4">
            <ListsWidget3 dashData={dashDetails} className="card-xxl-stretch mb-xl-3" />
          </div>
          {/* RECENT LOAN APPLICATION */}
          <div className="col-xl-8">
            <TablesWidget10 dashData={dashDetails} className="card-xxl-stretch mb-5 mb-xl-8" />
          </div>
        </div>
        {/* end::Row */}
      </Content>
    </>
  )
}

const DashboardWrapper: FC = () => {
  const intl = useIntl();
  return (
    <>
      <PageTitle breadcrumbs={[]}>
        {intl.formatMessage({ id: 'MENU.DASHBOARD' })}
      </PageTitle>
      <DashboardPage />
    </>
  );
};

export { DashboardWrapper };