import { jsxs as d, jsx as l } from "react/jsx-runtime";
import { Box as p } from "@mui/material";
import { useMemoizedFn as u } from "ahooks";
import { translate as m } from "@arcblock/ux/lib/Locale/util";
import { useLocaleContext as f } from "@arcblock/ux/lib/Locale/context";
import x from "@arcblock/ux/lib/PhoneInput/country-select";
import { translations as y } from "../../libs/locales.js";
import n from "../editable-field.js";
const b = {
  width: "100%",
  px: 2,
  py: 1,
  borderRadius: 1,
  "&:hover": {
    "fieldset.MuiOutlinedInput-notchedOutline": {
      borderColor: "divider"
    }
  },
  "fieldset.MuiOutlinedInput-notchedOutline": {
    borderColor: "divider",
    borderRadius: 1
  },
  ".MuiSelect-select": {
    padding: "0 !important",
    display: "flex",
    alignItems: "center"
  }
};
function E({
  address: r,
  errors: t,
  handleChange: i,
  defaultCountry: a
}) {
  const { locale: s } = f(), o = u((e, c = {}) => m(y, e, s, "en", c));
  return /* @__PURE__ */ d(
    p,
    {
      sx: {
        display: "flex",
        flexDirection: "column",
        gap: 2,
        mt: 2
      },
      children: [
        /* @__PURE__ */ l(
          n,
          {
            placeholder: o("profile.address.country"),
            value: r.country || a,
            editable: !0,
            errorMsg: t.country,
            label: o("profile.address.country"),
            children: /* @__PURE__ */ l(
              x,
              {
                value: r.country || a,
                onChange: (e) => i("country", e),
                displayEmpty: !0,
                variant: "outlined",
                selectCountryProps: {
                  hideDialCode: !0
                },
                sx: b
              }
            )
          }
        ),
        /* @__PURE__ */ d(
          p,
          {
            sx: {
              display: "flex",
              gap: 2
            },
            children: [
              /* @__PURE__ */ l(
                n,
                {
                  value: r.province || "",
                  onChange: (e) => i("province", e),
                  placeholder: o("profile.address.province"),
                  label: o("profile.address.province"),
                  editable: !0,
                  maxLength: 50,
                  errorMsg: t.province
                }
              ),
              /* @__PURE__ */ l(
                n,
                {
                  value: r.city || "",
                  onChange: (e) => i("city", e),
                  placeholder: o("profile.address.city"),
                  label: o("profile.address.city"),
                  editable: !0,
                  maxLength: 50,
                  errorMsg: t.city
                }
              )
            ]
          }
        ),
        /* @__PURE__ */ l(
          n,
          {
            value: r.line1 || "",
            onChange: (e) => i("line1", e),
            placeholder: o("profile.address.line1"),
            label: o("profile.address.line1"),
            component: "textarea",
            editable: !0,
            maxLength: 200,
            rows: 2,
            errorMsg: t.line1
          }
        ),
        /* @__PURE__ */ l(
          n,
          {
            value: r.line2 || "",
            onChange: (e) => i("line2", e),
            placeholder: o("profile.address.line2"),
            label: o("profile.address.line2"),
            component: "textarea",
            editable: !0,
            rows: 2,
            maxLength: 200,
            errorMsg: t.line2
          }
        ),
        /* @__PURE__ */ l(
          n,
          {
            value: r.postalCode || "",
            onChange: (e) => i("postalCode", e),
            placeholder: o("profile.address.postalCode"),
            label: o("profile.address.postalCode"),
            editable: !0,
            maxLength: 20,
            errorMsg: t.postalCode
          }
        )
      ]
    }
  );
}
export {
  E as default
};
