import React, { FC, HTMLAttributes, Children, useState, useEffect, useRef, createContext, useMemo, startTransition, ReactNode } from "react";

import { Padding } from "../../index";
import { getCN } from '../utils'

import './ModalPage.css'

interface IModalPage extends HTMLAttributes<HTMLDivElement> {
  id: string,
  autoPadding?: boolean
  header?: ReactNode | string;
  background?: boolean;
  fullWidth?: boolean;
  ref?: React.RefObject<HTMLDivElement>;
};

const ModalPage: FC<IModalPage> = ({
  id,
  children,
  autoPadding = true,
  header,
  background = true,
  fullWidth = false,
  ref = React.useRef<HTMLDivElement>(null),
  ...restProps
}) => {
  // const [size, setSize] = React.useState<number>();

  // const resizeHandler = () => {
  //   if (ref.current) {
  //     const { offsetHeight, clientWidth } = ref.current;
  //     setSize(offsetHeight);
  //   }
  // };

  // useEffect(() => {
  //   resizeHandler();
  // }, [
  //   ref.current,
  //   ref.current && ref.current.offsetHeight,
  //   children,
  //   ref
  // ]);

  // useEffect(() => {
  //   bindImagesOnload(ref.current, function () {
  //     resizeHandler()
  //   });
  // }, [children])

  return <div {...restProps} data-background={background} className={getCN(`ModalPage`, restProps.className)} id={id}>
    {header && <div className={getCN(`ModalPage__header`)}>{header}</div>}

    <div data-fullwidth={fullWidth} /*style={{ height: `100%` }} */ className={getCN(`ModalPage__in`)}>
      <div
        ref={ref}
        className={getCN(`ModalPage__content`)}
        onTouchStart={(e) => e.stopPropagation()}
        onTouchMove={(e) => e.stopPropagation()}
      >
        {children}
      </div>
    </div>
  </div >
}

const bindImagesOnload = (node: any, fn: () => void) => {
  var imgs = node.getElementsByTagName("img"),
    length = imgs.length;
  var onload = () => fn();
  for (var i = 0; i < length; i++) imgs[i].onload = onload;
}

export default ModalPage;