'use strict';
import { jsx, jsxs } from 'react/jsx-runtime';
import { FormField, FormItem, FormControl } from '../../../fd-component-toolbox/form/Form.js';
import { Input } from '../../../fd-component-toolbox/input/Input.js';
import { Select, SelectTrigger, SelectContent, SelectGroup, SelectItem } from '../../../fd-component-toolbox/select/Select.js';
import { wellKnownUserProps } from '../../../../fd-toolbox/constants/common-user-fields.js';
import { elementSuffixes } from '../../../../fd-toolbox/constants/element-suffixes.js';
import { countries } from './checkout-form-constants.js';
import { getStripeCardElementOptions } from './checkout-form-stripe.js';
import { CardElement } from '@stripe/react-stripe-js';
import { LabelAnimation } from '../../../fd-component-toolbox/animation/LabelAnimation.js';

var __defProp = Object.defineProperty;
var __name = (target, value) => __defProp(target, "name", {
  value,
  configurable: true
});
function EmailField({
  control
}) {
  return /* @__PURE__ */jsx(FormField, {
    control,
    name: wellKnownUserProps.email,
    render: ({
      field
    }) => /* @__PURE__ */jsx(FormItem, {
      children: /* @__PURE__ */jsx("div", {
        className: "w-full",
        children: /* @__PURE__ */jsx(FormControl, {
          children: /* @__PURE__ */jsx(Input, {
            ...field,
            inputId: "email",
            label: "Email *",
            type: "email",
            showClearIcon: true
          })
        })
      })
    })
  });
}
__name(EmailField, "EmailField");
function NameField({
  control
}) {
  return /* @__PURE__ */jsx(FormField, {
    control,
    name: wellKnownUserProps.name,
    render: ({
      field
    }) => /* @__PURE__ */jsx(FormItem, {
      children: /* @__PURE__ */jsx("div", {
        className: "w-full",
        children: /* @__PURE__ */jsx(FormControl, {
          children: /* @__PURE__ */jsx(Input, {
            ...field,
            inputId: "name",
            type: "text",
            label: "Cardholder Name *",
            showClearIcon: true,
            skipAnimationOnce: true
          })
        })
      })
    })
  });
}
__name(NameField, "NameField");
function CardInformationField({
  appliedTheme,
  onCardFieldChange,
  cardFieldErrorShown
}) {
  return /* @__PURE__ */jsx(FormItem, {
    children: /* @__PURE__ */jsx("div", {
      className: "border-border hover:border-fd-accent border-b py-2 transition",
      children: /* @__PURE__ */jsxs("div", {
        className: "relative h-full basis-full text-start",
        children: [/* @__PURE__ */jsx(CardElement, {
          id: "card",
          options: getStripeCardElementOptions(appliedTheme),
          className: "px-3",
          onChange: onCardFieldChange
        }), /* @__PURE__ */jsx(LabelAnimation, {
          label: "Card Information *",
          shouldAnimate: true,
          className: "top-0 max-w-full",
          errorStyle: cardFieldErrorShown
        })]
      })
    })
  });
}
__name(CardInformationField, "CardInformationField");
function CountryAndZipFields({
  control,
  handleCountryChange
}) {
  return /* @__PURE__ */jsxs("div", {
    className: "flex flex-col gap-y-4",
    children: [/* @__PURE__ */jsx(FormField, {
      control,
      name: wellKnownUserProps.country,
      render: ({
        field
      }) => /* @__PURE__ */jsx(FormItem, {
        children: /* @__PURE__ */jsx("div", {
          className: "w-full border-0",
          children: /* @__PURE__ */jsxs(Select, {
            value: field.value,
            disabled: field.disabled,
            onValueChange: value => value && handleCountryChange(value, field.name),
            children: [/* @__PURE__ */jsx(SelectTrigger, {
              label: "Select Your Country *",
              shouldAnimate: !!field.value,
              id: `country${elementSuffixes.select}`,
              children: countries.find(country => country.code === field.value)?.name ?? ""
            }), /* @__PURE__ */jsx(SelectContent, {
              disablePortal: true,
              children: /* @__PURE__ */jsx(SelectGroup, {
                children: countries.map(country => /* @__PURE__ */jsx(SelectItem, {
                  value: country.code,
                  id: `${country.code}${elementSuffixes.selectOption}`,
                  children: country.name
                }, country.code))
              })
            })]
          })
        })
      })
    }), /* @__PURE__ */jsx("div", {
      children: /* @__PURE__ */jsx(FormField, {
        control,
        name: wellKnownUserProps.zip,
        render: ({
          field
        }) => /* @__PURE__ */jsx(FormItem, {
          children: /* @__PURE__ */jsx("div", {
            className: "w-full",
            children: /* @__PURE__ */jsx(FormControl, {
              children: /* @__PURE__ */jsx(Input, {
                ...field,
                inputId: "zip",
                label: "ZIP Code *",
                type: "string",
                showClearIcon: true,
                skipAnimationOnce: true
              })
            })
          })
        })
      })
    })]
  });
}
__name(CountryAndZipFields, "CountryAndZipFields");

export { CardInformationField, CountryAndZipFields, EmailField, NameField };
