import { connect } from "react-redux";

import { ResizePanel } from "@ax/components";
import { getDefaultTheme } from "@ax/helpers";
import type { IRootState } from "@ax/types";

import ConfigPanel from "./ConfigPanel";
import TemplateBrowser from "./TemplateBrowser";

const Editor = (props: IProps) => {
	const theme = getDefaultTheme();

	return <ResizePanel leftPanel={<TemplateBrowser />} rightPanel={<ConfigPanel theme={theme} {...props} />} />;
};

type IProps = {
	isLoading: boolean;
	template: string;
};

const mapStateToProps = (state: IRootState): IProps => ({
	isLoading: state.app.isLoading,
	template: state.pageEditor.template,
});

export default connect(mapStateToProps)(Editor);
