'use strict';
'use client';
import { c } from 'react/compiler-runtime';
import { jsxs, Fragment, jsx } from 'react/jsx-runtime';
import { useState } from 'react';
import { Dialog, DialogContent, DialogTitle } from '../../../fd-component-toolbox/dialog/Dialog.js';
import { CheckoutForm } from '../checkout-form/CheckoutForm.js';
import { Input } from '../../../fd-component-toolbox/input/Input.js';
import { Icon, iconNames } from '../../../fd-component-toolbox/icon/Icon.js';
import { onInitCurrentPaymentMethod, setPaymentMethod, getCardNumberInputValue } from './ChangePaymentMethodField.funcs.js';
import { elements } from '../../../../fd-toolbox/constants/elements.js';
import { useAsyncEffect } from '../../../../fd-toolbox/hooks/use-async-effect.js';

var __defProp = Object.defineProperty;
var __name = (target, value) => __defProp(target, "name", {
  value,
  configurable: true
});
function ChangePaymentMethodField() {
  const $ = c(9);
  const [isDialogOpen, setIsDialogOpen] = useState(false);
  const [isSubmittingForm, setIsSubmittingForm] = useState(false);
  const [currentPaymentMethod, setCurrentPaymentMethod] = useState("");
  let t0;
  let t1;
  if ($[0] === Symbol.for("react.memo_cache_sentinel")) {
    t0 = async () => {
      await onInitCurrentPaymentMethod(setCurrentPaymentMethod);
    };
    t1 = [];
    $[0] = t0;
    $[1] = t1;
  } else {
    t0 = $[0];
    t1 = $[1];
  }
  useAsyncEffect(t0, t1);
  let t2;
  if ($[2] !== currentPaymentMethod || $[3] !== isDialogOpen || $[4] !== isSubmittingForm) {
    let t3;
    if ($[6] === Symbol.for("react.memo_cache_sentinel")) {
      t3 = () => setIsDialogOpen(true);
      $[6] = t3;
    } else {
      t3 = $[6];
    }
    let t4;
    if ($[7] === Symbol.for("react.memo_cache_sentinel")) {
      t4 = () => setIsDialogOpen(true);
      $[7] = t4;
    } else {
      t4 = $[7];
    }
    let t5;
    if ($[8] === Symbol.for("react.memo_cache_sentinel")) {
      t5 = async () => setPaymentMethod(setCurrentPaymentMethod, setIsDialogOpen);
      $[8] = t5;
    } else {
      t5 = $[8];
    }
    t2 = jsxs(Fragment, {
      children: [jsx(Input, {
        value: getCardNumberInputValue(currentPaymentMethod),
        label: "Payment method",
        className: "cursor-pointer select-none",
        onClick: t3,
        readOnly: true,
        inputId: elements.userSettings.changePaymentMethodField,
        id: elements.userSettings.changePaymentMethodField,
        children: jsx(Icon, {
          name: iconNames.pencil2,
          className: "cursor-pointer",
          onClick: t4
        })
      }), jsx(Dialog, {
        open: isDialogOpen,
        onOpenChange: setIsDialogOpen,
        children: jsxs(DialogContent, {
          closeButtonShown: !isSubmittingForm,
          className: "flex w-full min-w-96 flex-col justify-center gap-0",
          children: [jsx(DialogTitle, {
            className: "mt-8 text-center leading-none font-semibold",
            children: "Enter Payment Details"
          }), jsx("div", {
            children: jsx(CheckoutForm, {
              price: 0,
              onSubmitting: setIsSubmittingForm,
              onSubmitSuccess: t5
            })
          })]
        })
      })]
    });
    $[2] = currentPaymentMethod;
    $[3] = isDialogOpen;
    $[4] = isSubmittingForm;
    $[5] = t2;
  } else {
    t2 = $[5];
  }
  return t2;
}
__name(ChangePaymentMethodField, "ChangePaymentMethodField");

export { ChangePaymentMethodField };
