<FormLayoutSection className="Location-Info" title="Location Info">
<div className="mb-5">
<div className="inline-flex justify-between w-full">
<div className="block mb-1 text-sm font-semibold text-gray-700 dark:text-gray-100">
County FIPS(s):
<span className="text-red-500 text-md">{` `}*</span>
</div>
<Tooltip
className="-mt-1"
direction="left"
content="This is a 6-digit numeric code identifying the geographic area for where you want to send the alert - the 5-digit numeric code must be prefaced with an additional zero"
/>
</div>
{/* {FIPSList.map(fipsCode => (
<div key={fipsCode}>
<input
type="checkbox"
id={fipsCode}
name="CountyFIPS"
value={fipsCode}
ref={register({ required: true })}
onChange={() => handleSelect(fipsCode)}
checked={selectedOptions.includes(fipsCode)}
/>
<label htmlFor={fipsCode}>
{fipsCode} - {findFipsCodeName(fipsCode)}, {findFipsCodeState(fipsCode)}
</label>
</div>
))} */}
{/* {FIPSList.map(fipsCode => (
<div key={fipsCode}>
<Checkbox
id={fipsCode}
name="CountyFIPS"
value={fipsCode}
ref={register({ required: true })}
defaultChecked={false}
>
{fipsCode} - {findFipsCodeName(fipsCode)}, {findFipsCodeState(fipsCode)}
</Checkbox>
</div>
))} */}
</div>
<div className="mb-5">
<Controller
name="CountyFIPS"
control={control}
defaultValue={[]}
render={({ ...field }) => (
<div>
{FIPSList.map(fipsCode => (
<label key={fipsCode} className="inline-flex items-center">
<input
className="rounded border-gray-300 focus:ring-2 focus:ring-opacity-50"
type="checkbox"
{...field}
value={fipsCode}
checked={field.value.includes(fipsCode)}
onChange={e => {
const selectedOptions = [...field.value]
if (e.target.checked) {
selectedOptions.push(fipsCode)
} else {
const index = selectedOptions.indexOf(fipsCode)
if (index > -1) {
selectedOptions.splice(index, 1)
}
}
field.onChange(selectedOptions)
}}
/>
<span className="mx-2 text-sm">
{fipsCode} - {findFipsCodeName(fipsCode)},{' '}
{findFipsCodeState(fipsCode)}
</span>
</label>
))}
</div>
)}
/>
{/* <MultiSelect
id="CountyFIPS"
ref={register({ required: true })}
name="CountyFIPS"
label="OCV County FIPS(s):"
labelTooltipComponent={
<Tooltip
content="This is a 6-digit numeric code identifying the geographic area for where you want to send the alert - the 5-digit numeric code must be prefaced with an additional zero"
direction="left"
/>
}
required
multiple
onChange={event => {
if (event.target.value === 'Select FIPS Code') {
setError('CountyFIPS', {
type: 'manual',
message: 'Please select the FIPS Code',
})
}
}}
onBlur={event => {
if (event.target.value === 'Select FIPS Code') {
setError('CountyFIPS', {
type: 'manual',
message: 'Please select the FIPS Code',
})
}
}}
value={FIPSList}
>
<option defaultValue="">Select FIPS Code</option>
{FIPSList.map((fipsCode, index) => (
<option key={index} value={fipsCode}>
{fipsCode} - {findFipsCodeName(fipsCode)}, {findFipsCodeState(fipsCode)}
</option>
))}
{!FIPSList.length && (
<option defaultValue="">No FIPS Codes. Please add in settings.</option>
)}
</MultiSelect> */}
<p className="text-sm text-red-500">
{errors.CountyFIPS && errors.CountyFIPS.message}
</p>
</div>
<div className="mb-5">
<p className="block text-sm font-semibold text-gray-700 dark:text-gray-100">
Validation Info:{' '}
<span className="text-sm font-semibold text-red-500">
{locationPoints > 100 &&
'More than 100 points added please remove locations.'}{' '}
{locationShapes > 10 &&
'More than 10 shapes added please remove locations.'}
</span>
</p>
<p className="text-sm font-semibold text-gray-700 dark:text-gray-100">
{locationPoints} Points - {locationShapes} Shapes
</p>
</div>
{!locationShapes && (
<div className="px-2 py-1 bg-yellow-700 rounded-md mb-5">
<p className="text-md font-semibold text-gray-100">
Note: If no shape is selected, the notification will go to the entire FIPS
Code.
</p>
</div>
)}
{/* {notificationType === 'IPAWS' && (
// <Input
// id="CountyFIPS"
// name="CountyFIPS"
// type="number"
// onBlur={e =>
// e.target.removeEventListener('wheel', function (e) {
// e.preventDefault()
// })
// }
// onFocus={e =>
// e.target.addEventListener(
// 'wheel',
// function (e) {
// e.preventDefault()
// },
// { passive: false }
// )
// }
// label="County FIPS(s):"
// labelTooltipComponent={
// <Tooltip
// content="This is a 6-digit numeric code identifying the geographic area for where you want to send the alert - the 5-digit numeric code must be prefaced with an additional zero"
// direction="left"
// />
// }
// placeholder="######"
// required
// ref={register({
// required: true,
// validate: validateSixDigits,
// })}
// error={errors.FIPS ? errors.FIPS.message : ''}
// />
// )}
// {errors.CountyFIPS && (
// <p className="text-sm text-red-500">{errors.CountyFIPS.message}</p>*/}
{/* <div className="mb-5">
<NativeSelect
id="CountyFIPS"
ref={register({ required: true })}
name="CountyFIPS"
label="County FIPS(s):"
labelTooltipComponent={
<Tooltip
content="This is a 6-digit numeric code identifying the geographic area for where you want to send the alert - the 5-digit numeric code must be prefaced with an additional zero"
direction="left"
/>
}
required
onChange={event => {
if (event.target.value === 'Select FIPS Code') {
setError('CountyFIPS', {
type: 'manual',
message: 'Please select the FIPS Code',
})
}
}}
onBlur={event => {
if (event.target.value === 'Select FIPS Code') {
setError('CountyFIPS', {
type: 'manual',
message: 'Please select the FIPS Code',
})
}
}}
>
<option defaultValue="">Select FIPS Code</option>
{FIPSList.map((fipsCode, index) => (
<option key={index} value={fipsCode}>
{fipsCode} - {findFipsCodeName(fipsCode)}, {findFipsCodeState(fipsCode)}
</option>
))}
{!FIPSList.length && (
<option defaultValue="">No FIPS Codes. Please add in settings.</option>
)}
</NativeSelect>
<p className="text-sm text-red-500">{errors.CountyFIPS && errors.CountyFIPS.message}</p>
</div> */}
{/* <MultiSelect options={FIPSList} onSelect={handleSelect} ref></MultiSelect> */}
<div className="flex flex-col">
<p className="block mb-1 text-sm font-semibold text-gray-700 dark:text-gray-100">
Choose a Geographic Location
</p>
<Button
onClick={mapModalState}
icon={<Icon className="mr-2 -ml-1" name="globe" />}
>
Choose Location
</Button>
</div>
</FormLayoutSection>