import { createContext } from '@wordpress/element';

import { createStore } from 'zustand';
import {
  StrategiesProps,
  MetaProps,
  InteractionProps,
} from '@components/DesignPanel/types';

/**
 * DesignStoreProps
 * @typedef DesignStoreProps
 * eg: padding, margin, etc.
 * @property {StrategiesProps} currentStrategies
 * eg: important, children, hover, focus, arbitrary, custom etc.
 * @property {string} currentResponsive
 * eg: all, sm, md, lg, xl etc.
 * @property {DefaultDesignProps} defaultDesign
 * eg: selection of biteStyle items [padding, margin, etc.] applied on block by default
 * @property {CurrentDesignProps} currentDesign
 * eg: 16, 24, 32 etc.
 */

export interface DesignStoreProps {
  currentStrategies: StrategiesProps;
  currentInteraction: InteractionProps;
  currentResponsive: string;
  currentClass: string;
  designReset: boolean;
  defaultDesign: any;
  meta: MetaProps;
  currentDesign: any;
  currentControl: any;
  currentUnit: string;
  content?: any;
}

export interface DesignState extends DesignStoreProps {
  setCurrentStrategies: (strategies: StrategiesProps) => void;
  setCurrentInteraction: (interaction: InteractionProps) => void;
  setCurrentResponsive: (responsive: any) => void;
  setCurrentDesign: (design: any) => void;
  setCurrentClass: (currentClass: any) => void;
  setCurrentUnit: (unit: any) => void;
  setMeta: (preset: any) => void;
  setDesignReset: (reset: boolean) => void;
  setCurrentControl: (control: any) => void;
  setContent: (attributes: any) => void;
}

type DesignStore = ReturnType<typeof createDesignStore>;

export const createDesignStore = (initProps?: Partial<DesignStoreProps>) => {
  const DEFAULT_PROPS: DesignStoreProps = {
    currentStrategies: [],
    currentInteraction: '',
    currentResponsive: '',
    defaultDesign: [],
    meta: {
      bitesId: '',
    },
    currentDesign: [],
    currentClass: '',
    designReset: false,
    currentControl: {},
    currentUnit: '',
    content: {},
  };
  return createStore<DesignState>()((set) => ({
    ...DEFAULT_PROPS,
    ...initProps,
    setCurrentStrategies: (strategies) =>
      set(() => ({ currentStrategies: strategies })),
    setCurrentInteraction: (interaction: InteractionProps) =>
      set(() => ({ currentInteraction: interaction })),
    setCurrentResponsive: (responsive) =>
      set(() => ({ currentResponsive: responsive })),
    setCurrentDesign: (design) => set(() => ({ currentDesign: design })),
    setCurrentClass: (currentClass) =>
      set(() => ({ currentClass: currentClass })),
    setMeta: (meta) => set(() => ({ meta: meta })),
    setDesignReset: (reset) => set(() => ({ designReset: reset })),
    setCurrentControl: (control) => set(() => ({ currentControl: control })),
    setCurrentUnit: (unit) => {
      set(() => ({ currentUnit: unit }));
    },
    setContent: (content) => {
      set(() => ({ content: content }));
    },
  }));
};

export const DesignContext = createContext<DesignStore | null>(null);

export default {
  createDesignStore,
  DesignContext,
};