import { Formik, FieldArray } from "formik";

import Input from "components/common/input";

import DateInput from "components/common/date-picker";
import SelectComponent from "components/common/select";
import { Plus } from "phosphor-react";
import {
expenseRequestInitialValues,
expenseRequestValidationSchema,
} from "../../constants/expenseRequest";

const CreateHousingExpenseForm = ({ selectedMember = {} }) => {

const renderUploadBox = (fieldName, labelText, setFieldValue) => (
<div className="mb-4">
<label className="fw-semibold mb-2 d-block">{labelText}</label>
<div className="border border-warning rounded p-4 text-center bg-light h-
100">
<div className="mb-2">
<i className="bi bi-upload" style={{ fontSize: "24px" }}></i>
</div>
<div>
<span>Drag & drop or </span>
<label className="text-warning fw-bold" style={{ cursor: "pointer" }}>
choose file
<input
type="file"
hidden
onChange={(e) =>
setFieldValue(fieldName, [Link][0])
}
/>
</label>
<div className="text-muted small mt-1">(Max. 5 MB)</div>
</div>
</div>
</div>
);

return (
<Formik
initialValues={{
...expenseRequestInitialValues,
member_name: selectedMember.first_name || "",
date_of_birth: selectedMember.date_of_birth || "",
cin: [Link] || "",
health_plan: selectedMember.health_plan || "",
county: [Link] || "",
department_code: selectedMember.department_code || "",
case_manager: selectedMember.case_manager || "",
landlord_name: selectedMember.landlord_name || "",
}}
validationSchema={expenseRequestValidationSchema}
onSubmit={(values) => {
[Link]("Form Submitted:", values);
}}
>
{({ values, handleChange, handleSubmit, setFieldValue }) => (
<form onSubmit={handleSubmit}>
<div className="row bg-white">
<h4 className="my-4">Member Information</h4>
<div className="col-sm-6">
<Input
handleChange={handleChange}
placeholder="e.g. John Doe"
type="text"
label="Member Name"
name="member_name"
value={values.member_name}
disabled={!!selectedMember.first_name}
/>
</div>

<div className="col-sm-6">
<DateInput
label="Date of Birth"
name="date_of_birth"
placeholder="Select Date of Birth"
value={values.date_of_birth}
handleChange={(date) => setFieldValue("date_of_birth", date)}
disabled={!!selectedMember.date_of_birth}
/>
</div>

<div className="col-sm-6">
<Input
handleChange={handleChange}
placeholder="e.g. CIN7438201"
type="text"
label="CIN"
name="cin"
value={[Link]}
disabled={!![Link]}
/>
</div>

<div className="col-sm-6">
<SelectComponent
name="health_plan"
label="Health Plan"
options={[
{ label: "Plan A", value: "Plan A" },
{ label: "Plan B", value: "Plan B" },
]}
handleChange={(option) =>
setFieldValue("health_plan", [Link])
}
selectedValue={
values.health_plan
? { label: values.health_plan, value: values.health_plan }
: null
}
isDisabled={!!selectedMember.health_plan}
/>
</div>

<div className="col-sm-6">
<Input
handleChange={handleChange}
 placeholder="e.g. Chicago"
type="text"
label="County"
name="county"
value={[Link]}
disabled={!![Link]}
/>
</div>

<div className="col-sm-6">
<Input
handleChange={handleChange}
placeholder="e.g. DC-101"
type="text"
label="Department Code"
name="department_code"
value={values.department_code}
disabled={!!selectedMember.department_code}
/>
</div>

<div className="col-sm-6">
<SelectComponent
name="case_manager"
label="Case Manager"
options={[
{ label: "Manager A", value: "Manager A" },
{ label: "Manager B", value: "Manager B" },
]}
handleChange={(option) =>
setFieldValue("case_manager", [Link])
}
selectedValue={
values.case_manager
? { label: values.case_manager, value: values.case_manager }
: null
}
isDisabled={!!selectedMember.case_manager}
/>
</div>

<div className="col-sm-6">
<Input
handleChange={handleChange}
placeholder="e.g. Jane Smith"
type="text"
label="Landlord Name"
name="landlord_name"
value={values.landlord_name}
disabled={!!selectedMember.landlord_name}
/>
</div>

<hr className="mt-4" />

<h4 className="my-4">Expense Information</h4>

<FieldArray name="expenses">
{() => (
<>
 <div className="col-sm-6">
<Input
handleChange={handleChange}
name="expenses[0].authorization_no"
label="Authorization No"
value={[Link][0].authorization_no}
placeholder="Enter"
/>
</div>

<div className="col-sm-6">
<Input
handleChange={handleChange}
name="expenses[0].payment_method"
label="Payment Method"
value={[Link][0].payment_method}
placeholder="Enter"
/>
</div>

<div className="col-sm-6">
<Input
handleChange={handleChange}
placeholder="e.g. 100"
type="text"
label="Authorization Amount"
name="expenses[0].authorization_amount"
value={[Link][0].authorization_amount}
/>
</div>

<div className="col-sm-6">
<DateInput
label="Start Date"
name="expenses[0].start_date"
value={[Link][0].start_date}
handleChange={(date) =>
setFieldValue("expenses[0].start_date", date)
}
placeholder="Select"
/>
</div>

<div className="col-sm-12">
<DateInput
label="End Date"
name="expenses[0].end_date"
value={[Link][0].end_date}
handleChange={(date) =>
setFieldValue("expenses[0].end_date", date)
}
placeholder="Select"
/>
</div>
</>
)}
</FieldArray>

<div className="col-sm-12">
 <button
className="secondary-btn w-100 mt-4"
type="button"
onClick={() => [Link]("Add Expense clicked")}
>
<Plus size={18} /> Add Expense
</button>
</div>

<hr className="mt-4" />

<h4 className="my-4">Upload Documents</h4>

<div className="col-sm-6">
{renderUploadBox("w9", "Upload W-9", setFieldValue)}
</div>
<div className="col-sm-6">
{renderUploadBox(
"lease_agreement",
"Upload Lease Agreement",
setFieldValue
)}
</div>
<div className="col-sm-6">
{renderUploadBox(
"health_plan_authorization",
"Upload Authorization from Health Plan",
setFieldValue
)}
</div>
<div className="col-sm-6">
{renderUploadBox("check_request", "Check Request", setFieldValue)}
</div>

<div className="col-sm-12 mt-5">

{renderUploadBox(
"other_documents",
"Other Documents",
setFieldValue
)}
</div>

<hr className="mt-4" />

<div className="col-sm-6">
<Input
handleChange={handleChange}
placeholder="Write any additional comments"
type="text"
label="Additional Comments"
name="comments"
value={[Link]}
/>
</div>

<div className="col-sm-6">
<input
className="primary-btn w-100"
type="submit"
name="submit"
 value="Create Request"
style={{ marginTop: "43px" }}
/>
</div>
</div>
</form>
)}
</Formik>
);
};

export default CreateHousingExpenseForm;