"use strict";

Object.defineProperty(exports, "__esModule", {
  value: true
});
module.exports = CustomerInfoCard;
var _jsxRuntime = require("react/jsx-runtime");
var _react = require("react");
var _material = require("@mui/material");
var _context = require("@arcblock/ux/lib/Locale/context");
var _countrySelect = _interopRequireDefault(require("../../../components/country-select"));
var _phoneField = _interopRequireDefault(require("../../../components/phone-field"));
var _format = require("../../utils/format");
function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
const fieldLabelMap = t => ({
  customer_name: t("payment.checkout.customer.name"),
  customer_email: t("payment.checkout.customer.email"),
  customer_phone: t("payment.checkout.customer.phone"),
  "billing_address.country": t("payment.checkout.billing.country"),
  "billing_address.state": t("payment.checkout.billing.state"),
  "billing_address.city": t("payment.checkout.billing.city"),
  "billing_address.line1": t("payment.checkout.billing.line1"),
  "billing_address.line2": t("payment.checkout.billing.line2"),
  "billing_address.postal_code": t("payment.checkout.billing.postal_code")
});
function CustomerInfoCard({
  form,
  isLoggedIn
}) {
  const {
    t
  } = (0, _context.useLocaleContext)();
  const labels = fieldLabelMap(t);
  const [showEditForm, setShowEditForm] = (0, _react.useState)(false);
  const [ready, setReady] = (0, _react.useState)(false);
  const checkedRef = (0, _react.useRef)(false);
  (0, _react.useEffect)(() => {
    if (checkedRef.current) return;
    if (!form.prefetched && !form.values.customer_name && !form.values.customer_email) return;
    checkedRef.current = true;
    form.checkValid().then(valid => {
      setShowEditForm(!valid);
      setReady(true);
    });
  }, [form.prefetched]);
  const handleChange = (0, _react.useCallback)((field, value) => form.onChange(field, value), [form.onChange]
  // eslint-disable-line react-hooks/exhaustive-deps
  );
  (0, _react.useEffect)(() => {
    if (ready && !showEditForm && Object.keys(form.errors).length > 0) {
      setShowEditForm(true);
    }
  }, [form.errors]);
  if (!isLoggedIn || !ready) return null;
  if (!showEditForm) {
    return /* @__PURE__ */(0, _jsxRuntime.jsxs)(_material.Box, {
      sx: {
        mt: 2
      },
      children: [/* @__PURE__ */(0, _jsxRuntime.jsxs)(_material.Stack, {
        direction: "row",
        justifyContent: "space-between",
        alignItems: "center",
        sx: {
          mb: 1
        },
        children: [/* @__PURE__ */(0, _jsxRuntime.jsx)(_material.Typography, {
          sx: {
            fontSize: 13,
            fontWeight: 600,
            color: "text.secondary"
          },
          children: t("payment.checkout.customerInfo")
        }), /* @__PURE__ */(0, _jsxRuntime.jsx)(_material.Button, {
          size: "small",
          variant: "text",
          onClick: () => setShowEditForm(true),
          sx: {
            minWidth: 0,
            fontSize: 13,
            fontWeight: 600,
            p: 0
          },
          children: t("common.edit")
        })]
      }), /* @__PURE__ */(0, _jsxRuntime.jsxs)(_material.Stack, {
        spacing: 0.5,
        sx: {
          p: 2,
          backgroundColor: "background.paper",
          borderRadius: 1,
          border: "1px solid",
          borderColor: "divider"
        },
        children: [form.values.customer_name && /* @__PURE__ */(0, _jsxRuntime.jsx)(_material.Typography, {
          variant: "body2",
          sx: {
            color: "text.primary",
            fontWeight: 600,
            fontSize: "0.9375rem"
          },
          children: form.values.customer_name
        }), form.values.customer_email && /* @__PURE__ */(0, _jsxRuntime.jsx)(_material.Typography, {
          variant: "body2",
          sx: {
            color: "text.secondary",
            fontSize: "0.8125rem"
          },
          children: form.values.customer_email
        }), form.fields.some(f => f.name === "customer_phone") && form.values.customer_phone && /* @__PURE__ */(0, _jsxRuntime.jsx)(_material.Typography, {
          variant: "body2",
          sx: {
            color: "text.secondary",
            fontSize: "0.8125rem"
          },
          children: form.values.customer_phone
        }), (form.values.billing_address?.country || form.values.billing_address?.state || form.values.billing_address?.postal_code) && /* @__PURE__ */(0, _jsxRuntime.jsxs)(_material.Stack, {
          direction: "row",
          alignItems: "center",
          spacing: 0.75,
          children: [form.values.billing_address?.country && /* @__PURE__ */(0, _jsxRuntime.jsx)(_material.Box, {
            component: "span",
            sx: {
              fontSize: 14,
              lineHeight: 1
            },
            children: (0, _format.countryCodeToFlag)(form.values.billing_address.country)
          }), /* @__PURE__ */(0, _jsxRuntime.jsxs)(_material.Typography, {
            variant: "body2",
            sx: {
              color: "text.secondary",
              fontSize: "0.8125rem"
            },
            children: [form.values.billing_address?.state || "", form.values.billing_address?.postal_code ? ` [ ${t("payment.checkout.billing.postal_code")}: ${form.values.billing_address.postal_code} ]` : ""]
          })]
        })]
      })]
    });
  }
  return /* @__PURE__ */(0, _jsxRuntime.jsxs)(_material.Box, {
    sx: {
      mt: 2
    },
    children: [/* @__PURE__ */(0, _jsxRuntime.jsxs)(_material.Stack, {
      direction: "row",
      justifyContent: "space-between",
      alignItems: "center",
      sx: {
        mb: 1
      },
      children: [/* @__PURE__ */(0, _jsxRuntime.jsx)(_material.Typography, {
        sx: {
          fontSize: 13,
          fontWeight: 600,
          color: "text.secondary"
        },
        children: t("payment.checkout.customerInfo")
      }), /* @__PURE__ */(0, _jsxRuntime.jsx)(_material.Button, {
        size: "small",
        variant: "text",
        onClick: () => setShowEditForm(false),
        sx: {
          minWidth: 0,
          fontSize: 13,
          fontWeight: 600,
          p: 0
        },
        children: t("common.confirm")
      })]
    }), /* @__PURE__ */(0, _jsxRuntime.jsx)(_material.Stack, {
      spacing: 0,
      sx: {
        p: 2,
        backgroundColor: "background.paper",
        borderRadius: 1,
        border: "1px solid",
        borderColor: "divider"
      },
      children: form.fields.filter(f => f.name !== "billing_address.country").map(field => {
        const {
          name
        } = field;
        const label = labels[name] || name;
        const value = name.includes(".") ? name.split(".").reduce((o, k) => o?.[k], form.values) : form.values[name];
        const isPostalCode = name === "billing_address.postal_code";
        const isPhone = name === "customer_phone";
        if (isPhone) {
          return /* @__PURE__ */(0, _jsxRuntime.jsx)(_phoneField.default, {
            value: value || "",
            country: form.values.billing_address?.country || "",
            onChange: phone => handleChange("customer_phone", phone),
            onCountryChange: c => handleChange("billing_address.country", c),
            onBlur: () => form.validateField(name),
            label,
            error: form.errors[name]
          }, name);
        }
        return /* @__PURE__ */(0, _jsxRuntime.jsxs)(_material.Box, {
          sx: {
            mb: 1.5
          },
          children: [/* @__PURE__ */(0, _jsxRuntime.jsx)(_material.Typography, {
            sx: {
              fontSize: 13,
              fontWeight: 600,
              color: "text.primary",
              mb: 0.5
            },
            children: label
          }), /* @__PURE__ */(0, _jsxRuntime.jsx)(_material.InputBase, {
            fullWidth: true,
            value: value || "",
            onChange: e => handleChange(name, e.target.value),
            onBlur: () => form.validateField(name),
            startAdornment: isPostalCode ? /* @__PURE__ */(0, _jsxRuntime.jsx)(_material.InputAdornment, {
              position: "start",
              sx: {
                mr: 0.5,
                ml: -0.5
              },
              children: /* @__PURE__ */(0, _jsxRuntime.jsx)(_countrySelect.default, {
                value: form.values.billing_address?.country || "",
                onChange: v => handleChange("billing_address.country", v),
                sx: {
                  ".MuiOutlinedInput-notchedOutline": {
                    borderColor: "transparent !important"
                  },
                  "& .MuiSelect-select": {
                    py: 0,
                    pr: "20px !important"
                  }
                }
              })
            }) : void 0,
            sx: {
              bgcolor: theme => theme.palette.mode === "dark" ? "rgba(255,255,255,0.06)" : "grey.50",
              borderRadius: "8px",
              px: 1.5,
              py: 0.75,
              fontSize: 14,
              "& .MuiInputBase-input": {
                p: 0
              }
            }
          }), form.errors[name] && /* @__PURE__ */(0, _jsxRuntime.jsx)(_material.Typography, {
            sx: {
              fontSize: 12,
              color: "error.main",
              mt: 0.25
            },
            children: form.errors[name]
          })]
        }, name);
      })
    })]
  });
}