/**
 * Preview Device Store
 * レスポンシブプレビューのデバイス状態をグローバルに管理
 * 独立したReactツリー間（各ブロック）で状態を共有するために @wordpress/data を使用
 */

import { createReduxStore, register, select } from '@wordpress/data';

const STORE_NAME = 'zenblocks/preview';

const DEFAULT_STATE = {
	device: 'pc',
};

const actions = {
	setDevice( device ) {
		return {
			type: 'SET_DEVICE',
			device,
		};
	},
};

const reducer = ( state = DEFAULT_STATE, action ) => {
	switch ( action.type ) {
		case 'SET_DEVICE':
			return { ...state, device: action.device };
		default:
			return state;
	}
};

const selectors = {
	getDevice( state ) {
		return state.device;
	},
};

const store = createReduxStore( STORE_NAME, {
	reducer,
	actions,
	selectors,
} );

// 既に登録されている場合はスキップ
if ( ! select( STORE_NAME ) ) {
	register( store );
}

export const PREVIEW_STORE = STORE_NAME;
export default store;
