import UsStates from './UsStates';
import { SingleStringSelectGroup, StringInputGroup } from '../';
import FieldSection from '../Field/FieldSection';
import { FormBuilderProp } from '../Form/Form';
import { zipCode as zipCodeNormalizer } from '../Normalization/normalizers';
import {
  required,
  zipCode as zipCodeValidator,
} from '../Validation/validators';

// TODO: find a permanent home for these interfaces
// TODO: but also, maybe they are comfortable here?
export interface AddressInputProps {
  fieldBuilder: Pick<FormBuilderProp<AddressDto>, 'Field'>;
  name: string;
}

interface AddressDto {
  address1?: string | null;
  address2?: string | null;
  zipCode?: string | null;
  city?: string | null;
  state?: string | null;
}

/**
 * Collection of `<Field/>`s for inputting an address. Includes:
 * ```txt
 * Address 1
 * Address 2
 * City
 * State
 * Zip
 * ```
 */
export default function AddressInput({
  fieldBuilder: { Field },
  name,
}: AddressInputProps) {
  return (
    <>
      <FieldSection name={name}>
        <Field
          name="address1"
          placeholder="Address, Line 1"
          label="Address 1"
          Component={StringInputGroup}
          validate={required}
        />
        <Field
          name="address2"
          placeholder="Address, Line 2"
          label="Address 2"
          Component={StringInputGroup}
        />
        <Field
          name="city"
          placeholder="City"
          label="City"
          Component={StringInputGroup}
          validate={required}
        />
        <Field
          name="state"
          placeholder="State"
          label="State"
          Component={SingleStringSelectGroup}
          options={UsStates}
          validate={required}
        />
        <Field
          name="zipCode"
          placeholder="Zip"
          label="Zip"
          Component={StringInputGroup}
          normalize={zipCodeNormalizer}
          validate={[required, zipCodeValidator]}
        />
      </FieldSection>
    </>
  );
}