import Typography, {
  TypographyProps,
} from "@/components/ui/Typography/Typography";
import { BottomActionButton } from "@/components/widgets/BottomActionButton/BottomActionButton";
import PrivacyTermsConsent from "@/components/widgets/PrivacyTermsConsent/PrivacyTermsConsent";
import SoulmatePortraitsDelivered from "@/components/widgets/SoulmatePortraitsDelivered/SoulmatePortraitsDelivered";
import { useDynamicSize } from "@/hooks/DOM/useDynamicSize";
import { cn } from "@/lib/utils";

export interface SoulmatePortraitProps
  extends Omit<React.ComponentProps<"div">, "title"> {
  bottomActionButtonProps?: React.ComponentProps<typeof BottomActionButton>;
  privacyTermsConsentProps?: React.ComponentProps<typeof PrivacyTermsConsent>;
  title?: TypographyProps<"h1">;
  soulmatePortraitsDeliveredProps?: React.ComponentProps<
    typeof SoulmatePortraitsDelivered
  >;
  subtitle?: TypographyProps<"h2">;
  textListProps?: React.ComponentProps<"ul"> & {
    items: TypographyProps<"li">[];
  };
}

export default function SoulmatePortrait({
  bottomActionButtonProps,
  privacyTermsConsentProps,
  title,
  subtitle,
  soulmatePortraitsDeliveredProps,
  textListProps,
  ...props
}: SoulmatePortraitProps) {
  const {
    height: bottomActionButtonHeight,
    elementRef: bottomActionButtonRef,
  } = useDynamicSize<HTMLDivElement>({
    defaultHeight: 132,
  });

  return (
    <div
      className="w-full min-h-dvh flex flex-col items-center gap-[30px] px-[27px]"
      {...props}
      style={{
        paddingBottom: `${bottomActionButtonHeight}px`,
        ...props.style,
      }}
    >
      <div className="w-full pt-6 pb-3">
        {title && (
          <Typography
            as="h2"
            size="xl"
            weight="bold"
            align="center"
            {...title}
            className={cn(title.className, "leading-[125%] text-primary")}
          />
        )}
      </div>
      {soulmatePortraitsDeliveredProps && (
        <SoulmatePortraitsDelivered {...soulmatePortraitsDeliveredProps} />
      )}
      <div className="w-full flex flex-col items-center gap-2.5">
        {subtitle && (
          <Typography
            as="h2"
            weight="bold"
            align="center"
            {...subtitle}
            className={cn(subtitle.className, "leading-[125%] text-[25px]")}
          />
        )}
        {textListProps && (
          <ul
            {...textListProps}
            className={cn("list-disc pl-6", textListProps?.className)}
          >
            {textListProps?.items.map((item, index) => (
              <Typography
                as="li"
                font="inter"
                weight="medium"
                {...item}
                className={cn(
                  "list-item text-[17px] leading-[26px]",
                  item.className
                )}
                key={index}
              />
            ))}
          </ul>
        )}
      </div>
      {bottomActionButtonProps && (
        <BottomActionButton
          {...bottomActionButtonProps}
          className={cn(
            "max-w-[560px] z-10",
            bottomActionButtonProps.className
          )}
          ref={bottomActionButtonRef}
          childrenUnderButton={
            privacyTermsConsentProps && (
              <PrivacyTermsConsent
                {...privacyTermsConsentProps}
                className={cn(privacyTermsConsentProps.className, "mt-5")}
              />
            )
          }
        />
      )}
    </div>
  );
}
