import { slideTypes } from '../timeline';

export function PressureIcon() {
	return <svg width='48' height='48' viewBox='0 0 48 48' fill='none' xmlns='http://www.w3.org/2000/svg'>
		<path
			d='M18 30L14.7004 41.5487C14.3494 42.7771 15.2718 44 16.5494 44V44C17.408 44 18.1626 43.4308 18.3985 42.6053L22 30H18Z'
			fill='url(#paint0_linear)'
		/>
		<path
			d='M31.4506 44C30.592 44 29.8374 43.4308 29.6015 42.6053L26 30H30L33.2996 41.5487C33.6506 42.7771 32.7282 44 31.4506 44V44Z'
			fill='url(#paint1_linear)'
		/>
		<path
			d='M28 6C28 8.20914 26.2091 10 24 10C21.7909 10 20 8.20914 20 6C20 3.79086 21.7909 2 24 2C26.2091 2 28 3.79086 28 6Z'
			fill='url(#paint2_linear)'
		/>
		<path
			d='M42 32C40.9391 32 39.9217 31.5786 39.1716 30.8284C38.4214 30.0783 38 29.0609 38 28C38 26.9391 38.4214 25.9217 39.1716 25.1716C39.9217 24.4214 40.9391 24 42 24C43.0609 24 44.0783 24.4214 44.8284 25.1716C45.5786 25.9217 46 26.9391 46 28C46 29.0609 45.5786 30.0783 44.8284 30.8284C44.0783 31.5786 43.0609 32 42 32ZM46 20H38C37.4696 20 36.9609 20.2107 36.5858 20.5858C36.2107 20.9609 36 21.4696 36 22V46C36 46.5304 36.2107 47.0391 36.5858 47.4142C36.9609 47.7893 37.4696 48 38 48H46C46.5304 48 47.0391 47.7893 47.4142 47.4142C47.7893 47.0391 48 46.5304 48 46V22C48 21.4696 47.7893 20.9609 47.4142 20.5858C47.0391 20.2107 46.5304 20 46 20Z'
			fill='url(#paint3_linear)'
		/>
		<path d='M38 10H10V28H34V22C34 20 36 18 38 18V10Z' fill='url(#paint4_linear)' />
		<g filter='url(#filter0_d)'>
			<path
				d='M6 10C6 7.79086 7.79086 6 10 6H38C40.2091 6 42 7.79086 42 10V18H38V12C38 10.8954 37.1046 10 36 10H12C10.8954 10 10 10.8954 10 12V26C10 27.1046 10.8954 28 12 28H34V32H10C7.79086 32 6 30.2091 6 28V10Z'
				fill='url(#paint5_linear)'
			/>
			<path
				d='M29.4142 14C29.7893 14 30.149 14.149 30.4142 14.4142L33.2929 17.2929C33.7456 17.7456 34 18.3597 34 19V19C34 19.6403 33.7456 20.2544 33.2929 20.7071L30.4142 23.5858C30.149 23.851 29.7893 24 29.4142 24V24C28.6332 24 28 23.3668 28 22.5858V15.4142C28 14.6332 28.6332 14 29.4142 14V14Z'
				fill='url(#paint6_linear)'
			/>
			<path
				d='M20 16C20 14.8954 20.8954 14 22 14V14C23.1046 14 24 14.8954 24 16V22C24 23.1046 23.1046 24 22 24V24C20.8954 24 20 23.1046 20 22V16Z'
				fill='url(#paint7_linear)'
			/>
			<path
				d='M14 16C14 14.8954 14.8954 14 16 14V14C17.1046 14 18 14.8954 18 16V22C18 23.1046 17.1046 24 16 24V24C14.8954 24 14 23.1046 14 22V16Z'
				fill='url(#paint8_linear)'
			/>
		</g>
		<g filter='url(#filter1_d)'>
			<rect x='4' y='6' width='40' height='4' rx='2' fill='#5DE9AE' />
		</g>
		<defs>
			<filter
				id='filter0_d'
				x='2'
				y='3'
				width='44'
				height='34'
				filterUnits='userSpaceOnUse'
				color-interpolation-filters='sRGB'
			>
				<feFlood flood-opacity='0' result='BackgroundImageFix' />
				<feColorMatrix in='SourceAlpha' type='matrix' values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0' />
				<feOffset dy='1' />
				<feGaussianBlur stdDeviation='2' />
				<feColorMatrix type='matrix' values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.25 0' />
				<feBlend mode='normal' in2='BackgroundImageFix' result='effect1_dropShadow' />
				<feBlend mode='normal' in='SourceGraphic' in2='effect1_dropShadow' result='shape' />
			</filter>
			<filter
				id='filter1_d'
				x='0'
				y='3'
				width='48'
				height='12'
				filterUnits='userSpaceOnUse'
				color-interpolation-filters='sRGB'
			>
				<feFlood flood-opacity='0' result='BackgroundImageFix' />
				<feColorMatrix in='SourceAlpha' type='matrix' values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0' />
				<feOffset dy='1' />
				<feGaussianBlur stdDeviation='2' />
				<feColorMatrix type='matrix' values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.25 0' />
				<feBlend mode='normal' in2='BackgroundImageFix' result='effect1_dropShadow' />
				<feBlend mode='normal' in='SourceGraphic' in2='effect1_dropShadow' result='shape' />
			</filter>
			<linearGradient id='paint0_linear' x1='24' y1='2' x2='24' y2='44' gradientUnits='userSpaceOnUse'>
				<stop stop-color='#5DE9AE' />
				<stop offset='1' stop-color='#4081E2' />
			</linearGradient>
			<linearGradient id='paint1_linear' x1='24' y1='2' x2='24' y2='44' gradientUnits='userSpaceOnUse'>
				<stop stop-color='#5DE9AE' />
				<stop offset='1' stop-color='#4081E2' />
			</linearGradient>
			<linearGradient id='paint2_linear' x1='24' y1='2' x2='24' y2='44' gradientUnits='userSpaceOnUse'>
				<stop stop-color='#5DE9AE' />
				<stop offset='1' stop-color='#4081E2' />
			</linearGradient>
			<linearGradient id='paint3_linear' x1='42' y1='20' x2='42' y2='48' gradientUnits='userSpaceOnUse'>
				<stop stop-color='#8045FE' />
				<stop offset='1' stop-color='#C482ED' />
			</linearGradient>
			<linearGradient id='paint4_linear' x1='24' y1='10' x2='24' y2='28' gradientUnits='userSpaceOnUse'>
				<stop stop-color='#3E4299' />
				<stop offset='1' stop-color='#020122' />
			</linearGradient>
			<linearGradient id='paint5_linear' x1='24' y1='6' x2='24' y2='32' gradientUnits='userSpaceOnUse'>
				<stop stop-color='#6FE4E4' />
				<stop offset='1' stop-color='#6268E6' />
			</linearGradient>
			<linearGradient id='paint6_linear' x1='24' y1='6' x2='24' y2='32' gradientUnits='userSpaceOnUse'>
				<stop stop-color='#6FE4E4' />
				<stop offset='1' stop-color='#6268E6' />
			</linearGradient>
			<linearGradient id='paint7_linear' x1='24' y1='6' x2='24' y2='32' gradientUnits='userSpaceOnUse'>
				<stop stop-color='#6FE4E4' />
				<stop offset='1' stop-color='#6268E6' />
			</linearGradient>
			<linearGradient id='paint8_linear' x1='24' y1='6' x2='24' y2='32' gradientUnits='userSpaceOnUse'>
				<stop stop-color='#6FE4E4' />
				<stop offset='1' stop-color='#6268E6' />
			</linearGradient>
		</defs>
	</svg>;
}

export function SlideKeyframe(props: {
	type: slideTypes;
	ghost?: boolean;
	loopEnd?: boolean;
}) {
	return <div className={'keyframe dispinbl posrel' + (props.ghost ? ' ghost' : '')}>
		<SlideKeyframeOutline type={props.type} loopEnd={props.loopEnd} />
		<SlideKeyframeBackground type={props.type} loopEnd={props.loopEnd} />
	</div>;
}

export function SlideKeyframeBackground(props: {
	type: slideTypes;
	loopEnd?: boolean;
}) {
	return <svg
		className='background'
		width='24'
		height='24'
		viewBox='0 0 24 24'
		xmlns='http://www.w3.org/2000/svg'
	>
		{{
			'default': <path
				d='M10.2929 19.2929L4.70711 13.7071C4.25435 13.2544 4 12.6403 4 12C4 11.3597 4.25435 10.7456 4.70711 10.2929L10.2929 4.70711C10.7456 4.25435 11.3597 4 12 4C12.6403 4 13.2544 4.25435 13.7071 4.70711L19.2929 10.2929C19.7456 10.7456 20 11.3597 20 12C20 12.6403 19.7456 13.2544 19.2929 13.7071L13.7071 19.2929C13.2544 19.7456 12.6403 20 12 20C11.3597 20 10.7456 19.7456 10.2929 19.2929Z'
			/>,
			'delay': <circle cx='12' cy='12' r='8' />,
			'speedChange': <path
				d='M4 18V6C4 4.89543 4.89543 4 6 4H18C19.1046 4 20 4.89543 20 6V18C20 19.1046 19.1046 20 18 20H6C4.89543 20 4 19.1046 4 18Z'
			/>,
			'loop': !props.loopEnd
				? <path
					d='M9 6C9 4.89543 9.89543 4 11 4H15C16.1046 4 17 4.89543 17 6C17 7.10457 16.1046 8 15 8H13V16H15C16.1046 16 17 16.8954 17 18C17 19.1046 16.1046 20 15 20H11C9.89543 20 9 19.1046 9 18V6Z'
				/>
				: <path
					d='M15 18C15 19.1046 14.1046 20 13 20H9C7.89543 20 7 19.1046 7 18C7 16.8954 7.89543 16 9 16H11V8H9C7.89543 8 7 7.10457 7 6C7 4.89543 7.89543 4 9 4H13C14.1046 4 15 4.89543 15 6V18Z'
				/>,
		}[props.type]}
	</svg>;
}

export function SlideKeyframeOutline(props: {
	type: slideTypes;
	loopEnd?: boolean;
}) {
	return <svg
		className='outline posabs l0 t0'
		width='24'
		height='24'
		viewBox='0 0 24 24'
		xmlns='http://www.w3.org/2000/svg'
	>
		{{
			'default': <path
				fill-rule='evenodd'
				clip-rule='evenodd'
				d='M5.41421 13L11 18.5858C11.2652 18.851 11.6249 19 12 19C12.3751 19 12.7348 18.851 13 18.5858L18.5858 13C18.851 12.7348 19 12.3751 19 12C19 11.6249 18.851 11.2652 18.5858 11L13 5.41421L13.7071 4.70711L19.2929 10.2929C19.7456 10.7456 20 11.3597 20 12C20 12.6403 19.7456 13.2544 19.2929 13.7071L13.7071 19.2929C13.2544 19.7456 12.6403 20 12 20C11.3597 20 10.7456 19.7456 10.2929 19.2929L4.70711 13.7071C4.25435 13.2544 4 12.6403 4 12C4 11.3597 4.25435 10.7456 4.70711 10.2929L10.2929 4.70711L11 5.41421L5.41421 11C5.149 11.2652 5 11.6249 5 12C5 12.3751 5.149 12.7348 5.41421 13ZM10.2929 4.70711L11 5.41421C11.2652 5.149 11.6249 5 12 5C12.3751 5 12.7348 5.149 13 5.41421L13.7071 4.70711C13.2544 4.25435 12.6403 4 12 4C11.3597 4 10.7456 4.25435 10.2929 4.70711Z'
			/>,
			'delay': <path
				fill-rule='evenodd'
				clip-rule='evenodd'
				d='M12 19C15.866 19 19 15.866 19 12C19 8.13401 15.866 5 12 5C8.13401 5 5 8.13401 5 12C5 15.866 8.13401 19 12 19ZM12 20C16.4183 20 20 16.4183 20 12C20 7.58172 16.4183 4 12 4C7.58172 4 4 7.58172 4 12C4 16.4183 7.58172 20 12 20Z'
			/>,
			'speedChange': <path
				fill-rule='evenodd'
				clip-rule='evenodd'
				d='M5 6V18C5 18.5523 5.44772 19 6 19H18C18.5523 19 19 18.5523 19 18V6C19 5.44772 18.5523 5 18 5H6C5.44772 5 5 5.44772 5 6ZM4 6V18C4 19.1046 4.89543 20 6 20H18C19.1046 20 20 19.1046 20 18V6C20 4.89543 19.1046 4 18 4H6C4.89543 4 4 4.89543 4 6Z'
			/>,
			'loop': !props.loopEnd
				? <path
					fill-rule='evenodd'
					clip-rule='evenodd'
					d='M12 7H15C15.5523 7 16 6.55228 16 6C16 5.44772 15.5523 5 15 5H11C10.4477 5 10 5.44772 10 6V18C10 18.5523 10.4477 19 11 19H15C15.5523 19 16 18.5523 16 18C16 17.4477 15.5523 17 15 17H12V7ZM11 4C9.89543 4 9 4.89543 9 6V18C9 19.1046 9.89543 20 11 20H15C16.1046 20 17 19.1046 17 18C17 16.8954 16.1046 16 15 16H13V8H15C16.1046 8 17 7.10457 17 6C17 4.89543 16.1046 4 15 4H11Z'
				/>
				: <path
					fill-rule='evenodd'
					clip-rule='evenodd'
					d='M12 17H9C8.44772 17 8 17.4477 8 18C8 18.5523 8.44772 19 9 19H13C13.5523 19 14 18.5523 14 18V6C14 5.44772 13.5523 5 13 5H9C8.44772 5 8 5.44772 8 6C8 6.55228 8.44772 7 9 7H12V17ZM13 20C14.1046 20 15 19.1046 15 18V6C15 4.89543 14.1046 4 13 4H9C7.89543 4 7 4.89543 7 6C7 7.10457 7.89543 8 9 8H11V16H9C7.89543 16 7 16.8954 7 18C7 19.1046 7.89543 20 9 20H13Z'
				/>,
		}[props.type]}
	</svg>;
}