import { jsxs as _jsxs, jsx as _jsx } from "react/jsx-runtime";
import React, { useContext } from 'react';
import { Cross } from '@react-vant/icons';
import clsx from 'clsx';
import { pick } from '../utils';
import Loading from '../loading';
import Popup from '../popup';
import { sharedPopupProps } from '../popup/Popup';
import ConfigProviderContext from '../config-provider/ConfigProviderContext';

const ActionSheet = props => {
  const {
    prefixCls,
    createNamespace
  } = useContext(ConfigProviderContext);
  const [bem] = createNamespace('action-sheet', prefixCls);

  const onCancel = () => {
    var _a, _b;

    (_a = props.onClose) === null || _a === void 0 ? void 0 : _a.call(props);
    (_b = props.onCancel) === null || _b === void 0 ? void 0 : _b.call(props);
  };

  const renderHeader = () => {
    if (!props.title) return null;
    return _jsxs("div", Object.assign({
      className: clsx(bem('header'))
    }, {
      children: [props.title, props.closeable && React.cloneElement(props.closeIcon, {
        className: clsx(bem('clear')),
        onClick: onCancel
      })]
    }));
  };

  const renderCancel = () => {
    if (!props.cancelText) return null;
    return [_jsx("div", {
      className: clsx(bem('gap'))
    }, "cancel-gap"), _jsx("button", Object.assign({
      type: "button",
      className: clsx(bem('cancel')),
      onClick: onCancel
    }, {
      children: props.cancelText
    }), "cancel-btn")];
  };

  const renderOption = (item, index) => {
    const {
      name,
      color,
      subname,
      loading,
      callback,
      disabled,
      className,
      style
    } = item;
    const Content = loading ? _jsx(Loading, {
      className: clsx(bem('loading-icon'))
    }) : [_jsx("span", Object.assign({
      className: clsx(bem('name'))
    }, {
      children: name
    }), `${index}-1`), subname && _jsx("div", Object.assign({
      className: clsx(bem('subname'))
    }, {
      children: subname
    }), `${index}-2`)];

    const onClick = () => {
      if (disabled || loading) {
        return;
      }

      if (callback) {
        callback(item);
      }

      if (props.closeOnClickAction) {
        onCancel();
      }

      setTimeout(() => {
        var _a;

        (_a = props.onSelect) === null || _a === void 0 ? void 0 : _a.call(props, item, index);
      }, 0);
    };

    return _jsx("button", Object.assign({
      type: "button",
      style: Object.assign({
        color
      }, style),
      className: clsx(bem('item', {
        loading,
        disabled
      }), className),
      onClick: onClick
    }, {
      children: Content
    }), index);
  };

  const renderDescription = () => {
    if (props.description) {
      return _jsx("div", Object.assign({
        className: clsx(bem('description'))
      }, {
        children: props.description
      }));
    }

    return null;
  };

  const renderOptions = () => {
    if (props.actions) {
      return props.actions.map(renderOption);
    }

    return null;
  };

  return _jsxs(Popup, Object.assign({
    visible: props.visible,
    className: clsx(bem()),
    position: "bottom"
  }, pick(props, sharedPopupProps), {
    onClose: onCancel,
    closeable: false
  }, {
    children: [renderHeader(), renderDescription(), _jsxs("div", Object.assign({
      className: clsx(bem('content'))
    }, {
      children: [renderOptions(), props.children]
    })), renderCancel()]
  }));
};

ActionSheet.defaultProps = {
  closeable: true,
  safeAreaInsetBottom: true,
  round: true,
  lockScroll: true,
  overlay: true,
  closeOnClickOverlay: true,
  closeIcon: _jsx(Cross, {})
};
export default ActionSheet;