import React, { useState, memo } from 'react';
import Popup, { PopUpPorps } from '../PopUp';
import { themeable } from '../../theme';
import { localeable } from '../../locale';

type ActionSheetProps = {
  isOpened: boolean
  popupContent?: React.ReactNode;
  onOpen?: (...args: any[]) => any;
  actionClassName?: string;
} & Omit<PopUpPorps, 'className' | 'style' | 'isShow'>

const ActionSheet: React.FC<ActionSheetProps> = function ({
  isOpened = false, children, popupContent, actionClassName, onOpen, overlay = true, showClose = false, onHide, classnames: cx, translate: __, ...props
}) {
  function handleOpen<T>(e: T) {
    onOpen?.(e)
  }
  function handleClose<T>(e: T) {
    onHide?.(e)
  }

  return (
    <div className={cx(`ActionSheet ${actionClassName ? actionClassName : ''}`)}>
      <div onClick={(e) => {
        e.stopPropagation()
        handleOpen(e)
      }}>
        {children}
      </div>
      {isOpened &&
        <Popup style={{ height: 'auto' }} className={cx(`Popup-ActionSheet`)} isShow={isOpened} overlay={overlay}
          onHide={handleClose}
          showClose={showClose}
          {...props}>
          {popupContent}
        </Popup>
      }
    </div>
  )
}

export default themeable(localeable(memo(ActionSheet)))