import type { CSSObject } from '@mui/material/styles';

export type BannerHoverEffect =
	| 'none'
	| 'effect-1'
	| 'effect-2'
	| 'effect-3'
	| 'effect-4'
	| 'effect-5'
	| 'effect-6'
	| 'effect-7'
	| 'effect-8'
	| 'effect-9'
	| 'effect-10'
	| 'effect-11';

export const BANNER_HOVER_EFFECTS: { value: BannerHoverEffect; label: string; description: string }[] = [
	{ value: 'none', label: 'Sin efecto', description: 'Banner estático, sin animación al pasar el mouse.' },
	{ value: 'effect-1', label: 'Opacidad suave', description: 'Reduce suavemente la opacidad de la imagen.' },
	{ value: 'effect-2', label: 'Barrido claro', description: 'Capa blanca translúcida que entra desde el lateral.' },
	{ value: 'effect-3', label: 'Anillo central', description: 'Anillo expansivo centrado con transición circular.' },
	{ value: 'effect-4', label: 'Corte diagonal', description: 'Bandas diagonales oscuras que cruzan el banner.' },
	{ value: 'effect-5', label: 'Marco doble', description: 'Borde doble grande que colapsa al hacer hover.' },
	{ value: 'effect-6', label: 'Zoom oscuro', description: 'Zoom lento con oscurecimiento ligero.' },
	{ value: 'effect-7', label: 'Cortina central', description: 'Overlay oscuro que se abre desde el centro.' },
	{ value: 'effect-8', label: 'Marco fino', description: 'Líneas internas horizontales y verticales.' },
	{ value: 'effect-9', label: 'Profundidad', description: 'Capa oscura y leve perspectiva de imagen.' },
	{ value: 'effect-10', label: 'Gradiente inferior', description: 'Gradiente ascendente desde la base del banner.' },
	{ value: 'effect-11', label: 'Esquinas cruzadas', description: 'Bloques translúcidos desde esquinas opuestas.' }
];

export const bannerHoverEffectStyles: CSSObject = {
	position: 'relative',
	overflow: 'hidden',
	'[data-banner-effect="effect-1"] & img': {
		transition: 'all 0.2s ease-in'
	},
	'[data-banner-effect="effect-1"] &:hover img': {
		opacity: 0.8
	},
	'[data-banner-effect="effect-2"] &::before, [data-banner-effect="effect-2"] &::after': {
		content: '""',
		position: 'absolute',
		top: 0,
		left: '-100%',
		zIndex: 2,
		display: 'block',
		width: '100%',
		height: '100%',
		backgroundColor: 'rgba(255, 255, 255, 0.4)',
		opacity: 0,
		pointerEvents: 'none',
		transition: 'all 0.3s ease-in'
	},
	'[data-banner-effect="effect-2"] &:hover::before, [data-banner-effect="effect-2"] &:hover::after': {
		left: 0,
		opacity: 1
	},
	'[data-banner-effect="effect-3"] &::before, [data-banner-effect="effect-3"] &::after': {
		content: '""',
		position: 'absolute',
		inset: 0,
		zIndex: 2,
		width: 100,
		height: 100,
		margin: 'auto',
		boxSizing: 'border-box',
		border: '50px solid transparent',
		borderRadius: 50,
		opacity: 1,
		pointerEvents: 'none',
		transform: 'scale(7)',
		transition: 'all 0.4s ease-in-out',
		visibility: 'visible'
	},
	'[data-banner-effect="effect-3"] &:hover::before, [data-banner-effect="effect-3"] &:hover::after': {
		border: '0 solid rgba(0, 0, 0, 0.7)',
		opacity: 0
	},
	'[data-banner-effect="effect-4"] &::before, [data-banner-effect="effect-4"] &::after': {
		content: '""',
		position: 'absolute',
		top: 0,
		left: 0,
		zIndex: 2,
		width: '100%',
		height: '100%',
		borderTop: '50px solid rgba(0, 0, 0, 0.2)',
		borderBottom: '50px solid rgba(0, 0, 0, 0.2)',
		opacity: 0,
		pointerEvents: 'none',
		transform: 'rotate3d(0, 0, 1, 45deg) scale3d(1, 0, 1)',
		transformOrigin: '50% 50% 0',
		transition: 'opacity 0.4s ease 0s, transform 0.35s ease 0s',
		visibility: 'visible'
	},
	'[data-banner-effect="effect-4"] &:hover::before, [data-banner-effect="effect-4"] &:hover::after': {
		opacity: 1,
		transform: 'rotate3d(0, 0, 1, 45deg) scale3d(1, 4, 1)'
	},
	'[data-banner-effect="effect-5"] &::before, [data-banner-effect="effect-5"] &::after': {
		content: '""',
		position: 'absolute',
		inset: 0,
		zIndex: 2,
		border: '200px double transparent',
		opacity: 1,
		pointerEvents: 'none',
		visibility: 'visible',
		transition: 'all 0.4s cubic-bezier(0.94, 0.85, 0.1, 0.62) 0s'
	},
	'[data-banner-effect="effect-5"] &:hover::before, [data-banner-effect="effect-5"] &:hover::after': {
		border: '0 double rgba(255, 255, 255, 0.7)',
		opacity: 0,
		visibility: 'hidden'
	},
	'[data-banner-effect="effect-6"] &': {
		background: '#000'
	},
	'[data-banner-effect="effect-6"] & img': {
		backfaceVisibility: 'hidden',
		opacity: 1,
		transition: 'opacity 1s ease 0s, transform 1s ease 0s'
	},
	'[data-banner-effect="effect-6"] &:hover img': {
		opacity: 0.8,
		transform: 'scale3d(1.1, 1.1, 1)'
	},
	'[data-banner-effect="effect-7"] &::before': {
		content: '""',
		position: 'absolute',
		top: 0,
		left: '50%',
		zIndex: 2,
		width: 0,
		height: 0,
		background: 'rgba(0, 0, 0, 0.3)',
		pointerEvents: 'none',
		transition: 'all 0.3s ease-in-out 0s'
	},
	'[data-banner-effect="effect-7"] &:hover::before': {
		left: 0,
		width: '100%',
		height: '100%'
	},
	'[data-banner-effect="effect-8"] &': {
		background: '#000'
	},
	'[data-banner-effect="effect-8"] &::before, [data-banner-effect="effect-8"] &::after': {
		content: '""',
		position: 'absolute',
		top: 20,
		right: 20,
		bottom: 20,
		left: 20,
		zIndex: 2,
		opacity: 0,
		pointerEvents: 'none',
		transition: 'opacity 0.35s ease 0s, transform 0.35s ease 0s'
	},
	'[data-banner-effect="effect-8"] &::before': {
		borderTop: '1px solid #ffffff',
		borderBottom: '1px solid #ffffff',
		transform: 'scale(0, 1)'
	},
	'[data-banner-effect="effect-8"] &::after': {
		borderLeft: '1px solid #ffffff',
		borderRight: '1px solid #ffffff',
		transform: 'scale(1, 0)'
	},
	'[data-banner-effect="effect-8"] & img': {
		opacity: 1,
		transition: 'opacity 0.35s ease 0s'
	},
	'[data-banner-effect="effect-8"] &:hover::before, [data-banner-effect="effect-8"] &:hover::after': {
		opacity: 1,
		transform: 'scale(1)'
	},
	'[data-banner-effect="effect-8"] &:hover img': {
		opacity: 0.5
	},
	'[data-banner-effect="effect-9"] &::before': {
		content: '""',
		position: 'absolute',
		top: 0,
		left: 0,
		zIndex: 2,
		width: '100%',
		height: '100%',
		background: '#000',
		boxShadow: '0 3px 30px rgba(0, 0, 0, 0.2)',
		opacity: 0,
		pointerEvents: 'none',
		transition: 'opacity 0.35s'
	},
	'[data-banner-effect="effect-9"] &:hover::before': {
		opacity: 1
	},
	'[data-banner-effect="effect-9"] & img': {
		opacity: 1,
		transform: 'perspective(1000px) translate3d(0, 0, 0)',
		transition: 'transform 0.35s'
	},
	'[data-banner-effect="effect-9"] &:hover img': {
		transform: 'perspective(1000px) translate3d(0, 0, 21px)'
	},
	'[data-banner-effect="effect-10"] &::before': {
		content: '""',
		position: 'absolute',
		top: 0,
		left: 0,
		zIndex: 2,
		width: '100%',
		height: '100%',
		background: 'linear-gradient(to bottom, transparent 0%, rgba(0, 0, 0, 0.2) 75%)',
		opacity: 0,
		pointerEvents: 'none',
		transform: 'translate3d(0, 50%, 0)',
		transition: 'opacity 0.35s, transform 0.35s'
	},
	'[data-banner-effect="effect-10"] &:hover::before': {
		opacity: 1,
		transform: 'translate3d(0, 0, 0)'
	},
	'[data-banner-effect="effect-11"] &::before, [data-banner-effect="effect-11"] &::after': {
		content: '""',
		position: 'absolute',
		top: 0,
		left: 0,
		zIndex: 2,
		width: 0,
		height: 0,
		margin: 'auto',
		backgroundColor: 'rgba(0, 0, 0, 0.15)',
		pointerEvents: 'none',
		transition: 'all 0.3s ease-out 0s'
	},
	'[data-banner-effect="effect-11"] &::before': {
		transformOrigin: 'top left'
	},
	'[data-banner-effect="effect-11"] &::after': {
		top: 'auto',
		right: 0,
		bottom: 0,
		left: 'auto',
		transformOrigin: 'bottom right'
	},
	'[data-banner-effect="effect-11"] &:hover::before, [data-banner-effect="effect-11"] &:hover::after': {
		width: '100%',
		height: '100%'
	}
};