import { observer } from "mobx-react";
import { useState } from "react";
// buzzwareTech imports
import {
    EmojiIconPickerTypes,
    EmojiPicker,
    Logo,
} from "@buzzwaretech/propel/emoji-icon-picker";
import { cn } from "@buzzwaretech/utils";
// store
import type { TPageInstance } from "@/store/pages/base-page";

type Props = {
  className?: string;
  page: TPageInstance;
};

export const PageEditorHeaderLogoPicker = observer(
  function PageEditorHeaderLogoPicker(props: Props) {
    const { className, page } = props;
    // states
    const [isLogoPickerOpen, setIsLogoPickerOpen] = useState(false);
    // derived values
    const { logo_props, isContentEditable, updatePageLogo } = page;
    const isLogoSelected = !!logo_props?.in_use;

    return (
      <div
        className={cn(
          className,
          "pointer-events-none max-h-0 transition-all duration-300 ease-linear",
          {
            "pointer-events-auto max-h-[56px]": isLogoSelected,
          },
        )}
      >
        <EmojiPicker
          isOpen={isLogoPickerOpen}
          handleToggle={(val) => setIsLogoPickerOpen(val)}
          className="flex items-center justify-center"
          buttonClassName="flex items-center justify-center"
          label={
            <div
              className={cn(
                "-ml-[8px] grid size-[56px] place-items-center rounded-sm transition-colors",
                {
                  "hover:bg-layer-1": isContentEditable,
                },
              )}
            >
              {isLogoSelected && (
                <Logo logo={logo_props} size={48} type="lucide" />
              )}
            </div>
          }
          onChange={updatePageLogo}
          defaultIconColor={
            logo_props?.in_use && logo_props.in_use === "icon"
              ? logo_props?.icon?.color
              : undefined
          }
          defaultOpen={
            logo_props?.in_use && logo_props?.in_use === "emoji"
              ? EmojiIconPickerTypes.EMOJI
              : EmojiIconPickerTypes.ICON
          }
          disabled={!isContentEditable}
        />
      </div>
    );
  },
);