import React, { createContext, useMemo } from 'react';

const DragContext = createContext<{
  scale: number;
  changeComponentConfigActiveKey?: (param) => any;
}>({
  scale: 1
});

const LayersSelectedContext = createContext<{ layersSelected: (string | number)[] }>({
  layersSelected: []
});

const ModalEditContext = createContext<{
  modalEdit?: number | null;
  focusMode?: boolean;
  canvasWidth?: number;
  canvasHeight?: number;
  selectedlayers: (number | string)[];
  layers?: any[];
  components?: any[];
  panels?: any[];
  rulerLines?: any[];
}>({
  selectedlayers: [],
  modalEdit: null,
  focusMode: false
});

function DragProvider({
  scale,
  modalEdit,
  changeComponentConfigActiveKey,
  showComponentEditModal,
  hideComponentEditModal,
  ...props
}: {
  scale: number;
  modalEdit?: number;
  changeComponentConfigActiveKey: (param) => any;
  showComponentEditModal: (param) => any;
  hideComponentEditModal: (param) => any;
  [x: string]: any;
}) {
  const value = useMemo(() => {
    return {
      scale,
      changeComponentConfigActiveKey,
      showComponentEditModal,
      hideComponentEditModal
    };
  }, [scale, modalEdit]);
  return <DragContext.Provider value={value} {...props} />;
}

function LayersSelectedProvider({ layersSelected, ...props }) {
  const value = useMemo(() => {
    return {
      layersSelected
    };
  }, [layersSelected]);

  return <LayersSelectedContext.Provider value={value} {...props} />;
}

function ModalEditProvider({
  modalEdit,
  focusMode,
  canvasWidth,
  canvasHeight,
  selectedlayers,
  layers,
  components,
  panels,
  rulerLines,
  ...props
}) {
  const value = useMemo(() => {
    return {
      modalEdit,
      canvasWidth,
      canvasHeight,
      selectedlayers,
      layers,
      focusMode,
      components,
      panels,
      rulerLines
    };
  }, [modalEdit, focusMode, canvasWidth, canvasHeight, selectedlayers, layers, components, panels, rulerLines]);

  return <ModalEditContext.Provider value={value} {...props} />;
}

export { DragProvider, DragContext, LayersSelectedContext, LayersSelectedProvider, ModalEditContext, ModalEditProvider };
