"import React from "react";
import {
  Validate,
  Layout,
  Section,
  validation,
  PersonalInfo,
  CompositeField,
  FieldList,
  Message,
  DependsOn,
  CustomTotalPrice,
  Condition,
  Field,
  isEmpty,
} from "govhk-form-core";

const eighteenYearLater = new Date(new Date().getTime() + 6750 * 24 * 60 * 60 * 1000)
  .toISOString()
  .split("T")[0];

export default {
  title: ({ i }) => i`step.details`,
  signBy: ["applicant"],

  content: ({ i }) => (
    <div>
      <Section title={i`field.a.title`}>
      <Field.Select
            name='a_title'
            label={i`field.a.a_title.label`}
            options={[
              { value: "mr", label: i`field.a.a_title.mr` },
              { value: "ms", label: i`field.a.a_title.ms` },
              { value: "miss", label: i`field.a.a_title.miss` },
            ]}
            required
          />
          <CompositeField label={i`field.a.a_name`} layout='compact' required>
              <Field.Text
                name='a_name_en'
                label={i`field.a.a_name_en`}
                required
              />
              <Field.Text
                name='a_name_ch'
                label={i`field.a.a_name_ch`}
                required
              />
            </CompositeField>
            <Field.Date name='a_birth' label={i`field.a.a_birth`} required/>
            <Validate
            fields='a_birth'
            test={(val) => {
              let error;
              const selectedDate = new Date(val);
              const v_eighteenYearLater = new Date(eighteenYearLater);
              if (selectedDate >= v_eighteenYearLater) {
                error = {
                  $: {
                    notAdult: true,
                  },
                };
              }
              return error;
            }}
            messages={{
              notAdult: () => i`cccc`,
            }}
          />
            <PersonalInfo.HKID name='hkid' label={i`field.a.a_hkid`} required/>
      </Section>

      <Section title={i`field.b.title`}>
      <Field.Text
            name='b_tel'
            label={i`field.b.b_tel`}
            size='20'
            check={{
              maxLength: 8,
              minLength: 8,
              pattern: /^[0-9]*$/,
              required: true,
            }}
            required
          />
        <CompositeField label={i`field.b.b_Addr`} layout='compact' required>
          <Field.Textarea
            name='b_Addr_en'
            label={i`field.b.b_Addr_en`}
            placeholder={i`field.b.b_Addr_en`}
            rows={1}
            cols={20}
            check={{ maxLength: 100 }}
            required
          />
          <Field.Textarea
            name='b_Addr_ch'
            label={i`field.b.b_Addr_ch`}
            placeholder={i`field.b.b_Addr_ch`}
            rows={1}
            cols={20}
            check={{ maxLength: 100 }}
            required
          />
        </CompositeField>
        <PersonalInfo.Email name='b_email' label={i`field.b.b_email`} />
        <Field.Text
            name='b_fax'
            label={i`field.b.b_fax`}
            size='20'
            check={{ maxLength: 8, minLength: 8 }}
          />
      </Section>

      <Section title={i`field.c.title`}>
      <Field.Select
            label={i`field.c.c_empStatus.label`}
            name='c_empStatus'
            options={[
              { value: "em", label: i`field.c.c_empStatus.e` },
              { value: "se", label: i`field.c.c_empStatus.se` },
              { value: "une", label: i`field.c.c_empStatus.une` },
            ]}
            check={{
              minItems: 1,
            }}
            required
          />
          <Condition field='c_empStatus' contains='em'>
          <Field.Text
            name='c_comName'
            label={i`field.c.c_comName`}
            required
          />
          <Field.Textarea
            name='c_conAddr'
            label={i`field.c.c_conAddr`}
            placeholder={i`field.c.c_conAddr`}
            rows={1}
            cols={20}
            check={{ maxLength: 100 }}
            required
          />
          </Condition>
      </Section>
      <Section title={i`field.d.title`}>
      <Field.Textarea
          name='d_quaDetails'
          label={i`field.d.d_quaDetails`}
          rows={10}
          cols={40}
          check={{ maxLength: 500 }}
        />
      </Section>
    </div>
  ),
};
" why the a_birth checking is wrong