import React from "react";

import { FormHelperText } from "@mui/material";
import Grid from "@mui/material/Grid2";
import Stack from "@mui/material/Stack";
import TextField, { TextFieldProps } from "@mui/material/TextField";
import Typography from "@mui/material/Typography";

import { useCardContext } from "../../contexts/CardContext";
import { useI18n } from "../../contexts/I18nContext";
import { countryCodeFormatter } from "../../util/country_code_formatter";
import LabeledValue from "../LabeledValue";

import { CardFieldBaseProps } from "./shared";

export interface BillingAddress {
  street_address: string;
  street_address2: string;
  postal_code: string;
  city: string;
  country_code: string;
  region: string;
  care_of: string;
}

export interface CardFieldAddressProps
  extends Omit<TextFieldProps, "variant" | "size" | "helperText" | "label">,
    CardFieldBaseProps,
    React.PropsWithChildren {
  type: "address";
  value: BillingAddress;
  isEditable?: boolean;
  isCompany?: boolean;
  fieldErrors?: Partial<Record<keyof BillingAddress, string>>;
}

export const CardFieldAddress: React.FC<Omit<CardFieldAddressProps, "type">> = ({
  label,
  value: defaultValue,
  required = false,
  isDisabled = false,
  size = "grow",
  isReadable = true,
  isEditable = true,
  helperText,
  isCompany = false,
  fieldErrors = {},
}) => {
  const { isEditing } = useCardContext();
  const { t } = useI18n();

  label ??= t("Address");
  const addressString = [
    defaultValue?.street_address,
    defaultValue?.street_address2,
    defaultValue?.care_of,
    [defaultValue?.postal_code, defaultValue?.city].filter(Boolean).join(" "),
    defaultValue?.region,
    defaultValue?.country_code ? countryCodeFormatter.of(defaultValue.country_code) : undefined,
  ]
    .filter(Boolean)
    .join("\n");

  return (
    <Grid size={size}>
      {isEditing && isEditable ? (
        <Stack direction="column" spacing={2}>
          <Typography sx={{ fontWeight: 700 }} variant="body1">
            {label}
          </Typography>
          <TextField
            fullWidth
            defaultValue={defaultValue?.street_address ?? ""}
            disabled={isDisabled}
            error={Boolean(fieldErrors.street_address)}
            helperText={fieldErrors.street_address}
            label={t("Street Address")}
            name="street_address"
            required={required || isCompany}
            variant="outlined"
          />
          <TextField
            fullWidth
            defaultValue={defaultValue?.street_address2 ?? ""}
            disabled={isDisabled}
            error={Boolean(fieldErrors.street_address2)}
            helperText={fieldErrors.street_address2}
            label={t("Street Address 2")}
            name="street_address2"
            required={false}
            variant="outlined"
          />
          <TextField
            fullWidth
            defaultValue={defaultValue?.care_of ?? ""}
            disabled={isDisabled}
            error={Boolean(fieldErrors.care_of)}
            helperText={fieldErrors.care_of}
            label={t("C/O")}
            name="care_of"
            required={false}
            variant="outlined"
          />
          <Stack direction="row" spacing={2}>
            <TextField
              fullWidth
              defaultValue={defaultValue?.postal_code ?? ""}
              disabled={isDisabled}
              error={Boolean(fieldErrors.postal_code)}
              helperText={fieldErrors.postal_code}
              label={t("Postal Code")}
              name="postal_code"
              required={isCompany}
              variant="outlined"
            />
            <TextField
              fullWidth
              defaultValue={defaultValue?.city ?? ""}
              disabled={isDisabled}
              error={Boolean(fieldErrors.city)}
              helperText={fieldErrors.city}
              label={t("City")}
              name="city"
              required={isCompany}
              variant="outlined"
            />
          </Stack>
          <Stack direction="row" spacing={2}>
            <TextField
              fullWidth
              defaultValue={defaultValue?.region ?? ""}
              disabled={isDisabled}
              error={Boolean(fieldErrors.region)}
              helperText={fieldErrors.region}
              label={t("Region")}
              name="region"
              required={false}
              variant="outlined"
            />
            <TextField
              fullWidth
              defaultValue={defaultValue?.country_code ?? ""}
              disabled={isDisabled}
              error={Boolean(fieldErrors.country_code)}
              helperText={fieldErrors.country_code}
              label={t("Country")}
              name="country_code"
              required={isCompany}
              variant="outlined"
            />
          </Stack>

          {helperText != null && <FormHelperText sx={{ mb: 1 }}>{helperText}</FormHelperText>}
        </Stack>
      ) : (
        isReadable &&
        (isEditing || addressString.length > 0) && (
          <LabeledValue label={label} value={addressString} />
        )
      )}
    </Grid>
  );
};

export default CardFieldAddress;