import { X } from "lucide-react";
import { observer } from "mobx-react";
import { useCallback } from "react";
// buzzwareTech imports
import { IconButton } from "@buzzwaretech/propel/icon-button";
import { EModalPosition, EModalWidth, ModalCore } from "@buzzwaretech/ui";
// hooks
import { useCommandPalette } from "@/hooks/store/use-command-palette";
// local imports
import { ProfileSettingsContent } from "./content";
import { ProfileSettingsSidebarRoot } from "./sidebar";

export const ProfileSettingsModal = observer(function ProfileSettingsModal() {
  // store hooks
  const { profileSettingsModal, toggleProfileSettingsModal } =
    useCommandPalette();
  // derived values
  const activeTab = profileSettingsModal.activeTab ?? "general";

  const handleClose = useCallback(() => {
    toggleProfileSettingsModal({
      isOpen: false,
    });
    setTimeout(() => {
      toggleProfileSettingsModal({
        activeTab: null,
      });
    }, 300);
  }, [toggleProfileSettingsModal]);

  return (
    <ModalCore
      isOpen={profileSettingsModal.isOpen}
      handleClose={handleClose}
      position={EModalPosition.CENTER}
      width={EModalWidth.VIXL}
      className="h-175"
    >
      <div className="@container relative size-full">
        <div className="flex size-full">
          <ProfileSettingsSidebarRoot
            activeTab={activeTab}
            className="w-[250px] rounded-l-xl"
            updateActiveTab={(tab) =>
              toggleProfileSettingsModal({ activeTab: tab })
            }
          />
          <ProfileSettingsContent
            activeTab={activeTab}
            className="flex-1 rounded-r-xl"
          />
        </div>
        <div className="absolute top-3.5 right-3.5">
          <IconButton
            size="base"
            variant="tertiary"
            icon={X}
            onClick={handleClose}
          />
        </div>
      </div>
    </ModalCore>
  );
});