import { FC } from "react";
import { useFormContext } from "react-hook-form";
import UniqueField from "../common/unique-field";
import { TSstaffSchema } from "../forms/schema/staff";
import dynamic from "next/dynamic";
import {
    Datepicker,
    InputField,
    Radio,
    Select,
    Textarea,
} from "../forms/Inputs";
const DropdownList = dynamic(() => import("../common/Dropdown"));

type props = {
    staff?: TSstaffSchema
    isEdit?: boolean
}
const BasicStaffForm: FC<props> = ({ isEdit, staff }) => {

    const {
        formState: { errors },
    } = useFormContext();

    return (
        <div className="grid grid-cols-1 gap-6 sm:grid-cols-2">
            <div className="left">
                <div className="mt-1">
                    <InputField
                        name="name"
                        labelText="Name"
                        placeholder="Name"
                        errors={errors}
                    />
                </div>
                <div className="mt-1">
                    <UniqueField
                        name="username"
                        labelText="Username"
                        placeholder="Username"
                        fieldId={staff?.user?.uuid}
                    />
                </div>
                <div className="mt-1">
                    <InputField
                        name="password"
                        labelText="Password"
                        placeholder="Password"
                        errors={errors}
                    />
                </div>
                <div className="mt-1">
                    <label htmlFor="" className="block mb-2">
                        Role & Permission
                    </label>
                    <DropdownList
                        name="role"
                        placeholder="Role & permission"
                        idName="roles_id"
                        getLabel={(role: any) => role.name}
                        defaultItems={staff?.roles}
                    />
                </div>

                <div className="mt-1">
                    <InputField
                        name="designation"
                        labelText="Designation"
                        placeholder="Designation"
                        errors={errors}
                    />
                </div>
                <div className="mt-1">
                    <InputField
                        name="phone"
                        labelText="Phone Number"
                        placeholder="Phone Number"
                        errors={errors}
                    />
                </div>
                <div className="mt-1">
                    <InputField
                        name="email"
                        placeholder="Email"
                        labelText="Email"
                        errors={errors}
                    />
                </div>
                <div className="mt-1">
                    <Datepicker
                        name="date_of_birth"
                        labelText="Date of birth"
                        defaultDate={staff?.date_of_birth}
                    />
                </div>
                <div className="mt-1">
                    <Datepicker
                        name="join_date"
                        labelText="Join Date"
                        defaultDate={staff?.join_date}
                    />
                </div>
                <div className="mt-1">
                    <Select
                        labelText="Salary Day"
                        defaultValue={staff?.salary_day ?? "07"}
                        name="salary_day"
                        options={Array.from(Array(31).keys()).map((item) => ({
                            value: item + 1 < 10 ? `0${item + 1}` : item + 1,
                            label: item + 1 < 10 ? `0${item + 1}` : item + 1,
                        }))}
                    />
                </div>
                <div className="mt-3">
                    <Radio
                        groupLabel="Salary Generation Type"
                        name="salary_generation_type"
                        options={[
                            { label: "Auto", value: "auto" },
                            { label: "Manual", value: "manual" },
                            { label: "No salary", value: "no_bill" },
                        ]}
                        defaultValue={staff?.salary_generation_type ?? "auto"}
                    />
                </div>
            </div>
            <div className="right">
                <div className="mt-1">
                    <InputField
                        name="father_name"
                        labelText="Father's Name"
                        placeholder="Father's Name"
                        errors={errors}
                    />
                </div>
                <div className="mt-1">
                    <InputField
                        name="mother_name"
                        placeholder="Mother's Name"
                        labelText="Mother's Name"
                        errors={errors}
                    />
                </div>
                <div className="mt-1">
                    <InputField
                        name="nid"
                        placeholder="NID"
                        labelText="NID"
                        errors={errors}
                    />
                </div>
                <div className="mt-1">
                    <Radio
                        groupLabel="Marital Status"
                        name="marital_status"
                        options={[
                            { label: "Marred", value: "marred" },
                            { label: "Unmarred", value: "unmarred" },
                        ]}
                        defaultValue={staff?.marital_status ?? "unmarred"}
                    />
                </div>
                <div className="mt-1">
                    <Radio
                        groupLabel="Gender"
                        name="gender"
                        options={[
                            { label: "Male", value: "male" },
                            { label: "Female", value: "female" },
                        ]}
                        defaultValue={staff?.gender ?? "male"}
                    />
                </div>
                <div className="mt-1">
                    <Select
                        defaultValue={"active"}
                        options={[
                            { value: "active", label: "Active" },
                            { value: "inactive", label: "Inactive" },
                        ]}
                        labelText="Status"
                        name="status"
                        errors={errors}
                    />
                </div>
                <div className="mt-1">
                    <Textarea
                        name="present_address"
                        labelText="Present Address"
                        placeholder="Present Address"
                        rows={2}
                    />
                </div>
                <div className="mt-1">
                    <Textarea
                        name="permanent_address"
                        labelText="Permanent Address"
                        placeholder="Permanent Address"
                        rows={2}
                    />
                </div>
                <div className="mt-1">
                    <Textarea
                        name="job_experience"
                        labelText="Job Experience"
                        placeholder="Job Experience"
                        rows={2}
                    />
                </div>
                <div className="mt-1">
                    <Textarea
                        name="social_media_address"
                        labelText="Social Media Address"
                        placeholder="Social Media Address"
                        rows={2}
                    />
                </div>
            </div>
        </div>
    )
}

export default BasicStaffForm;