import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
import { useContext, useEffect, useMemo, useRef } from 'react';
import cls from 'clsx';
import ConfigProviderContext from '../config-provider/ConfigProviderContext';
import Tabs from '../tabs';
import { useSetState } from '../hooks';
import Button from '../button';
import Field from '../field';
import Coupon from './Coupon';

const CouponList = props => {
  var _a;

  const {
    prefixCls,
    createNamespace,
    locale
  } = useContext(ConfigProviderContext);
  const [bem] = createNamespace('coupon-list', prefixCls);
  const innerEffect = useRef(false);
  const [state, updateState] = useSetState({
    tab: 0,
    code: props.code
  });
  const buttonDisabled = useMemo(() => !props.exchangeButtonLoading && (props.exchangeButtonDisabled || !state.code || state.code.length < props.exchangeMinLength), [props.exchangeButtonLoading, props.exchangeButtonDisabled, state.code, props.exchangeMinLength]);

  const innerChange = code => {
    updateState({
      code
    });
    innerEffect.current = true;
  };

  const onExchange = () => {
    if (props.onExchange) props.onExchange(state.code); // auto clear currentCode when not use v-model

    if (!props.code) {
      innerChange('');
    }
  };

  const renderEmpty = () => _jsxs("div", Object.assign({
    className: cls(bem('empty'))
  }, {
    children: [_jsx("img", {
      alt: "empty",
      src: props.emptyImage
    }), _jsx("p", {
      children: locale.noCoupon
    })]
  }));

  const renderExchangeBar = () => {
    if (props.showExchangeBar) {
      return _jsxs("div", Object.assign({
        className: cls(bem('exchange-bar'))
      }, {
        children: [_jsx(Field, {
          value: state.code,
          onChange: innerChange,
          clearable: true,
          border: false,
          className: cls(bem('field')),
          placeholder: props.inputPlaceholder || locale.vanCouponList.placeholder,
          maxlength: 20
        }), _jsx(Button, {
          plain: true,
          type: "primary",
          className: cls(bem('exchange')),
          text: props.exchangeButtonText || locale.vanCouponList.exchange,
          loading: props.exchangeButtonLoading,
          disabled: buttonDisabled,
          onClick: onExchange
        })]
      }));
    }

    return null;
  };

  const renderCouponTab = () => {
    const {
      coupons
    } = props;
    const count = props.showCount ? ` (${coupons.length})` : '';
    const title = (props.enabledTitle || locale.vanCouponList.enable) + count;
    return _jsx(Tabs.TabPane, Object.assign({
      title: title
    }, {
      children: _jsxs("div", Object.assign({
        className: cls(bem('list', {
          'with-bar': props.showExchangeBar,
          'with-bottom': props.showCloseButton
        }))
      }, {
        children: [coupons.map((coupon, index) => _jsx(Coupon, {
          coupon: coupon,
          chosen: index === props.chosenCoupon,
          currency: props.currency,
          onClick: () => props.onChange(index)
        }, coupon.id)), !coupons.length && renderEmpty(), props.listFooter]
      }))
    }));
  };

  const renderDisabledTab = () => {
    const {
      disabledCoupons
    } = props;
    const count = props.showCount ? ` (${disabledCoupons.length})` : '';
    const title = (props.disabledTitle || locale.vanCouponList.disabled) + count;
    return _jsx(Tabs.TabPane, Object.assign({
      title: title
    }, {
      children: _jsxs("div", Object.assign({
        className: cls(bem('list', {
          'with-bar': props.showExchangeBar,
          'with-bottom': props.showCloseButton
        }))
      }, {
        children: [disabledCoupons.map(coupon => _jsx(Coupon, {
          disabled: true,
          coupon: coupon,
          currency: props.currency
        }, coupon.id)), !disabledCoupons.length && renderEmpty(), props.disabledListFooter]
      }))
    }));
  };

  useEffect(() => {
    if (innerEffect.current) {
      innerEffect.current = true;
      return;
    }

    updateState({
      code: props.code
    });
  }, [props.code]);
  return _jsxs("div", Object.assign({
    className: cls(bem(), props.className),
    style: props.style
  }, {
    children: [renderExchangeBar(), _jsxs(Tabs, Object.assign({
      active: state.tab,
      border: false
    }, props.tabsProps, {
      className: cls(bem('tab'), (_a = props.tabsProps) === null || _a === void 0 ? void 0 : _a.className)
    }, {
      children: [renderCouponTab(), renderDisabledTab()]
    })), _jsx("div", Object.assign({
      className: cls(bem('bottom'))
    }, {
      children: _jsx(Button, {
        "v-show": props.showCloseButton,
        round: true,
        block: true,
        type: "primary",
        className: cls(bem('close')),
        text: props.closeButtonText || locale.vanCouponList.close,
        onClick: () => {
          var _a;

          return (_a = props.onChange) === null || _a === void 0 ? void 0 : _a.call(props, -1);
        }
      })
    }))]
  }));
};

const EMPTY_IMAGE = 'https://img.yzcdn.cn/vant/coupon-empty.png'; // defaultProps defined if need

CouponList.defaultProps = {
  showCount: true,
  showExchangeBar: true,
  showCloseButton: true,
  code: '',
  exchangeMinLength: 1,
  chosenCoupon: -1,
  coupons: [],
  disabledCoupons: [],
  displayedCouponIndex: -1,
  currency: '¥',
  emptyImage: EMPTY_IMAGE
};
export default CouponList;