// import snacks
import clsx from 'clsx';
import { Transition } from '@headlessui/react';
import React, { Fragment, useEffect } from 'react';
import { addSnack, removeSnack, SnacksSignal } from '../signals/Snacks';

// locals
import Loading from './Loading';
import IconTick from '../icons/Tick';
import IconClose from '../icons/Close';
import ButtonIcon from './Button/Icon';

/**
 * snacks component
 *
 * @param props 
 */
const ComponentSnacks = (props = {}) => {
  // use effect
  useEffect(() => {
    // check window
    if (typeof window === 'undefined') return;
    
    window.addSnack = addSnack;
  }, [typeof window]);

  // return jsx
  return !!Object.keys(SnacksSignal.value || {}).length && (
    <div
      aria-live="assertive"
      className="flex fixed top-0 right-0 left-auto z-[100] px-4 py-6 pointer-events-none sm:items-start sm:p-6"
    >
      {/* Notification panel, dynamically insert this into the live region when it needs to be displayed */}
      <Transition
        show={true}
        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"
      >
        <div className="flex flex-col space-y-3 w-72">
          {Object.values(SnacksSignal.value || {}).map((snack) => (
            <div key={snack.id} className={clsx(
              'overflow-hidden w-full rounded-xl shadow-lg pointer-events-auto',
              snack.severity === 'error'
                ? 'bg-red-50 text-red-900'
                : snack.severity === 'success'
                  ? 'bg-green-50 text-green-900'
                  : snack.severity === 'warning'
                    ? 'bg-yellow-50 text-yellow-900'
                    : 'bg-primary-50 text-primary-900'
            )}>
              <div className="p-4">
                <div className="flex flex-row items-center">
                  <div className="flex-shrink-0">
                    {typeof snack.progress !== 'undefined' ? (
                      ((snack.progress || 0) >= 100) ? (
                        <IconTick width={24} className={clsx(
                          'w-5 h-5',
                          snack.severity === 'error'
                            ? 'text-red-500'
                            : snack.severity === 'success'
                              ? 'text-green-500'
                              : snack.severity === 'warning'
                                ? 'text-yellow-500'
                                : 'text-primary-500'
                        )} aria-hidden="true" />
                      ) : (
                        <Loading width={24} className={clsx(
                          'w-5 h-5',
                          snack.severity === 'error'
                            ? 'text-red-500'
                            : snack.severity === 'success'
                              ? 'text-green-500'
                              : snack.severity === 'warning'
                                ? 'text-yellow-500'
                                : 'text-primary-500'
                        )} aria-hidden="true" />
                      )
                    ) : (
                      <IconTick width={24} className={clsx(
                        'w-5 h-5',
                        snack.severity === 'error'
                          ? 'text-red-500'
                          : snack.severity === 'success'
                            ? 'text-green-500'
                            : snack.severity === 'warning'
                              ? 'text-yellow-500'
                              : 'text-primary-500'
                      )} aria-hidden="true" />
                    )}
                  </div>
                  <div className="flex-1 ml-3 w-0">
                    <p className="text-sm font-medium text-gray-900">
                      {snack.message}
                    </p>
                  </div>
                  <div className="flex flex-shrink-0 ml-4">
                    <ButtonIcon
                      color={snack.severity}
                      onClick={() => removeSnack(snack)}
                    >
                      <IconClose className="w-5 h-5" aria-hidden="true" />
                    </ButtonIcon>
                  </div>
                </div>
              </div>
            </div>
          ))}
        </div>
      </Transition>
    </div>
  );
};

// export default
export default ComponentSnacks;