import { create } from 'zustand';
import { persist } from 'zustand/middleware';

export type Side = 'left' | 'right';

interface Layout {
  collapsed: Record<Side, boolean>;
  toggle: (side: Side) => void;
  /** Expand the panel if it is collapsed: an action that leads INTO the panel must show it. */
  expand: (side: Side) => void;
}

// The state of the interface lives in zustand (STACK_DECISIONS §1). The sizes of the panels are
// persisted by react-resizable-panels itself; here only the collapsedness — without persisting it
// would reset on a reload, while the sizes of the neighbouring panels would not, and the layout
// would come back half someone else's.
export const useLayout = create<Layout>()(
  persist(
    (set) => ({
      collapsed: { left: false, right: false },
      toggle: (side) =>
        set((state) => ({ collapsed: { ...state.collapsed, [side]: !state.collapsed[side] } })),
      expand: (side) => set((state) => ({ collapsed: { ...state.collapsed, [side]: false } })),
    }),
    { name: 'textmachine:panels' },
  ),
);