import { Text, Title } from "../../tremor/Text";
import { Card } from "../../tremor/Card";
import React, { useEffect, useMemo, useState } from "react";
import { useBackend } from "../../layouts/Wrapper";

import {
  ClockIcon,
  LinkIcon,
  PencilIcon,
  TableCellsIcon,
} from "@heroicons/react/24/outline";

import dayjs from "dayjs";
import relativeTime from "dayjs/plugin/relativeTime";
import { Dashboard, DashboardMeta } from "@onvo-ai/js";
import { useTheme } from "../Dashboard/useTheme";
import { Input } from "../../tremor/Input";
dayjs.extend(relativeTime);

const DashboardCard: React.FC<{
  dashboard: Dashboard & { _meta: DashboardMeta };
  onClick?: (dashboard: Dashboard & { _meta: DashboardMeta }) => void;
  variant?: "list" | "grid";
}> = ({ dashboard, onClick, variant = "grid" }) => {
  return (
    <Card
      onClick={() => onClick && onClick(dashboard)}
      className={
        "onvo-dashboard-card !onvo-p-4 onvo-cursor-pointer onvo-gap-4 onvo-flex " +
        (variant === "grid"
          ? "onvo-flex-col"
          : "onvo-flex-row onvo-items-center")
      }
    >

      <div className="onvo-flex onvo-flex-grow onvo-flex-row onvo-items-center onvo-gap-4">

        {dashboard.thumbnail && dashboard.thumbnail.trim() !== "" && (
          <div
            className={
              "onvo-relative onvo-rounded-lg onvo-border-solid onvo-border onvo-border-gray-200 onvo-bg-gray-50 onvo-object-contain onvo-object-top onvo-transition-all group-hover:onvo-shadow-lg dark:onvo-border-gray-700 dark:onvo-bg-gray-950 onvo-size-14 onvo-shrink-0"
            }
          >
            <img
              src={dashboard.thumbnail || ""}
              alt={dashboard.title}
              className="onvo-rounded-lg onvo-bg-gray-50 onvo-h-full onvo-w-full onvo-object-cover onvo-object-top dark:onvo-bg-gray-950 hover:onvo-object-bottom onvo-transition-all"
            />
          </div>)}
        <div className="onvo-flex-grow">
          <Title className="onvo-dashboard-card-title">{dashboard.title}</Title>
          <Text className="onvo-dashboard-card-description">
            {dashboard.description}
          </Text>
        </div>
      </div>

      <div className="onvo-grid onvo-grid-cols-2">
        <div className="onvo-w-36 onvo-flex-shrink-0 onvo-flex onvo-flex-col onvo-gap-1">
          <Text className="onvo-dashboard-card-details-text onvo-flex onvo-flex-row onvo-items-center onvo-gap-2">
            <TableCellsIcon height={16} width={16} /> {dashboard._meta.widgets}{" "}
            widgets
          </Text>
          <Text className="onvo-dashboard-card-details-text onvo-flex onvo-flex-row onvo-items-center onvo-gap-2">
            <LinkIcon height={16} width={16} /> {dashboard._meta.datasources}{" "}
            datasources
          </Text>
        </div>
        <div className="onvo-w-48 onvo-flex-shrink-0 onvo-flex onvo-flex-col onvo-gap-1">
          <Text className="onvo-dashboard-card-details-text onvo-flex onvo-flex-row onvo-items-center onvo-gap-2">
            <ClockIcon height={16} width={16} />
            Created {dayjs(dashboard.created_at).fromNow()}
          </Text>
          <Text className="onvo-dashboard-card-details-text onvo-flex onvo-flex-row onvo-items-center onvo-gap-2">
            <PencilIcon height={16} width={16} />
            Updated {dayjs(dashboard.last_updated_at).fromNow()}
          </Text>
        </div>
      </div>
    </Card>
  );
};

export const DashboardList: React.FC<{
  onClickItem?: (dashboard: any) => void;
  variant?: "list" | "grid";
  title?: string;
  theme?: "light" | "dark" | "system";
}> = ({ onClickItem, variant = "grid", title = "Dashboards", theme: themeProp = "system" }): React.ReactNode => {
  const [dashboards, setDashboards] = useState<any[]>([]);
  const { backend } = useBackend();
  const theme = useTheme(themeProp);
  const [search, setSearch] = useState("");

  console.log("THEME: ", theme);

  useEffect(() => {
    if (backend) {
      backend.dashboards
        .list()
        .then((a) => {
          // @ts-ignore
          setDashboards(a);
        })
        .catch((e) => console.log("UNABLE TO FETCH LIST: ", e));
    }
  }, [backend]);

  const filtered = useMemo(() => {
    return (
      search === ""
        ? dashboards
        : dashboards.filter((a) => {
          return (a.id + " " + a.title + " " + a.description)
            .toLowerCase()
            .includes(search.toLowerCase());
        })
    )
  }, [dashboards, search]);


  return (
    <div className="onvo-relative onvo-min-h-screen onvo-bg-slate-100 dark:onvo-bg-slate-900 onvo-p-4">
      <div className="onvo-mb-3 onvo-flex onvo-flex-row onvo-items-center onvo-justify-between">
        <Title className="!onvo-text-2xl">{title}</Title>
        <Input
          type="search"
          placeholder="Search"
          className="onvo-max-w-96"
          onChange={(e) => setSearch(e.target.value)}
        />
      </div>
      <div
        className={"onvo-root-style onvo-dashboard-list onvo-w-full onvo-grid onvo-gap-4 onvo-grid-cols-1 " + (variant === "grid" ? "md:onvo-grid-cols-2 xl:onvo-grid-cols-3" : "")}
      >
        {filtered.map((a) => (
          <DashboardCard
            key={a.id}
            dashboard={a}
            onClick={onClickItem}
            variant={variant}
          />
        ))}
      </div>
    </div>
  );
};