import PropTypes from 'prop-types';
import List from '@mui/material/List';
import ListItem from '@mui/material/ListItem';
import ListItemText from '@mui/material/ListItemText';
import ListItemIcon from '@mui/material/ListItemIcon';
import IconPurchase from '@mui/icons-material/ShoppingCart';
import IconVerify from '@mui/icons-material/VerifiedUser';
import Button from '@arcblock/ux/lib/Button';
import colors from '@arcblock/ux/lib/Colors';
import { useLocaleContext } from '@arcblock/ux/lib/Locale/context';
import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
const commonProps = {
  meta: PropTypes.object.isRequired,
  onCancel: PropTypes.func.isRequired
};
function CustomSelect({
  action,
  onSelect,
  onNext
}) {
  const {
    t
  } = useLocaleContext();
  const options = [{
    action: 'purchase',
    title: t('store.purchase.purchase.title'),
    description: t('store.purchase.purchase.description')
  }, {
    action: 'verify',
    title: t('store.purchase.verify.title'),
    description: t('store.purchase.verify.description')
  }];
  return /*#__PURE__*/_jsxs(_Fragment, {
    children: [/*#__PURE__*/_jsx(List, {
      children: options.map(x => /*#__PURE__*/_jsxs(ListItem, {
        button: true,
        selected: action === x.action,
        onClick: () => onSelect(x.action),
        children: [/*#__PURE__*/_jsx(ListItemIcon, {
          sx: {
            minWidth: 48
          },
          children: x.action === 'purchase' ? /*#__PURE__*/_jsx(IconPurchase, {
            style: {
              color: action === 'purchase' ? colors.primary.main : '#AAA',
              fontSize: 32
            }
          }) : /*#__PURE__*/_jsx(IconVerify, {
            style: {
              color: action === 'verify' ? colors.primary.main : '#AAA',
              fontSize: 32
            }
          })
        }), /*#__PURE__*/_jsx(ListItemText, {
          primary: x.title,
          secondary: x.description
        })]
      }, x.action))
    }), onNext && /*#__PURE__*/_jsx(Button, {
      fullWidth: true,
      disabled: !action,
      variant: "contained",
      color: "primary",
      style: {
        marginTop: 16
      },
      onClick: onNext,
      children: t('common.next')
    })]
  });
}
CustomSelect.propTypes = {
  action: PropTypes.oneOf(['both', 'purchase', 'verify']).isRequired,
  onSelect: PropTypes.func.isRequired,
  onNext: PropTypes.func.isRequired
};
export { commonProps, CustomSelect };