import { Fragment, useState } from "react";
import { t as i18nT } from "i18next";
import { Transition } from "@headlessui/react";
import CheckEmptyCircle from "../icons/CheckEmptyCircleIcon";
import XIcon from "../icons/XIcon";

export default function NotificationSimple() {
  const [show, setShow] = useState(true);

  return (
    <>
      {/* Global notification live region, render this permanently at the end of the document */}
      <div aria-live="assertive" className="pointer-events-none fixed inset-0 flex items-end px-4 py-6 sm:items-start sm:p-6">
        <div className="flex w-full flex-col items-center space-y-4 sm:items-end">
          {/* Notification panel, dynamically insert this into the live region when it needs to be displayed */}
          <Transition
            show={show}
            as={Fragment}
            enter="transform ease-out duration-300 transition"
            enterFrom="translate-y-2 opacity-0 sm:translate-y-0 sm:translate-x-2"
            enterTo="translate-y-0 opacity-100 sm:translate-x-0"
            leave="transition ease-in duration-100"
            leaveFrom="opacity-100"
            leaveTo="opacity-0"
          >
            {/* Subframe Toast.Root layout: rounded-md, border-solid border-border-default, px-5 py-5, min/max width, shadow-lg. */}
            <div className="bg-surface-neutral-primary pointer-events-auto w-full min-w-[384px] max-w-[448px] overflow-hidden rounded-md border border-solid border-border-default shadow-lg">
              {/* Subframe header row: flex w-full items-start gap-3. */}
              <div className="flex w-full items-start gap-3 px-5 py-5">
                <div className="shrink-0">
                  <CheckEmptyCircle className="h-6 w-6 text-green-400" aria-hidden="true" />
                </div>
                {/* Subframe content column: grow shrink-0 basis-0 flex-col items-start gap-4. */}
                <div className="flex grow shrink-0 basis-0 flex-col items-start gap-4">
                  <p className="text-text-neutral-primary text-body-default-medium-0 font-body-default-medium-0">
                    {i18nT("components.notifications.preview.savedTitle")}
                  </p>
                  <p className="text-text-neutral-tertiary text-body-default-regular-0 font-body-default-regular-0">
                    {i18nT("components.notifications.preview.savedDescription")}
                  </p>
                </div>
                {/* Subframe dismiss slot: flex items-center justify-center. */}
                <div className="flex shrink-0 items-center justify-center">
                  <button
                    type="button"
                    className="hover:text-text-neutral-tertiary text-text-neutral-tertiary bg-surface-neutral-primary inline-flex rounded-md focus:shadow-focus focus:outline-hidden"
                    onClick={() => {
                      setShow(false);
                    }}
                  >
                    <span className="sr-only">{i18nT("shared.close")}</span>
                    <XIcon className="h-5 w-5" aria-hidden="true" />
                  </button>
                </div>
              </div>
            </div>
          </Transition>
        </div>
      </div>
    </>
  );
}