import * as typoPrefixs from "./constants/typographyPrefixConstants";
// import {
// 	generateTypographyAttributes,
// 	generateResponsiveRangeAttributes,
// 	generateDimensionsAttributes,
// 	generateBackgroundAttributes,
// 	generateBorderShadowAttributes,
// } from "../../../util/helpers";

const {
	generateTypographyAttributes,
	generateResponsiveRangeAttributes,
	generateDimensionsAttributes,
	generateBackgroundAttributes,
	generateBorderShadowAttributes,
} = window.EBControls;

import {
	connectorWidth,
	listSpace,
	rowSpace,
	iconBackgroundType,
	iconBackgroundSize,
	iconPadding,
	iconSize,
	iconSpace,
	titleSpace,
	iconBorder,
	wrapperMargin,
	wrapperPadding,
	boxPadding,
	boxBackgroundType,
	boxBorder,
	wrapperBorder,
	wrapperBackgroundType,
} from "./constants";

const attributes = {
	// the following 4 attributes is must required for responsive options and asset generation for frontend
	// responsive control attributes ⬇
	resOption: {
		type: "string",
		default: "Desktop",
	},
	// blockId attribute for making unique className and other uniqueness ⬇
	blockId: {
		type: "string",
	},
	blockRoot: {
		type: "string",
		default: "essential_block",
	},
	// blockMeta is for keeping all the styles ⬇
	blockMeta: {
		type: "object",
	},
	featureListAlign: {
		type: "string",
	},
	features: {
		type: "array",
		source: "query",
		selector: ".eb-feature-list-wrapper .eb-feature-list-items li",
		query: {
			title: {
				type: "string",
				source: "text",
				selector: ".eb-feature-list-title",
			},
			iconType: {
				type: "string",
				source: "attribute",
				attribute: "data-icon-type",
			},
			featureImageId: {
				type: "string",
				source: "attribute",
				attribute: "data-image-id",
			},
			featureImage: {
				type: "string",
				source: "attribute",
				attribute: "data-image",
			},
			featureImageAlt: {
				type: "string",
				source: "attribute",
				attribute: "data-alt",
			},
			featureImageTitle: {
				type: "string",
				source: "attribute",
				attribute: "data-title",
			},
			icon: {
				type: "string",
				source: "attribute",
				attribute: "data-icon",
			},
			iconColor: {
				type: "string",
				source: "attribute",
				attribute: "data-icon-color",
			},
			iconBackgroundColor: {
				type: "string",
				source: "attribute",
				attribute: "data-icon-background-color",
			},
			content: {
				type: "string",
				source: "text",
				selector: ".eb-feature-list-content",
			},
			link: {
				type: "string",
				source: "attribute",
				attribute: "data-link",
			},
			linkOpenNewTab: {
				type: "string",
				source: "attribute",
				attribute: "data-new-tab",
			},
		},
		default: [],
	},
	iconGlobalColor: {
		type: "string",
	},
	titleTag: {
		type: "string",
		default: "h3",
	},
	iconShape: {
		type: "string",
		default: "circle",
	},
	shapeView: {
		type: "string",
		default: "stacked",
	},
	iconPosition: {
		type: "string",
		default: "left",
	},
	titleTextColor: {
		type: "string",
		default: "#414247",
	},
	titleTextHoverColor: {
		type: "string",
	},
	descTextColor: {
		type: "string",
		default: "#7A7A7A",
	},
	showContentVertical: {
		type: "boolean",
		default: false,
	},
	showConnector: {
		type: "boolean",
		default: false,
	},
	connectorStyle: {
		type: "string",
		default: "style-1",
	},
	connectorType: {
		type: "string",
		default: "solid",
	},
	connectorColor: {
		type: "string",
		default: "#D18DF1",
	},
	useInlineDesign: {
		type: "boolean",
		default: false,
	},
	...generateResponsiveRangeAttributes(connectorWidth, {
		defaultRange: 2,
		noUnits: true,
	}),
	...generateResponsiveRangeAttributes(listSpace, {
		defaultRange: 20,
		noUnits: true,
	}),
	...generateResponsiveRangeAttributes(rowSpace, {
		defaultRange: 10,
		noUnits: true,
	}),
	...generateResponsiveRangeAttributes(iconBackgroundSize, {
		defaultRange: 60,
		noUnits: true,
	}),
	...generateResponsiveRangeAttributes(iconSize, {
		defaultRange: 21,
		noUnits: true,
	}),
	...generateResponsiveRangeAttributes(iconSpace, {
		defaultRange: 20,
		noUnits: true,
	}),
	...generateResponsiveRangeAttributes(titleSpace, {
		defaultRange: 5,
		noUnits: true,
	}),
	// typography attributes
	...generateTypographyAttributes(Object.values(typoPrefixs)),
	// background attributes
	...generateBackgroundAttributes(iconBackgroundType, {
		defaultFillColor: "#D18DF1",
		noOverlay: true,
		noMainBgi: true,
	}),
	...generateBackgroundAttributes(boxBackgroundType, {
		noOverlay: true,
		noMainBgi: true,
	}),
	...generateBackgroundAttributes(wrapperBackgroundType),
	// Dimension attributes
	...generateDimensionsAttributes(iconPadding, {
		top: 15,
		right: 15,
		bottom: 15,
		left: 15,
		isLinked: false,
	}),
	...generateDimensionsAttributes(boxPadding),
	...generateDimensionsAttributes(wrapperMargin, {
		top: 28,
		right: 0,
		bottom: 28,
		left: 0,
		isLinked: false,
	}),
	...generateDimensionsAttributes(wrapperPadding, {
		top: 10,
		right: 10,
		bottom: 10,
		left: 10,
		isLinked: true,
	}),
	// border
	...generateBorderShadowAttributes(iconBorder, {
		bdrDefaults: {
			top: 2,
			right: 2,
			bottom: 2,
			left: 2,
		},
		noShadow: true,
		defaultBdrColor: "#6e2d8d",
		defaultBdrStyle: "solid",
	}),
	...generateBorderShadowAttributes(boxBorder),
	...generateBorderShadowAttributes(wrapperBorder),
};

export default attributes;
