import React, { useEffect, useState } from "react";
import { Link, useLocation } from "react-router-dom";
import Icons from "../../Helpers/Icons";
import Layout from "../../Partials/Layout";
import { AddFamily, FamilyBanner, Relatives } from "./Tabs";

const FamilySettings = () => {
  let {state} = useLocation()
  const tabs = [
    {
      id: 1,
      name: "add_family",
      title: "Add Family",
      iconName: "new-family",
    },
    {
      id: 2,
      name: "relatives",
      title: "Relatives",
      iconName: "people-hover",
    },
    {
      id: 3,
      name: "family_banner",
      title: "Family Banner",
      iconName: "people-hover",
    },
  ];

  const [tab, setTab] = useState(() => {
    // Retrieve the active tab from local storage or use the default tab
    return localStorage.getItem("activeTab") || tabs[0].name;
  });

  const tabHandler = (value) => {
    setTab(value);
  };

  // Update local storage when the tab changes
  useEffect(() => {
    localStorage.setItem("activeTab", tab);
  }, [tab]);

  const tabComponents = {
    add_family: <AddFamily />,
    relatives: <Relatives />,
    family_banner: <FamilyBanner imageServer={state.imageServer} />,
  };

  const defaultTabComponent = Array(tabComponents)[0].add_family;

  const selectedComponent = tabComponents[tab] || defaultTabComponent;

  return (
    <Layout>
      <div className="notification-page w-full mb-10">
        <div className="notification-wrapper w-full">
          {/* heading */}
          <div className="sm:flex justify-between items-center mb-6">
            <div className="mb-5 sm:mb-0">
              <h1 className="text-26 font-bold inline-flex gap-3 text-dark-gray dark:text-white items-center">
                <span className={``}>Family Settings</span>
              </h1>
            </div>
            <Link to="/acc-family" className="flex gap-2 items-center text-dark-gray dark:text-white">
              <svg className="w-5 h-5 rtl:rotate-180" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" strokeWidth="1.5" stroke="currentColor">
                  <path strokeLinecap="round" strokeLinejoin="round" d="M6.75 15.75L3 12m0 0l3.75-3.75M3 12h18" />
              </svg>
              Family
            </Link>
          </div>

          <div className="w-full bg-white dark:bg-dark-white overflow-y-auto rounded-2xl section-shadow h-full ">
            <div className="update-table w-full h-full p-4 bg-white dark:bg-dark-white overflow-y-auto rounded-2xl section-shadow min-h-[520px] lg:flex lg:px-10 px-4 justify-between">
              <div className="content-tab-items lg:w-[230px] w-full mr-2">
                <ul className="overflow-hidden mb-10 lg:mb-0 py-8">
                  {tabs.map(({ name, id, title, iconName }) => (
                    <li
                      onClick={() => tabHandler(name)}
                      key={id}
                      className={`flex lg:space-x-4 space-x-2 hover:text-purple transition-all duration-300 ease-in-out items-center cursor-pointer lg:mb-11 mb-2 mr-6 lg:mr-0 float-left lg:float-none overflow-hidden ${
                        tab === name ? "text-purple" : " text-thin-light-gray"
                      }`}
                    >
                      <div>
                        <Icons name={iconName} />
                      </div>
                      <div>
                        <p className="text-18 tracking-wide">{title}</p>
                      </div>
                    </li>
                  ))}
                </ul>
              </div>
              <div className="w-[1px] bg-[#E3E4FE] dark:bg-[#a7a9b533]  mr-10"></div>
              <div className="flex-1">
                <div className="tab-item">{selectedComponent}</div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </Layout>
  );
};

export default FamilySettings;
