import React, { JSXElementConstructor, ReactElement, useEffect } from "react";
import { ButtonGroup, Separator } from "../..";
import Group from "../Group/Group";
import { getClassName } from "../utils";

import './ActionSheet.css'

export interface IActionSheet extends React.HTMLAttributes<HTMLDivElement> {
  children: React.ReactNode | ReactElement<any, string | JSXElementConstructor<any>>,
  component?: React.ReactNode,

  className?: string | undefined,
};
const ActionSheet = ({
  children,
  component,

  className,
  ...props
}: IActionSheet) => {
  const [open, setOpen] = React.useState<boolean>(false);
  const [__x, setX] = React.useState<number>(1);
  const [__width, setWidth] = React.useState<string | number>(`100%`);

  const __ref = React.useRef<HTMLInputElement | null>(null);
  const __refComponent = React.useRef<HTMLInputElement | null>(null);
  const [openPosition, setOpenPosition] = React.useState<string>(`top`)

  const testOpenClick = () => setOpen(!open);

  useEffect(() => {
    if (__ref.current && __refComponent.current) {
      setX(__refComponent.current.getBoundingClientRect().height)
      if (__ref.current.getBoundingClientRect().bottom < window.innerHeight / 2) setOpenPosition(`bottom`)
      setWidth(__refComponent.current.offsetWidth);
    }
  }, [open])

  return <div onClick={testOpenClick}>
    <div data-open={open} className={getClassName(`ActionSheet`, className)}>
      <div className={getClassName(`ActionSheet__show`)}></div>
      {component && <div style={{
        transform: open ? `translateY(${__x}px)` : `translateY(0px)`
      }} data-position={openPosition} className={getClassName(`ActionSheet__in`)}>
        <div ref={__ref} className={getClassName(`ActionSheet__in--Group`)}>
          <Group>
            {Array.isArray(component) ? component.map((child: any, index: number) => {
              var separator = index + 1 < component.length
              const is_top_separator = index + 1 == component.length

              const last_is_separator = index + 2 == component.length && Array.isArray(component[index + 1]);
              if (Array.isArray(child)) return <div>
                {is_top_separator && <Separator mode="secondary" style={{ height: `8px` }} />}
                <ButtonGroup className={getClassName(`ActionSheet__ButtonGroup`)} separator={"primary"} gap="m" stretched>
                  {child}
                </ButtonGroup>
                {!is_top_separator && separator && <Separator mode="secondary" style={{ height: `8px` }} />}
              </div>
              return <div>
                <ButtonGroup stretched mode="vertical" gap="m">{child}</ButtonGroup>
                {!last_is_separator && separator && <Separator />}
              </div>
            }) : children}
          </Group>
        </div>
      </div>}
      {open && <div
        style={{
          width: __width,
        }}
        className={getClassName(`ActionSheet__component`)}>{children}</div>}
    </div>
    <div ref={__refComponent}>{children}</div>
  </div >
}

export default ActionSheet;