import dynamic from 'next/dynamic';
import { FC } from 'react';

// import MiniCalendar from "@/components/calendar/MiniCalendar";
import WeeklyRevenue from "./components/WeeklyRevenue";
import TotalSpent from "./components/TotalSpent";
import PieChartCard from "./components/PieChartCard";
import { IoMdHome } from "react-icons/io";
import { IoDocuments } from "react-icons/io5";
import { MdBarChart, MdDashboard } from "react-icons/md";

import { columnsDataCheck, columnsDataComplex } from "./variables/columnsData";

import Widget from "@/components/widget/Widget";
import CheckTable from "./components/CheckTable";
import ComplexTable from "./components/ComplexTable";
import DailyTraffic from "./components/DailyTraffic";
import TaskCard from "./components/TaskCard";
import tableDataCheck from "./variables/tableDataCheck.json";
import tableDataComplex from "./variables/tableDataComplex.json";

const MiniCalendar = dynamic(() => import("@/components/calendar/MiniCalendar"), {
    loading: () => <p>loading...</p>,
    ssr: false
})

type Props = {};

const DashboardPage: FC<Props> = () => {
    return (
        <>
            {/* Card widget */}
            <div className="mt-3 grid grid-cols-1 gap-5 md:grid-cols-2 lg:grid-cols-3 2xl:grid-cols-3 3xl:grid-cols-6">
                <Widget
                    icon={<MdBarChart className="h-7 w-7" />}
                    title={"Earnings"}
                    subtitle={"$340.5"}
                />
                <Widget
                    icon={<IoDocuments className="h-6 w-6" />}
                    title={"Spend this month"}
                    subtitle={"$642.39"}
                />
                <Widget
                    icon={<MdBarChart className="h-7 w-7" />}
                    title={"Sales"}
                    subtitle={"$574.34"}
                />
                <Widget
                    icon={<MdDashboard className="h-6 w-6" />}
                    title={"Your Balance"}
                    subtitle={"$1,000"}
                />
                <Widget
                    icon={<MdBarChart className="h-7 w-7" />}
                    title={"New Tasks"}
                    subtitle={"145"}
                />
                <Widget
                    icon={<IoMdHome className="h-6 w-6" />}
                    title={"Total Projects"}
                    subtitle={"$2433"}
                />
            </div>

            {/* Charts */}
            <div className="mt-5 grid grid-cols-1 gap-5 md:grid-cols-2">
                <TotalSpent />
                <WeeklyRevenue />
            </div>

            {/* Tables & Charts */}
            <div className="mt-5 grid grid-cols-1 gap-5 xl:grid-cols-2">
                {/* Check Table */}
                <div>
                    <CheckTable
                        columnsData={columnsDataCheck}
                        tableData={tableDataCheck}
                    />
                </div>

                {/* Traffic chart & Pie Chart */}
                <div className="grid grid-cols-1 gap-5 rounded-[20px] md:grid-cols-2">
                    <DailyTraffic />
                    <PieChartCard />
                </div>

                {/* Complex Table , Task & Calendar */}
                <ComplexTable
                    columnsData={columnsDataComplex}
                    tableData={tableDataComplex}
                />

                {/* Task chart & Calendar */}
                <div className="grid grid-cols-1 gap-5 rounded-[20px] md:grid-cols-2">
                    <TaskCard />
                    <div className="grid grid-cols-1 rounded-[20px]">
                        <MiniCalendar />
                    </div>
                </div>
            </div>
        </>
    );
}

export default DashboardPage;