import { Tabs } from "antd";
import React from "react";
import DetailsForm from "./DetailsForm";
import FamilyDetails from "./FamilyDetails";
import NomineeDetails from "./Nominee/NomineeDetails";
import Address from "./Address/Address";
import VerificationDocument from "./ShareholderVerification/VerificationDocument";

/**
 * TabGroup component
 * @param user {object} user object
 * @param userroles {object} userroles object
 * @param setEdit {function} setEdit function
 * @param apicall {function} apicall function
 * @param edit {boolean} edit boolean
 * @param handleEdit {function} handleEdit function
 * @return {JSX.Element} TabGroup component
 */
const TabGroup = ({ user, userroles, setEdit, apicall, edit, handleEdit }) => {
    /**
     * Array of tab names
     * @const
     * @type {string[]}
     */
  const tabNameArray = [
    "Personal Information",
    "Verification Document",
    "Address",
    "Family Details",
    "Nominee Details",
  ];
  return (
    <>
      <Tabs
        defaultActiveKey="1"
        //centered
        items={new Array(5).fill(null).map((_, i) => {
          // const id = String(i + 1);
          return {
            label: tabNameArray[i],
            key: i,
            children: (
              <>
                {i === 0 ? (
                  <DetailsForm
                    user={user}
                    userroles={userroles}
                    setEdit={setEdit}
                    apicall={apicall}
                    edit={edit}
                  />
                ) : i === 1 ? (
                  <VerificationDocument />
                ) : i === 2 ? (
                  <Address user={user} />
                ) : i === 3 ? (
                  <FamilyDetails />
                ) : (
                  <NomineeDetails />
                )}
              </>
            ),
          };
        })}
      />
    </>
  );
};
export default TabGroup;