import { Text } from "../../tremor/Text";
import {
  LanguageIcon,
  PhotoIcon,
  DivideIcon,
} from "@heroicons/react/20/solid";
import { Tooltip } from "../../tremor/Tooltip/Tooltip";
import React from "react";
import { useTextWidgetModal } from "../TextWidgetModal";
import { useImageWidgetModal } from "../ImageWidgetModal";
import { useDashboard } from "../../layouts/Dashboard/useDashboard";
import { useBackend } from "../../layouts/Wrapper";
import { useMaxHeight } from "../../lib/useMaxHeight";
import { CubeTransparentIcon, LightBulbIcon, PlusIcon } from "@heroicons/react/24/outline";
import { ChartBarIcon } from "@heroicons/react/24/solid";
import { useEditWidgetModal } from "../EditWidgetModal";
import { useWidgetSuggestionsModal } from "../WidgetSuggestionsModal";
import { Popover, PopoverContent, PopoverTrigger } from "../../tremor/Popover";

const BLANK_CODE = `def main():  
    return []
`;

export const CreateToolbar: React.FC<{}> = ({
}) => {
  const { setOpen: setTextModalOpen } = useTextWidgetModal();
  const { setOpen: setImageModalOpen } = useImageWidgetModal();
  const { setOpen: setAdvancedModalOpen } = useEditWidgetModal();
  const { setOpen: setSuggestionsModalOpen, open: suggestionsModalOpen } = useWidgetSuggestionsModal();
  const { setOpen: setEditModalOpen } = useEditWidgetModal();

  const { dashboard, refreshWidgets, tab } = useDashboard();
  const { backend, adminMode } = useBackend();
  const { lg, sm } = useMaxHeight();

  const createWidget = async () => {
    if (!dashboard || !backend) return;
    const widget = await backend.widgets.create({
      dashboard: dashboard.id,
      layouts: {
        lg: {
          x: 0,
          y: lg,
          w: 4,
          h: 20,
        },
        sm: {
          x: 0,
          y: sm,
          w: 3,
          h: 20,
        },
      },
      use_in_library: false,
      use_in_chat: false,
      title: "New widget",
      type: "",
      team: dashboard.team,
      code: "",
      messages: [],
      settings: {},
      error: null,
      tab: tab || 0,
      engine: "python-v1",
      config: {},
      drilldown_widget: null,
    });
    setEditModalOpen(true, widget);
  }

  const addDividerWidget = async () => {
    if (!dashboard || !backend) return;
    let cache = {
      type: "divider",
      data: { datasets: [{ data: [], label: "" }] },
      options: {
        responsive: true,
        maintainAspectRatio: false,
        plugins: {
          divider: {
            display: true,
          },
          title: {
            display: false,
          },
          legend: {
            display: false,
          },
          subtitle: {
            display: false,
          },
        }
      },
    };

    await backend.widgets.create({
      dashboard: dashboard.id,
      layouts: {
        lg: {
          x: 0,
          y: lg,
          w: 12,
          h: 4,
        },
        sm: {
          x: 0,
          y: sm,
          w: 3,
          h: 4,
        },
      },
      use_in_library: false,
      use_in_chat: false,
      title: "Divider",
      type: "divider",
      team: dashboard.team,
      code: "",
      messages: [],
      settings: {},
      error: null,
      tab: tab || 0,
      engine: "manual-v1",
      config: cache,
      drilldown_widget: null,
    });
    refreshWidgets(backend);
  };

  const addAdvancedWidget = async () => {
    if (!dashboard || !backend) return;
    let cache = {
      type: "line",
      data: { datasets: [{ data: [], label: "" }] },
      options: {
        responsive: true,
        maintainAspectRatio: false,
        plugins: {
          title: {
            display: true,
            text: "New Widget"
          },
          legend: {
            display: false,
          },
          subtitle: {
            display: false,
          },
        },
        scales: {
          x: {
            display: true
          },
          y: {
            display: true
          }
        }
      },
    };

    let wid = await backend.widgets.create({
      dashboard: dashboard.id,
      layouts: {
        lg: {
          x: 0,
          y: lg,
          w: 4,
          h: 4,
        },
        sm: {
          x: 0,
          y: sm,
          w: 3,
          h: 4,
        },
      },
      use_in_library: false,
      use_in_chat: false,
      type: "bar",
      title: "New widget",
      team: dashboard.team,
      code: BLANK_CODE,
      messages: [],
      settings: {},
      error: null,
      tab: tab || 0,
      engine: "manual-v1",
      config: cache,
      drilldown_widget: null,
    });
    refreshWidgets(backend);
    setAdvancedModalOpen(true, wid);
  };

  if (
    !dashboard?.settings?.can_ask_questions &&
    !dashboard?.settings?.can_create_widgets &&
    !adminMode
  ) {
    return <></>;
  }

  return (
    <>
      <div
        className={
          "onvo-absolute onvo-z-40 onvo-shadow-xl onvo-transition-all onvo-ease-in-out onvo-rounded-full onvo-bottom-4 onvo-flex onvo-justify-start onvo-gap-1 onvo-flex-row onvo-left-[50%] -onvo-translate-x-[50%] onvo-p-2 onvo-backdrop-blur-lg onvo-border-solid onvo-border onvo-border-black/10 dark:onvo-border-white/10"
        }
      >

        <div className="onvo-w-full onvo-absolute onvo-top-0 onvo-left-0 onvo-right-0 onvo-bottom-0 onvo-foreground-color onvo-opacity-50 onvo-rounded-full -onvo-z-10"></div>
        {(dashboard?.settings?.can_ask_questions || adminMode) && (
          <div
            onClick={createWidget}
            className="onvo-group onvo-relative onvo-cursor-pointer onvo-flex onvo-flex-row onvo-gap-2 onvo-items-center onvo-bg-transparent onvo-rounded-full onvo-border-solid onvo-border onvo-border-black/10 dark:onvo-border-white/10"
          >

            <div className="onvo-size-10 group-hover:onvo-w-full onvo-overflow-x-hidden onvo-ease-in-out onvo-duration-100 onvo-transition-all onvo-bg-blue-500 onvo-rounded-full onvo-text-white onvo-flex onvo-justify-start onvo-items-center onvo-absolute onvo-left-0 onvo-top-0">
              <Text className="onvo-flex-shrink-0 onvo-relative onvo-whitespace-nowrap onvo-left-12 onvo-text-white onvo-font-semibold !onvo-w-32 onvo-mr-2">
                Create chart
              </Text>
            </div>
            <div className="onvo-size-10 onvo-z-10 onvo-bg-blue-500 onvo-rounded-full onvo-text-white onvo-flex onvo-justify-center onvo-items-center">
              <ChartBarIcon className="onvo-size-5" />
            </div>
            <Text className=" onvo-flex-grow onvo-font-semibold onvo-w-24 onvo-mr-2">
              Create chart
            </Text>
          </div>
        )}

        <Popover>
          <PopoverTrigger>
            <Tooltip content="Add other components">
              <div
                className="onvo-group onvo-transition-all onvo-h-10 onvo-w-10 onvo-bg-transparent hover:onvo-bg-blue-500 onvo-rounded-full onvo-text-white onvo-flex onvo-justify-center onvo-items-center onvo-border-solid onvo-border onvo-border-black/10 dark:onvo-border-white/10">
                <PlusIcon className="onvo-size-6 onvo-text-blue-500 group-hover:!onvo-text-white onvo-transition-all" />
              </div>
            </Tooltip>
          </PopoverTrigger>
          <PopoverContent side="bottom" sideOffset={20} className="onvo-flex onvo-flex-col !onvo-rounded-3xl !onvo-p-1">
            {(dashboard?.settings?.can_create_widgets || adminMode) && dashboard?.settings?.enable_advanced_widget_creator && (
              <div
                onClick={(e) => {
                  e.preventDefault();
                  addAdvancedWidget();
                }} className="onvo-p-1 onvo-flex onvo-flex-row onvo-gap-2 onvo-items-center onvo-rounded-full onvo-transition-all onvo-cursor-pointer hover:onvo-bg-blue-500/10">
                <div
                  className="onvo-group onvo-transition-all onvo-size-8 onvo-bg-transparent hover:onvo-bg-blue-500 onvo-rounded-full onvo-text-white onvo-flex onvo-justify-center onvo-items-center onvo-border-solid onvo-border onvo-border-black/10 dark:onvo-border-white/10">
                  <CubeTransparentIcon className="onvo-size-4 onvo-text-blue-500 group-hover:!onvo-text-white onvo-transition-all" />
                </div>
                <Text>Manual widget creator</Text></div>
            )}

            {(dashboard?.settings?.can_create_widgets || adminMode) && (
              <>
                <div onClick={(e) => {
                  e.preventDefault();
                  setImageModalOpen(true);
                }} className="onvo-p-1 onvo-flex onvo-flex-row onvo-gap-2 onvo-items-center onvo-rounded-full onvo-transition-all onvo-cursor-pointer hover:onvo-bg-blue-500/10">
                  <div
                    className="onvo-group onvo-transition-all onvo-size-8 onvo-bg-transparent hover:onvo-bg-blue-500 onvo-rounded-full onvo-text-white onvo-flex onvo-justify-center onvo-items-center onvo-border-solid onvo-border onvo-border-black/10 dark:onvo-border-white/10">
                    <PhotoIcon className="onvo-size-4 onvo-text-blue-500 group-hover:!onvo-text-white onvo-transition-all" />
                  </div>
                  <Text>Add image widget</Text>
                </div>
                <div
                  onClick={(e) => {
                    e.preventDefault();
                    setTextModalOpen(true);
                  }} className="onvo-p-1 onvo-flex onvo-flex-row onvo-gap-2 onvo-items-center onvo-rounded-full onvo-transition-all onvo-cursor-pointer hover:onvo-bg-blue-500/10">
                  <div
                    className="onvo-group onvo-transition-all onvo-size-8 onvo-bg-transparent hover:onvo-bg-blue-500 onvo-rounded-full onvo-text-white onvo-flex onvo-justify-center onvo-items-center onvo-border-solid onvo-border onvo-border-black/10 dark:onvo-border-white/10">
                    <LanguageIcon className="onvo-size-4 onvo-text-blue-500 group-hover:!onvo-text-white onvo-transition-all" />
                  </div>
                  <Text>Add text widget</Text>
                </div>
                <div
                  onClick={(e) => {
                    e.preventDefault();
                    addDividerWidget();
                  }} className="onvo-p-1 onvo-flex onvo-flex-row onvo-gap-2 onvo-items-center onvo-rounded-full onvo-transition-all onvo-cursor-pointer hover:onvo-bg-blue-500/10">
                  <div
                    className="onvo-group onvo-transition-all onvo-size-8 onvo-bg-transparent hover:onvo-bg-blue-500 onvo-rounded-full onvo-text-white onvo-flex onvo-justify-center onvo-items-center onvo-border-solid onvo-border onvo-border-black/10 dark:onvo-border-white/10">
                    <DivideIcon className="onvo-size-4 onvo-text-blue-500 group-hover:!onvo-text-white onvo-transition-all" />
                  </div>
                  <Text>Add divider widget</Text>
                </div>
              </>
            )}
          </PopoverContent>
        </Popover>


        {adminMode && (
          <Tooltip content="Widget suggestions" open={suggestionsModalOpen ? false : undefined}>
            <div
              onClick={(e) => {
                setSuggestionsModalOpen(!suggestionsModalOpen);
              }}
              className={"onvo-group onvo-transition-all onvo-h-10 onvo-w-10 hover:onvo-bg-blue-500 onvo-rounded-full onvo-text-white onvo-flex onvo-justify-center onvo-items-center onvo-border-solid onvo-border onvo-border-black/10 dark:onvo-border-white/10 " + (suggestionsModalOpen ? "onvo-bg-blue-500" : "onvo-bg-transparent")}>
              <LightBulbIcon className={"onvo-size-6 " + (suggestionsModalOpen ? "onvo-text-white" : "onvo-text-blue-500") + " group-hover:!onvo-text-white onvo-transition-all"} />
            </div>
          </Tooltip>
        )}
      </div></>
  );
};