import { type Props } from '@elementor/editor-props';
import { type BreakpointId } from '@elementor/editor-responsive';

export type ClassState =
	| {
			name: 'selected';
			value: 'e--selected';
	  }
	| {
			name: 'disabled';
			value: 'e--disabled';
	  }
	| {
			name: 'playing';
			value: 'e--playing';
	  }
	| {
			name: 'paused';
			value: 'e--paused';
	  };

export type StyleDefinitionAdditionalPseudoState = 'focus-visible';

export type StyleDefinitionPseudoState =
	| 'hover'
	| 'focus'
	| 'active'
	| 'checked'
	| StyleDefinitionAdditionalPseudoState;

export type StyleDefinitionClassState = ClassState[ 'value' ];

export type StyleDefinitionStateType = StyleDefinitionPseudoState | StyleDefinitionClassState;

export type StyleDefinitionState = null | Exclude< StyleDefinitionStateType, StyleDefinitionAdditionalPseudoState >;

export type CustomCss = {
	raw: string;
};

export type StyleDefinitionVariant = {
	meta: {
		breakpoint: null | BreakpointId;
		state: StyleDefinitionState;
	};
	props: Props;
	custom_css: CustomCss | null;
};

export type StyleDefinitionType = 'class';

export type StyleDefinitionID = string;

export type StyleDefinition = {
	id: StyleDefinitionID;
	variants: StyleDefinitionVariant[];
	label: string;
	type: StyleDefinitionType;
	sync_to_v3?: boolean;
};

export type StyleDefinitionsMap = Record< StyleDefinition[ 'id' ], StyleDefinition >;

export type Variable = {
	key?: string;
	label: string;
	value: string;
	type: string;
	deleted?: boolean;
	deleted_at?: string;
	sync_to_v3?: boolean;
};

export type StyleVariables = Record< string, Variable >;