/* @aztlan/generator-front 1.0.9 */
import * as React from 'react'
import {
  useInsertionEffect, useMemo,
} from 'react'
import {
  useForm, FormProvider,
} from 'react-hook-form'
import {
  withWrapper, Field, FieldProps,
} from '@aztlan/ui'

import * as PropTypes from 'prop-types'
import { InferProps } from 'prop-types'

import styleNames from '@aztlan/bem'

import ConfirmationMap from './common/ConfirmationMap.js'

const baseClassName = styleNames.base
const componentClassName = 'postal-address-input'

/**
 * description
 * @param {InferProps<typeof PostalAddressInput.propTypes>} props -
 * @returns {React.ReactElement} - Rendered PostalAddressInput
 */
function PostalAddressInput({
  id,
  className: userClassName,
  style,
  addressRegionSpanContentDesktop = 2,
  postalCodeSpanContentDesktop = 1,
  disabledAddressCountry = false,
  postalAddressNamePrefix = 'xPostalAddress',
  name,
  ...sharedFieldProps
}: InferProps<typeof PostalAddressInput.propTypes>): React.ReactElement {
  useInsertionEffect(
    () => {
    // @ts-ignore
      import('./styles.scss')
    }, [],
  )
  const fields = useMemo(
    () => [
      {
        name        :`${postalAddressNamePrefix}.streetAddress`,
        type        :'text',
        label       :'Address',
        autoComplete:'street-address',
      },
      {
        name        :`${postalAddressNamePrefix}.addressLocality`,
        type        :'text',
        label       :'Colonia',
        autoComplete:'address-level2',
      },
      {
        name              :`${postalAddressNamePrefix}.addressRegion`,
        type              :'text',
        label             :'City',
        autoComplete      :'address-level1',
        spanContentDesktop:addressRegionSpanContentDesktop,
      },
      {
        name              :`${postalAddressNamePrefix}.postalCode`,
        type              :'text',
        label             :'Zipcode',
        autoComplete      :'postal-code',
        spanContentDesktop:postalCodeSpanContentDesktop,
      },
      {
        name        :`${postalAddressNamePrefix}.addressCountry`,
        type        :'text',
        label       :'Country',
        autoComplete:'country-name',
        disabled    :disabledAddressCountry,
      },
      {
        name:'latitude',
        type:'hidden',
      },
      {
        name:'longitude',
        type:'hidden',
      },
    ],
    [
      addressRegionSpanContentDesktop,
      postalCodeSpanContentDesktop,
    ],
  )

  const confirmationCheckboxFieldProps = useMemo(
    () => ({
      type         :'checkbox',
      name         :`${name}.confirmation`,
      label        :'I confirm the address',
      registerProps:{
        required:{
          value  :true,
          message:'It is necessary to confirm the address. This will make sure we display the right map on your website.',
        },
      },
      condition:[
        [
          'streetAddress',
          'addressLocality',
          'addressRegion',
          'postalCode',
          'addressCountry',
        ].map((fieldName) => `${name}.${postalAddressNamePrefix}.${fieldName}`),
        (array) => array.every(Boolean),
      ],
    }),
    [
      name,
      postalAddressNamePrefix,
    ],
  )

  const methods = useForm({
    mode:'onChange',
    // shouldUseNativeValidation:true,
    // ...otherProps,
  })

  return (
    <div
      id={id}
      className={[
        baseClassName,
        componentClassName,
        userClassName,
        'container grid',
      ]
        .filter((e) => e)
        .join(' ')}
      style={style}
    >
      {fields.map(({
        name: originalFieldName, ...otherFieldProps
      }) => {
        const fieldName = name
          ? `${name}.${originalFieldName}`
          : originalFieldName
        return (
          <Field
            key={fieldName}
            name={fieldName}
            {...sharedFieldProps}
            {...(otherFieldProps as Partial<FieldProps>)}
          />
        )
      })}
      <ConfirmationMap
        name={name}
        postalAddressNamePrefix={postalAddressNamePrefix}
        className="container"
      />
      <Field
        {...sharedFieldProps}
        {...confirmationCheckboxFieldProps}
      />
    </div>
  )
}

PostalAddressInput.propTypes = {
  /** The HTML id for this element */
  id:PropTypes.string,

  /** The HTML class names for this element */
  className:PropTypes.string,

  /** The React-written, css properties for this element. */
  style:PropTypes.objectOf(PropTypes.string),

  /** The address region span for desktop */
  addressRegionSpanContentDesktop:PropTypes.number,

  /** The postal code span for desktop */
  postalCodeSpanContentDesktop:PropTypes.number,

  /** The name of the field */
  name:PropTypes.string,

  /** The prefix to namespace the postal address data */
  postalAddressNamePrefix:PropTypes.string,

  /** Whether the address country is disabled. In this case it has to be set programatically */
  disabledAddressCountry:PropTypes.bool,
}

export default PostalAddressInput
/*
export default withWrapper(
  PostalAddressInput, { nested: true },
) */