import {
  createContext,
  useContext,
  useState,
  useEffect,
  isValidElement,
  Children,
} from '@wordpress/element';

type ModalContextType = {
  closeModal: () => void;
  openModal: () => void;
};

const ModalContext = createContext<ModalContextType | null>(null);

export const useModalContext = () => {
  const context = useContext(ModalContext);
  if (!context) {
    throw new Error('useModalContext must be used within a ModalProvider');
  }
  return context;
};

import { Modal as WordpressModal } from '@wordpress/components';
import classNames from 'classnames';
type ModalProps = {
  children: React.ReactElement | React.ReactElement[];
  defaultOpen: boolean;
  onOpenChange: (checked: boolean) => void;
};

const Modal: React.FC<ModalProps> = ({
  children,
  defaultOpen,
  onOpenChange,
}) => {
  const [isOpen, setOpen] = useState(false);

  // Sync `isOpen` with `defaultOpen` when `defaultOpen` changes
  useEffect(() => {
    setOpen(defaultOpen);
  }, [defaultOpen]);

  const openModal = () => setOpen(true);
  const closeModal = () => setOpen(false);

  useEffect(() => {
    onOpenChange(isOpen);
  }, [isOpen, onOpenChange]);

  return (
    <ModalContext.Provider value={{ closeModal, openModal }}>
      {/* Render MOdalTrigger */}
      {Children.map(children, (child) => {
        return isValidElement(child) && child.type === ModalTrigger
          ? child
          : null;
      })}
      {isOpen && (
        <WordpressModal
          className="blockbite-ui__modal"
          onRequestClose={closeModal}
        >
          <div className="relative">
            {/* Render ModalHeader */}
            {Children.map(children, (child) => {
              return isValidElement(child) && child.type === ModalHeader
                ? child
                : null;
            })}
            {/* Render ModalContent */}
            {Children.map(children, (child) => {
              return isValidElement(child) && child.type === ModalContent
                ? child
                : null;
            })}
            {/* Render ModalFooter */}
            {Children.map(children, (child) => {
              return isValidElement(child) && child.type === ModalFooter
                ? child
                : null;
            })}
          </div>
        </WordpressModal>
      )}
    </ModalContext.Provider>
  );
};

// Header component for modal
const ModalHeader: React.FC<{
  children: React.ReactNode;
  className?: string;
}> = ({ children, className = '', ...props }) => (
  <div
    className={classNames(
      'flex flex-col space-y-1.5 text-center sm:text-left',
      className
    )}
    {...props}
  >
    {children}
  </div>
);

// Footer component for modal
const ModalFooter: React.FC<{
  children: React.ReactNode;
  className?: string;
}> = ({ children, className = '', ...props }) => (
  <div
    className={classNames(
      'fixed bottom-0 left-0 right-0 mt-2 flex flex-row justify-end space-x-2 border border-gray-400 bg-white p-1 px-4',
      className
    )}
    {...props}
  >
    {children}
  </div>
);

// Title component for modal
const ModalTitle: React.FC<{
  children: React.ReactNode;
  className?: string;
}> = ({ children, className = '', ...props }) => (
  <div
    className={classNames(
      'mb-4 text-lg font-semibold leading-none tracking-tight',
      className
    )}
    {...props}
  >
    {children}
  </div>
);

// Description component for modal
const ModalContent: React.FC<{
  children: React.ReactNode;
  className?: string;
}> = ({ children, className = '', ...props }) => (
  <div className={classNames('text-gray-medium text-sm', className)} {...props}>
    {children}
  </div>
);

const ModalClose: React.FC<{
  children: React.ReactNode;
}> = ({ children }) => {
  const { closeModal } = useModalContext();
  return (
    <div onClick={closeModal} className="cursor-pointer">
      {children}
    </div>
  );
};

const ModalTrigger: React.FC<{
  children: React.ReactNode;
}> = ({ children }) => {
  const { openModal } = useModalContext();
  return (
    <div onClick={openModal} className="cursor-pointer">
      {children}
    </div>
  );
};

export {
  Modal,
  ModalHeader,
  ModalFooter,
  ModalTitle,
  ModalContent,
  ModalClose,
  ModalTrigger,
};