import { Link, useLocation } from "react-router";
import { t as i18nT } from "i18next";
import { Menu } from "@headlessui/react";
import clsx from "clsx";
import DropdownWithClick from "./DropdownWithClick";

export default function PreviewDropdownsWithClick() {
  const currentRoute = useLocation().pathname;
  return (
    <div className="not-prose border-border bg-background space-x-2 border border-dashed p-6">
      <div className="w-full space-y-2">
        <div className="flex justify-between">
          <DropdownWithClick
            right={true}
            onClick={() => alert(i18nT("components.dropdowns.preview.dropdownClick"))}
            button={<div>{i18nT("components.dropdowns.preview.withClick")}</div>}
            options={
              <div>
                <Menu.Item>
                  {({ active }) => (
                    <button
                      type="button"
                      onClick={() => alert(i18nT("components.dropdowns.preview.clicked"))}
                      className={clsx("w-full text-left", active ? "text-foreground bg-secondary/90" : "text-foreground/80", "block px-4 py-2 text-sm")}
                    >
                      {i18nT("components.dropdowns.preview.button")}
                    </button>
                  )}
                </Menu.Item>
                <Menu.Item>
                  {({ active }) => (
                    <Link
                      to={currentRoute}
                      className={clsx("w-full", active ? "text-foreground bg-secondary/90" : "text-foreground/80", "block px-4 py-2 text-sm")}
                    >
                      <div>{i18nT("components.dropdowns.preview.link")}</div>
                    </Link>
                  )}
                </Menu.Item>
              </div>
            }
          />
          <DropdownWithClick
            onClick={() => alert(i18nT("components.dropdowns.preview.dropdownClick"))}
            button={<div>{i18nT("components.dropdowns.preview.withClick")}</div>}
            options={
              <div>
                <button
                  type="button"
                  className="hover:bg-secondary text-foreground/80 block w-full px-4 py-2 text-left text-sm focus:outline-hidden"
                  tabIndex={-1}
                  onClick={() => alert(i18nT("components.dropdowns.preview.clicked"))}
                >
                  <div>{i18nT("components.dropdowns.preview.button")}</div>
                </button>
                <Link
                  to={currentRoute}
                  className="hover:bg-secondary text-foreground/80 block w-full px-4 py-2 text-left text-sm focus:outline-hidden"
                  tabIndex={-1}
                >
                  <div>{i18nT("components.dropdowns.preview.link")}</div>
                </Link>
              </div>
            }
          />
        </div>
      </div>
    </div>
  );
}