"use client";

import React from "react";
import {
  backdropAnimationVariants,
  contentAnimationVariants,
  sizeToPixel,
} from "./constants";
import { ModalProps } from "./types";
import { motion } from "framer-motion";

import * as Dialog from "@radix-ui/react-dialog";
import { MaterialIcon } from "@shared/components/material-icon";
import { Text } from "@shared/components/text";
import { Button } from "@shared/contentful/blocks/button";
import { cx } from "@shared/utils";

type ExtendedModalProps = ModalProps & {
  type?: string;
  index?: number;
};
export const Modal: React.FC<ExtendedModalProps> = props => {
  const {
    isOpen,
    onRequestClose,
    size,
    title,
    content,
    description,
    children,
    bodyClassName,
    type = "modal",
    index = 0,
  } = props;

  return (
    <Dialog.Root
      open={isOpen}
      onOpenChange={() => isOpen && onRequestClose?.()}
    >
      <Dialog.Portal>
        <motion.div
          initial="closed"
          animate={isOpen ? "open" : "closed"}
          variants={backdropAnimationVariants}
          transition={{ type: "tween", duration: 0.2, ease: "easeInOut" }}
          className="fixed inset-0 z-[1000] bg-scrim-bg-modal"
        >
          <Dialog.Overlay />
        </motion.div>
        <div className="pointer-events-none fixed inset-0 z-[1001] flex items-center justify-center">
          <motion.div
            initial="closed"
            animate={isOpen ? "open" : "closed"}
            variants={contentAnimationVariants}
            transition={{ type: "tween", duration: 0.3, ease: "easeInOut" }}
            className="pointer-events-auto w-[calc(100vw-10px)] focus:outline-none sm:w-[calc(100vw-90px)]"
          >
            <Dialog.Content
              onOpenAutoFocus={e => e.preventDefault()}
              className={cx(
                "relative mx-auto w-full rounded-modal bg-bg p-[25px] shadow-drop focus:outline-none",
                bodyClassName
              )}
              style={{ maxWidth: sizeToPixel[size || "lg"] }}
            >
              <div data-section-type={type} data-section-index={index}>
                <Dialog.Close asChild={true}>
                  <Button
                    showButtonAs="unstyled"
                    buttonClassName="absolute right-0 top-0 mr-2 mt-2 bg-bg"
                  >
                    <MaterialIcon name="close" />
                  </Button>
                </Dialog.Close>
                <div className="custom-modal-body max-h-[85vh] overflow-visible">
                  {title ? (
                    <Text
                      className={cx(
                        "mb-3 mt-5 w-full pr-8 text-center sm:pr-0",
                        "heading5 md:pt-0",
                        "mb-4 md:mb-[60px]"
                      )}
                      as="h2"
                    >
                      {title}
                    </Text>
                  ) : null}

                  {description ? (
                    <Text as="div" className="mb-8 sm:mb-5">
                      {description}
                    </Text>
                  ) : null}

                  <div className="flex flex-col gap-4 sm:gap-5">
                    {content}
                    {children ? children : null}
                  </div>
                </div>
              </div>
            </Dialog.Content>
          </motion.div>
        </div>
      </Dialog.Portal>
    </Dialog.Root>
  );
};