|
|
|
@ -1,5 +1,6 @@ |
|
|
|
"use client"; |
|
|
|
|
|
|
|
import { useMemo } from "react"; |
|
|
|
import type { QuestionField } from "@/data/question-data"; |
|
|
|
import { useQuestionAnswers } from "./question-answer-storage"; |
|
|
|
import QuestionTitle from "./question-title"; |
|
|
|
@ -10,6 +11,30 @@ type QuestionDateProps = { |
|
|
|
disabled?: boolean; |
|
|
|
}; |
|
|
|
|
|
|
|
const MONTHS = [ |
|
|
|
{ value: "01", label: "01 - ژانویه" }, |
|
|
|
{ value: "02", label: "02 - فوریه" }, |
|
|
|
{ value: "03", label: "03 - مارس" }, |
|
|
|
{ value: "04", label: "04 - آوریل" }, |
|
|
|
{ value: "05", label: "05 - می" }, |
|
|
|
{ value: "06", label: "06 - ژوئن" }, |
|
|
|
{ value: "07", label: "07 - ژوئیه" }, |
|
|
|
{ value: "08", label: "08 - آگوست" }, |
|
|
|
{ value: "09", label: "09 - سپتامبر" }, |
|
|
|
{ value: "10", label: "10 - اکتبر" }, |
|
|
|
{ value: "11", label: "11 - نوامبر" }, |
|
|
|
{ value: "12", label: "12 - دسامبر" }, |
|
|
|
]; |
|
|
|
|
|
|
|
const DAYS = Array.from({ length: 31 }, (_, i) => { |
|
|
|
const num = i + 1; |
|
|
|
const val = num < 10 ? `0${num}` : `${num}`; |
|
|
|
return { value: val, label: `${num}` }; |
|
|
|
}); |
|
|
|
|
|
|
|
const currentYear = new Date().getFullYear(); |
|
|
|
const YEARS = Array.from({ length: 90 }, (_, i) => (currentYear - i).toString()); |
|
|
|
|
|
|
|
export function QuestionDate({ |
|
|
|
question, |
|
|
|
questionIndex, |
|
|
|
@ -19,21 +44,120 @@ export function QuestionDate({ |
|
|
|
const value = getAnswerValue(question, questionIndex); |
|
|
|
const dateValue = typeof value === "string" ? value : ""; |
|
|
|
|
|
|
|
const parts = dateValue ? dateValue.split("-") : []; |
|
|
|
const year = parts[0] || ""; |
|
|
|
const month = parts[1] || ""; |
|
|
|
const day = parts[2] || ""; |
|
|
|
|
|
|
|
const calculatedAge = useMemo(() => { |
|
|
|
if (!year || !month || !day) return null; |
|
|
|
const y = Number.parseInt(year, 10); |
|
|
|
const m = Number.parseInt(month, 10); |
|
|
|
const d = Number.parseInt(day, 10); |
|
|
|
|
|
|
|
if (!y || !m || !d || Number.isNaN(y) || Number.isNaN(m) || Number.isNaN(d)) { |
|
|
|
return null; |
|
|
|
} |
|
|
|
|
|
|
|
const today = new Date(); |
|
|
|
const cYear = today.getFullYear(); |
|
|
|
const cMonth = today.getMonth() + 1; |
|
|
|
const cDay = today.getDate(); |
|
|
|
|
|
|
|
let age = cYear - y; |
|
|
|
if (cMonth < m || (cMonth === m && cDay < d)) { |
|
|
|
age -= 1; |
|
|
|
} |
|
|
|
|
|
|
|
return age >= 0 ? age : null; |
|
|
|
}, [year, month, day]); |
|
|
|
|
|
|
|
const handleSelectChange = (newYear: string, newMonth: string, newDay: string) => { |
|
|
|
if (!newYear && !newMonth && !newDay) { |
|
|
|
setAnswerValue(question, questionIndex, ""); |
|
|
|
return; |
|
|
|
} |
|
|
|
|
|
|
|
const y = newYear || year || "2000"; |
|
|
|
const m = (newMonth || month || "01").padStart(2, "0"); |
|
|
|
const d = (newDay || day || "01").padStart(2, "0"); |
|
|
|
|
|
|
|
setAnswerValue(question, questionIndex, `${y}-${m}-${d}`); |
|
|
|
}; |
|
|
|
|
|
|
|
return ( |
|
|
|
<div |
|
|
|
className={[ |
|
|
|
"flex w-full flex-col gap-2 transition-opacity duration-200", |
|
|
|
"flex w-full flex-col gap-2.5 transition-opacity duration-200", |
|
|
|
disabled ? "pointer-events-none opacity-30" : "", |
|
|
|
].join(" ")} |
|
|
|
> |
|
|
|
<QuestionTitle question={question} /> |
|
|
|
<input |
|
|
|
type="date" |
|
|
|
value={dateValue} |
|
|
|
onChange={(event) => setAnswerValue(question, questionIndex, event.target.value)} |
|
|
|
disabled={disabled} |
|
|
|
className="h-[54px] w-full rounded-[15px] border border-[#E7D8D5] bg-white px-4 text-[15px] text-[#181818] outline-none focus:border-[#6F6F6F]" |
|
|
|
/> |
|
|
|
|
|
|
|
{/* 3 Select Dropdowns: Day, Month, Year */} |
|
|
|
<div className="grid grid-cols-3 gap-2"> |
|
|
|
{/* Day / روز */} |
|
|
|
<select |
|
|
|
value={day} |
|
|
|
onChange={(e) => handleSelectChange(year, month, e.target.value)} |
|
|
|
disabled={disabled} |
|
|
|
aria-label="روز" |
|
|
|
className="h-[54px] w-full cursor-pointer rounded-[15px] border border-[#E7D8D5] bg-white px-3 text-[14px] text-[#181818] outline-none transition-all focus:border-[#6F6F6F]" |
|
|
|
> |
|
|
|
<option value="">روز</option> |
|
|
|
{DAYS.map((d) => ( |
|
|
|
<option key={d.value} value={d.value}> |
|
|
|
{d.label} |
|
|
|
</option> |
|
|
|
))} |
|
|
|
</select> |
|
|
|
|
|
|
|
{/* Month / ماه */} |
|
|
|
<select |
|
|
|
value={month} |
|
|
|
onChange={(e) => handleSelectChange(year, e.target.value, day)} |
|
|
|
disabled={disabled} |
|
|
|
aria-label="ماه" |
|
|
|
className="h-[54px] w-full cursor-pointer rounded-[15px] border border-[#E7D8D5] bg-white px-3 text-[14px] text-[#181818] outline-none transition-all focus:border-[#6F6F6F]" |
|
|
|
> |
|
|
|
<option value="">ماه</option> |
|
|
|
{MONTHS.map((m) => ( |
|
|
|
<option key={m.value} value={m.value}> |
|
|
|
{m.label} |
|
|
|
</option> |
|
|
|
))} |
|
|
|
</select> |
|
|
|
|
|
|
|
{/* Year / سال */} |
|
|
|
<select |
|
|
|
value={year} |
|
|
|
onChange={(e) => handleSelectChange(e.target.value, month, day)} |
|
|
|
disabled={disabled} |
|
|
|
aria-label="سال" |
|
|
|
className="h-[54px] w-full cursor-pointer rounded-[15px] border border-[#E7D8D5] bg-white px-3 text-[14px] text-[#181818] outline-none transition-all focus:border-[#6F6F6F]" |
|
|
|
> |
|
|
|
<option value="">سال</option> |
|
|
|
{YEARS.map((y) => ( |
|
|
|
<option key={y} value={y}> |
|
|
|
{y} |
|
|
|
</option> |
|
|
|
))} |
|
|
|
</select> |
|
|
|
</div> |
|
|
|
|
|
|
|
{/* Display Calculated Age */} |
|
|
|
<div className="mt-2.5 flex w-full flex-col gap-2"> |
|
|
|
<span className="block text-[12px] leading-tight font-semibold text-[#181818]"> |
|
|
|
Age |
|
|
|
</span> |
|
|
|
<input |
|
|
|
type="text" |
|
|
|
disabled |
|
|
|
readOnly |
|
|
|
value={calculatedAge !== null ? calculatedAge : ""} |
|
|
|
className="h-[54px] w-full rounded-[15px] border border-[#E7D8D5] bg-[#F5F2F1] px-4 text-[14px] font-medium text-[#7C7472] outline-none cursor-not-allowed disabled:bg-[#F5F2F1] disabled:text-[#7C7472]" |
|
|
|
/> |
|
|
|
</div> |
|
|
|
</div> |
|
|
|
); |
|
|
|
} |
|
|
|
|
