import { persist, createJSONStorage } from "zustand/middleware";
import { create } from "zustand";

export enum ORGANIZATION_HEADER_MODES {
    LARGE = "large",
    SMALL = "small",
}

interface IOrganizationHeaderStore {
    state: ORGANIZATION_HEADER_MODES;
    headerColor: string;
    headerFontColor: string;
    headerFontShadowColor: string;
    setState: (state: ORGANIZATION_HEADER_MODES) => void;
    setHeaderColor: (color: string) => void;
    setHeaderFontColor: (color: string) => void;
    setHeaderFontShadowColor: (color: string) => void;
    toggleState: () => void;
    clear: () => void;
}

export type OrganizationHeaderState = IOrganizationHeaderStore;

const useOrganizationHeaderStore = create<OrganizationHeaderState>()(
    persist(
        (set) => ({
            state: ORGANIZATION_HEADER_MODES.LARGE,
            headerColor: "",
            headerFontColor: "",
            headerFontShadowColor: "",
            setState: (state: ORGANIZATION_HEADER_MODES) => set(() => ({ state: state })),
            setHeaderColor: (color: string) => set(() => ({ headerColor: color })),
            setHeaderFontColor: (color: string) => set(() => ({ headerFontColor: color })),
            setHeaderFontShadowColor: (color: string) =>
                set(() => ({ headerFontShadowColor: color })),
            toggleState: () =>
                set((state) => ({
                    state:
                        state.state === ORGANIZATION_HEADER_MODES.LARGE
                            ? ORGANIZATION_HEADER_MODES.SMALL
                            : ORGANIZATION_HEADER_MODES.LARGE,
                })),
            clear: () =>
                set(() => ({
                    state: ORGANIZATION_HEADER_MODES.LARGE,
                })),
        }),

        {
            name: "site-organization-header-state",
            storage: createJSONStorage(() => localStorage),
        }
    )
);

export { useOrganizationHeaderStore };