import React, { useState } from "react";
import AdminLayout from "./Layout/AdminLayout";
import { FaHome } from "react-icons/fa";
import { FaShop, FaUser } from "react-icons/fa6";
import ReactApexChart from "react-apexcharts";

const Dashboard = (props) => {
    const { module, user, materi } = props;

    const [barChart, setBarChart] = useState({
        theme: {
            mode: "light",
            palette: "palette1",
            monochrome: {
                enabled: false,
                color: "#255aee",
                shadeTo: "light",
                shadeIntensity: 0.65,
            },
        },
        series: [
            {
                name: "Total materi",
                data: materi.map((item) => item.module.length),
                color: "#0f172a",
            },
        ],
        chart: {
            type: "bar",
            height: 350,
            background: "#00000000",
        },
        plotOptions: {
            bar: {
                horizontal: false,
                columnWidth: "55%",
                endingShape: "rounded",
            },
        },
        dataLabels: {
            enabled: false,
        },
        stroke: {
            show: true,
            width: 2,
            colors: ["transparent"],
        },
        xaxis: {
            categories: materi.map((item) => item.nama),
        },
        fill: {
            opacity: 1,
        },
    });

    return (
        <AdminLayout title="Dashboard">
            <div className="flex min-h-full w-full  rounded-[5px] h-full flex-col duration-300 ease-in-out border-[#D6D6D6] dark:border-primary">
                <div className="flex flex-col md:flex-row gap-3 items-center">
                    <CardDashboard
                        title="Total Module"
                        icon={<FaHome />}
                        value={`+${module}`}
                    />
                    <CardDashboard
                        title="Total Users"
                        icon={<FaUser />}
                        value={`+${user}`}
                    />
                </div>
                <h1 className="font-bold text-2xl mt-6">Grafik Materi</h1>
                <div className="flex flex-col mt-3">
                    <ReactApexChart
                        width={"100%"}
                        options={barChart}
                        height={300}
                        series={barChart.series}
                        type="bar"
                    />
                </div>
            </div>
        </AdminLayout>
    );
};

const CardDashboard = ({ title, icon, value }) => {
    return (
        <div className="flex flex-row w-full h-full duration-300 flex-1 gap-1 border-[2px] px-6 py-4 rounded-[5px]">
            <div className="flex flex-col pr-12 flex-1">
                <h1 className="text-sm">{title}</h1>
                <p className="font-semibold text-2xl mt-1">{value}</p>
            </div>
            <div className="mt-1">{icon}</div>
        </div>
    );
};

export default Dashboard;