/**
 * External dependencies
 */
import PropTypes from 'prop-types';

/**
 * WordPress dependencies
 */
import { Path, SVG, Line, Circle, G, Rect, Defs } from '@wordpress/primitives';

export const BellIcon = () => (
	<SVG xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 20">
		<Path
			fill="#707070"
			d="M8 20c1.1 0 2-.9 2-2H6c0 1.1.9 2 2 2zm6-6V9c0-3.07-1.63-5.64-4.5-6.32V2C9.5 1.17 8.83.5 8 .5S6.5 1.17 6.5 2v.68C3.64 3.36 2 5.92 2 9v5l-2 2v1h16v-1l-2-2zm-2 1H4V9c0-2.48 1.51-4.5 4-4.5s4 2.02 4 4.5v6z"
		/>
	</SVG>
);

export const JSErrorIcon = () => (
	<SVG
		width="12"
		height="9"
		viewBox="0 0 12 9"
		fill="none"
		xmlns="http://www.w3.org/2000/svg"
	>
		<Path
			fill="white"
			d="M3.67502 0.958984H5.17502V5.85898C5.17502 6.35898 5.07502 6.75898 4.87502 7.05898C4.67502 7.35898 4.37503 7.65898 4.07503 7.85898C3.67503 8.05898 3.27503 8.15898 2.87503 8.15898C2.07503 8.15898 1.57503 7.95898 1.07503 7.55898C0.675025 7.15898 0.475025 6.65898 0.475025 5.95898H1.97503C1.97503 6.25898 2.07502 6.55898 2.17502 6.75898C2.27503 6.95898 2.57503 6.95898 2.87503 6.95898C3.17503 6.95898 3.37503 6.85898 3.57503 6.65898C3.77503 6.45898 3.77503 6.15898 3.77503 5.85898V0.958984H3.67502Z"
		/>
		<Path
			fill="white"
			d="M10.075 6.25937C10.075 5.95937 9.97503 5.75938 9.77503 5.65938C9.57503 5.55938 9.27502 5.35938 8.67502 5.15938C8.17502 4.95938 7.77503 4.85938 7.47503 4.65938C6.67503 4.25938 6.27503 3.65937 6.27503 2.85938C6.27503 2.45938 6.37503 2.15937 6.57503 1.85938C6.77503 1.55937 7.07503 1.35937 7.47503 1.15937C7.97503 0.959375 8.47503 0.859375 8.97503 0.859375C9.47503 0.859375 9.97502 0.959375 10.375 1.15937C10.775 1.35937 11.075 1.55937 11.275 1.95937C11.475 2.25937 11.575 2.65937 11.575 3.05937H10.075C10.075 2.75937 9.97503 2.45937 9.77503 2.25937C9.57503 2.05937 9.27502 1.95937 8.87502 1.95937C8.47502 1.95937 8.27503 2.05937 8.07503 2.15937C7.87503 2.35937 7.77503 2.45937 7.77503 2.75937C7.77503 2.95937 7.87503 3.15937 8.07503 3.35938C8.27503 3.55938 8.67503 3.65937 9.07503 3.75937C9.87503 4.05937 10.475 4.35938 10.875 4.65938C11.275 4.95938 11.475 5.45937 11.475 6.05937C11.475 6.65937 11.275 7.15937 10.775 7.45937C10.275 7.85937 9.67502 7.95937 8.87502 7.95937C8.37502 7.95937 7.87502 7.85938 7.37502 7.65938C6.97502 7.45938 6.57502 7.15938 6.37502 6.85938C6.17502 6.55937 5.97503 6.05938 5.97503 5.65938H7.47503C7.47503 6.45938 7.97502 6.85938 8.87502 6.85938C9.17502 6.85938 9.47502 6.75938 9.67502 6.65938C9.97502 6.65938 10.075 6.45937 10.075 6.25937Z"
		/>
	</SVG>
);

export const HTMLErrorIcon = () => (
	<SVG
		width="13"
		height="6"
		viewBox="0 0 13 6"
		fill="none"
		xmlns="http://www.w3.org/2000/svg"
	>
		<Path
			fill="white"
			d="M2.44926 3.06836L5.78911 4.24609V5.88672L0.744186 3.74805V2.36523L5.78911 0.226562V1.86719L2.44926 3.06836ZM10.6407 3.05078L7.23637 1.86133V0.232422L12.3399 2.37109V3.74805L7.23637 5.89258V4.25781L10.6407 3.05078Z"
		/>
	</SVG>
);

export const CSSErrorIcon = () => (
	<SVG
		width="8"
		height="9"
		viewBox="0 0 8 9"
		fill="none"
		xmlns="http://www.w3.org/2000/svg"
	>
		<Path
			fill="white"
			d="M4.13 6.45937H2.93001L2.53 8.85938H1.43L1.83 6.45937H0.530005V5.45937H2.03L2.33 3.75937H1.03V2.75937H2.53L2.93001 0.359375H4.03L3.63 2.75937H4.73L5.13 0.359375H6.23L5.83 2.75937H7.13V3.75937H5.63L5.33 5.45937H6.63V6.45937H5.13L4.73 8.85938H3.63L4.13 6.45937ZM3.13 5.45937H4.23L4.53 3.75937H3.43001L3.13 5.45937Z"
		/>
	</SVG>
);

export const AMPAlert = () => (
	<SVG
		width="20"
		height="17"
		viewBox="0 0 20 17"
		fill="none"
		xmlns="http://www.w3.org/2000/svg"
	>
		<Path
			fill="#BE2C23"
			d="M10.0749 4.05547L16.3499 14.8971H3.79987L10.0749 4.05547ZM10.0749 0.730469L0.908203 16.5638H19.2415L10.0749 0.730469ZM10.9082 12.3971H9.24154V14.0638H10.9082V12.3971ZM10.9082 7.39714H9.24154V10.7305H10.9082V7.39714Z"
		/>
	</SVG>
);

export const AMPDelete = () => (
	<SVG
		width="21"
		height="21"
		viewBox="0 0 21 21"
		fill="none"
		xmlns="http://www.w3.org/2000/svg"
	>
		<Path
			fill="#479696"
			d="M12.2577 9.04336L10.491 10.81L8.71605 9.04336L7.54105 10.2184L9.31605 11.985L7.54938 13.7517L8.72438 14.9267L10.491 13.16L12.2577 14.9267L13.4327 13.7517L11.666 11.985L13.4327 10.2184L12.2577 9.04336ZM13.4077 3.65169L12.5744 2.81836H8.40772L7.57438 3.65169H4.65771V5.31836H16.3244V3.65169H13.4077ZM5.49105 16.1517C5.49105 17.0684 6.24105 17.8184 7.15772 17.8184H13.8244C14.741 17.8184 15.491 17.0684 15.491 16.1517V6.15169H5.49105V16.1517ZM7.15772 7.81836H13.8244V16.1517H7.15772V7.81836Z"
		/>
	</SVG>
);

export const AMPLogoIcon = () => (
	<SVG xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20">
		<Path
			fill="#0075C2"
			d="M13.3 9.1l-4 6.6h-.8l.7-4.3H7c-.2 0-.4-.2-.4-.4 0-.1.1-.2.1-.2l4-6.6h.7l-.7 4.3h2.2c.2 0 .4.2.4.4.1.1 0 .2 0 .2zM10 .5C4.7.5.4 4.8.4 10c0 5.3 4.3 9.5 9.6 9.5s9.6-4.3 9.6-9.5c0-5.3-4.3-9.5-9.6-9.5z"
		/>
	</SVG>
);

export const AMPFilledIcon = ({
	viewBox = '0 0 62 62',
	height = '62px',
	width = '62px',
}) => (
	<SVG
		width={width}
		height={height}
		viewBox={viewBox}
		version="1.1"
		xmlns="http://www.w3.org/2000/svg"
	>
		<G id="AMP-Icon" fill="#82878c">
			<Path
				d="M41.6288667,28.1614333 L28.6243667,49.8035667 L26.2683667,49.8035667 L28.5975,35.7016667 L21.3838,35.7109667 C21.3838,35.7109667 21.3156,35.7130333 21.2835667,35.7130333 C20.6336,35.7130333 20.1076333,35.1870667 20.1076333,34.5371 C20.1076333,34.2581 20.367,33.7858667 20.367,33.7858667 L33.3291333,12.1695667 L35.7244,12.1799 L33.3363667,26.3035 L40.5872667,26.2942 C40.5872667,26.2942 40.6647667,26.2931667 40.7019667,26.2931667 C41.3519333,26.2931667 41.8779,26.8191333 41.8779,27.4691 C41.8779,27.7326 41.7745667,27.9640667 41.6278333,28.1604 L41.6288667,28.1614333 Z M31,0 C13.8787,0 0,13.8797333 0,31 C0,48.1213 13.8787,62 31,62 C48.1202667,62 62,48.1213 62,31 C62,13.8797333 48.1202667,0 31,0 L31,0 Z"
				id="Fill-1"
			/>
		</G>
	</SVG>
);

AMPFilledIcon.propTypes = {
	viewBox: PropTypes.string,
	height: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
	width: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
};

export const AMPBlackIcon = ({ viewBox = '0 0 98 98' }) => (
	<SVG xmlns="http://www.w3.org/2000/svg" viewBox={viewBox}>
		<Path
			class="outer"
			d="M48 12c19.9 0 36 16.1 36 36S67.9 84 48 84 12 67.9 12 48s16.1-36 36-36"
			fill="none"
		/>
		<Path
			class="inner"
			transform="translate(33, 33)"
			d="M15,0 C23.2845834,0 30,6.71583331 30,15 C30,23.2841667 23.2845834,30 15,30 C6.71583335,30 0,23.2841667 0,15 C0,6.71583331 6.71583335,0 15,0 Z M13.8508333,24.0979167 L20.1429167,13.6258333 C20.2141667,13.5308333 20.26375,13.41875 20.26375,13.29125 C20.26375,12.9766667 20.0091667,12.7220833 19.695,12.7220833 C19.6770834,12.7220833 19.6391667,12.7229167 19.6391667,12.7229167 L16.1308334,12.7270833 L17.28625,5.89291666 L16.1270833,5.88833331 L9.85541665,16.3479167 C9.85541665,16.3479167 9.72958334,16.57625 9.72958334,16.71125 C9.72958334,17.0254167 9.98458332,17.2804167 10.29875,17.2804167 C10.3145833,17.2804167 10.3475,17.2795833 10.3475,17.2795833 L13.8379167,17.2745833 L12.7108333,24.0979167 L13.8508333,24.0979167 Z"
			fill="none"
		/>
	</SVG>
);

AMPBlackIcon.propTypes = {
	viewBox: PropTypes.string,
};

export const AMPToolbarIcon = () => (
	<SVG
		width="21"
		height="21"
		viewBox="0 0 21 21"
		fill="none"
		xmlns="http://www.w3.org/2000/svg"
	>
		<Path d="M9.86345 16.8148H9.16345L9.96345 12.3148H7.66345C7.46345 12.3148 7.26345 12.1148 7.26345 11.9148C7.26345 11.8148 7.36345 11.7148 7.36345 11.7148L11.5635 4.71484H12.3635L11.5635 9.31484H13.8635C14.0635 9.31484 14.2635 9.51484 14.2635 9.71484C14.2635 9.81484 14.2635 9.91484 14.1635 9.91484L9.86345 16.8148ZM10.6635 0.714844C5.16345 0.714844 0.663452 5.21484 0.663452 10.7148C0.663452 16.2148 5.16345 20.7148 10.6635 20.7148C16.1635 20.7148 20.6635 16.2148 20.6635 10.7148C20.6635 5.21484 16.1635 0.714844 10.6635 0.714844Z" />
	</SVG>
);

export const AMPToolbarIconBroken = () => (
	<SVG
		width="21"
		height="21"
		viewBox="0 0 21 21"
		fill="none"
		xmlns="http://www.w3.org/2000/svg"
	>
		<Path
			fillRule="evenodd"
			clipRule="evenodd"
			d="M0.912598 10.2832C0.912598 15.7832 5.4126 20.2832 10.9126 20.2832C16.4126 20.2832 20.9126 15.7832 20.9126 10.2832C20.9126 4.7832 16.4126 0.283203 10.9126 0.283203C5.4126 0.283203 0.912598 4.7832 0.912598 10.2832Z"
			fill="white"
		/>
		<Path
			d="M10.1126 16.3832H9.4126L10.2126 11.8832H7.9126C7.7126 11.8832 7.5126 11.6832 7.5126 11.4832C7.5126 11.3832 7.6126 11.2832 7.6126 11.2832L11.8126 4.2832H12.6126L11.8126 8.8832H14.1126C14.3126 8.8832 14.5126 9.0832 14.5126 9.2832C14.5126 9.3832 14.5126 9.4832 14.4126 9.4832L10.1126 16.3832ZM10.9126 0.283203C5.4126 0.283203 0.912598 4.7832 0.912598 10.2832C0.912598 15.7832 5.4126 20.2832 10.9126 20.2832C16.4126 20.2832 20.9126 15.7832 20.9126 10.2832C20.9126 4.7832 16.4126 0.283203 10.9126 0.283203Z"
			fill="#37414B"
		/>
		<Circle
			cx="10.9126"
			cy="10.2832"
			r="9"
			stroke="#BB522E"
			strokeWidth="2"
		/>
		<Line
			x1="16.5185"
			y1="17.3458"
			x2="3.79056"
			y2="4.61786"
			stroke="#BB522E"
			strokeWidth="2"
		/>
		<Line
			x1="19.8051"
			y1="18.1177"
			x2="3.28165"
			y2="1.24851"
			stroke="white"
			strokeWidth="2"
		/>
	</SVG>
);

export const AMPValidationErrorsKeptIcon = () => (
	<SVG
		width="21"
		height="21"
		viewBox="0 0 21 21"
		fill="none"
		xmlns="http://www.w3.org/2000/svg"
	>
		<G clipPath="url(#clip-amp-validation-errors-kept)">
			<Path
				d="M10.7617 2.54102C15.1617 2.54102 18.7617 6.14102 18.7617 10.541C18.7617 12.141 18.2617 13.541 17.5617 14.741L18.9617 16.241C20.0617 14.641 20.7617 12.641 20.7617 10.541C20.7617 5.04102 16.2617 0.541016 10.7617 0.541016C8.76172 0.541016 6.86172 1.14102 5.26172 2.24102L6.66172 3.74102C7.86172 2.94102 9.26172 2.54102 10.7617 2.54102Z"
				fill="#BB522E"
			/>
			<Path
				d="M0.761719 10.541C0.761719 16.041 5.26172 20.541 10.7617 20.541C13.4617 20.541 15.8617 19.441 17.6617 17.741L3.66172 3.54102C1.86172 5.34102 0.761719 7.84102 0.761719 10.541ZM10.7617 18.541C6.36172 18.541 2.76172 14.941 2.76172 10.541C2.76172 9.04102 3.16172 7.74102 3.86172 6.54102L14.7617 17.441C13.5617 18.141 12.2617 18.541 10.7617 18.541Z"
				fill="#BB522E"
			/>
			<Path
				d="M14.2619 9.74062C14.3619 9.74062 14.3619 9.64062 14.3619 9.54062C14.3619 9.34062 14.1619 9.14062 13.9619 9.14062H11.9619L13.5619 10.7406L14.2619 9.74062Z"
				fill="#BB522E"
			/>
			<Path
				d="M12.4615 4.54102H11.6615L10.0615 7.14102L11.7615 8.84102L12.4615 4.54102Z"
				fill="#BB522E"
			/>
			<Path
				d="M7.46182 11.5414C7.46182 11.5414 7.36182 11.6414 7.36182 11.7414C7.36182 11.9414 7.56182 12.1414 7.76182 12.1414H10.0618L9.26182 16.6414H9.96182L12.5618 12.5414L9.06182 8.94141L7.46182 11.5414Z"
				fill="#BB522E"
			/>
		</G>
		<Defs>
			<clipPath id="clip-amp-validation-errors-kept">
				<Rect
					width="20"
					height="20"
					fill="white"
					transform="translate(0.761719 0.541016)"
				/>
			</clipPath>
		</Defs>
	</SVG>
);

export const MobileIcon = () => (
	<SVG xmlns="http://www.w3.org/2000/svg" viewBox="0 0 79 139">
		<Defs>
			<style>
				{`.cls-1{fill:#fff;}.cls-2{fill:#c4c4c4;}.cls-3{fill:none;stroke:#c4c4c4;stroke-width:2px;}.cls-4{fill:#e7e7e7;}`}
			</style>
		</Defs>
		<G>
			<G>
				<Rect
					className="cls-1"
					x="-30.33"
					y="30.82"
					width="140.19"
					height="78.89"
					transform="translate(-30.69 109.72) rotate(-90)"
				/>
				<Path
					className="cls-2"
					d="M7.51,14.71l16.68.07a2.31,2.31,0,0,1,2.3,2.33h0a2.3,2.3,0,0,1-2.32,2.3L7.49,19.34A2.33,2.33,0,0,1,5.18,17h0A2.31,2.31,0,0,1,7.51,14.71Z"
				/>
				<Rect
					className="cls-2"
					x="32.11"
					y="-4.06"
					width="2.31"
					height="56.24"
					rx="1.16"
					transform="matrix(0, -1, 1, 0, 9.06, 57.22)"
				/>
				<Rect
					className="cls-2"
					x="18.84"
					y="58.89"
					width="4.63"
					height="32.47"
					rx="2.31"
					transform="translate(-54.06 95.95) rotate(-89.74)"
				/>
				<Path
					className="cls-2"
					d="M6.19,61.26l9.27,0a1.15,1.15,0,0,1,1.15,1.16h0a1.16,1.16,0,0,1-1.16,1.16l-9.27,0A1.15,1.15,0,0,1,5,62.41H5A1.15,1.15,0,0,1,6.19,61.26Z"
				/>
				<Path
					className="cls-2"
					d="M22.4,61.33l9.27,0a1.16,1.16,0,0,1,1.15,1.17h0a1.15,1.15,0,0,1-1.16,1.15l-9.27,0a1.16,1.16,0,0,1-1.15-1.16h0A1.16,1.16,0,0,1,22.4,61.33Z"
				/>
				<Path
					className="cls-2"
					d="M6.06,80.48l11,0a1.15,1.15,0,0,1,1.15,1.16h0a1.15,1.15,0,0,1-1.16,1.15l-11,0a1.16,1.16,0,0,1-1.16-1.16h0A1.16,1.16,0,0,1,6.06,80.48Z"
				/>
				<Path
					className="cls-2"
					d="M73.15,99.46l-19.56-.09a1.15,1.15,0,0,0-1.16,1.15h0a1.15,1.15,0,0,0,1.15,1.16l19.56.09a1.15,1.15,0,0,0,1.16-1.15h0A1.15,1.15,0,0,0,73.15,99.46Z"
				/>
				<Path
					className="cls-2"
					d="M6,91.43l11,0a1.15,1.15,0,0,1,1.15,1.16h0A1.15,1.15,0,0,1,17,93.79L6,93.74a1.16,1.16,0,0,1-1.16-1.16h0A1.16,1.16,0,0,1,6,91.43Z"
				/>
				<Path
					className="cls-2"
					d="M62.17,86.26l11,0a1.17,1.17,0,0,1,1.15,1.17h0a1.16,1.16,0,0,1-1.16,1.15l-11,0A1.16,1.16,0,0,1,61,87.41h0A1.16,1.16,0,0,1,62.17,86.26Z"
				/>
				<Path
					className="cls-2"
					d="M25.92,104.78l-20-.09a1.15,1.15,0,0,0-1.16,1.15h0A1.15,1.15,0,0,0,5.94,107l20,.09a1.15,1.15,0,0,0,1.16-1.15h0A1.15,1.15,0,0,0,25.92,104.78Z"
				/>
				<Path
					className="cls-2"
					d="M24,80.56l49.28.22a1.16,1.16,0,0,1,1.16,1.16h0a1.18,1.18,0,0,1-1.17,1.16l-49.28-.23a1.15,1.15,0,0,1-1.15-1.16h0A1.15,1.15,0,0,1,24,80.56Z"
				/>
				<Path
					className="cls-2"
					d="M47.71,99.34,6,99.15a1.15,1.15,0,0,0-1.16,1.15h0A1.17,1.17,0,0,0,6,101.47l41.74.18a1.16,1.16,0,0,0,1.17-1.15h0A1.16,1.16,0,0,0,47.71,99.34Z"
				/>
				<Path
					className="cls-2"
					d="M23.9,91.51l49.28.22a1.16,1.16,0,0,1,1.16,1.16h0a1.18,1.18,0,0,1-1.17,1.16l-49.28-.23a1.15,1.15,0,0,1-1.15-1.16h0A1.15,1.15,0,0,1,23.9,91.51Z"
				/>
				<Path
					className="cls-2"
					d="M6,86l49.28.22a1.15,1.15,0,0,1,1.15,1.16h0a1.16,1.16,0,0,1-1.16,1.16L6,88.32a1.15,1.15,0,0,1-1.15-1.16h0A1.15,1.15,0,0,1,6,86Z"
				/>
				<Path
					className="cls-2"
					d="M73.13,105l-41.79-.19A1.18,1.18,0,0,0,30.17,106h0a1.17,1.17,0,0,0,1.15,1.16l41.8.19a1.17,1.17,0,0,0,1.16-1.16h0A1.16,1.16,0,0,0,73.13,105Z"
				/>
				<Path
					className="cls-2"
					d="M38.62,61.41l9.26,0A1.16,1.16,0,0,1,49,62.61h0a1.16,1.16,0,0,1-1.17,1.15l-9.26,0a1.16,1.16,0,0,1-1.16-1.16h0A1.16,1.16,0,0,1,38.62,61.41Z"
				/>
				<Path
					className="cls-2"
					d="M54.83,61.48l9.27,0a1.15,1.15,0,0,1,1.15,1.16h0a1.15,1.15,0,0,1-1.16,1.15l-9.27,0a1.15,1.15,0,0,1-1.15-1.16h0A1.15,1.15,0,0,1,54.83,61.48Z"
				/>
				<Path
					className="cls-2"
					d="M5.7,4.65l4.63,0a.45.45,0,0,1,.46.46h0a.46.46,0,0,1-.46.46l-4.63,0a.46.46,0,0,1-.46-.46h0A.47.47,0,0,1,5.7,4.65Z"
				/>
				<Path
					className="cls-2"
					d="M5.69,6.51l4.63,0a.45.45,0,0,1,.46.46h0a.45.45,0,0,1-.46.46l-4.63,0A.46.46,0,0,1,5.23,7h0A.45.45,0,0,1,5.69,6.51Z"
				/>
				<Path
					className="cls-2"
					d="M5.69,8.36l4.63,0a.47.47,0,0,1,.46.46h0a.46.46,0,0,1-.47.46l-4.63,0a.47.47,0,0,1-.46-.46h0A.46.46,0,0,1,5.69,8.36Z"
				/>
				<Path
					className="cls-3"
					d="M56.12,5.88,72.55,6a1.31,1.31,0,0,1,1.31,1.32h0a1.31,1.31,0,0,1-1.32,1.31L56.11,8.51A1.32,1.32,0,0,1,54.8,7.19h0A1.3,1.3,0,0,1,56.12,5.88Z"
				/>
				<Rect
					className="cls-4"
					x="27.33"
					y="9.56"
					width="24.99"
					height="69.44"
					rx="10"
					transform="translate(-4.63 83.91) rotate(-89.74)"
				/>
				<Path
					className="cls-2"
					d="M29.36,44.42,9.54,56.64l60.56.28-20-18L33.54,50.07Z"
				/>
				<Circle className="cls-1" cx="14.39" cy="40.41" r="3.76" />
				<Rect
					className="cls-4"
					x="8.41"
					y="108"
					width="24.99"
					height="32.41"
					rx="10"
					transform="matrix(0, -1, 1, 0, -103.39, 144.55)"
				/>
				<Path
					className="cls-2"
					d="M17.35,124.37,9.13,136.65l25,.11-8.23-18L19.06,130Z"
				/>
				<Circle className="cls-1" cx="12.56" cy="118.49" r="3.76" />
				<Rect
					className="cls-4"
					x="45.64"
					y="108.16"
					width="24.99"
					height="32.41"
					rx="10"
					transform="translate(-66.49 181.94) rotate(-89.74)"
				/>
				<Path
					className="cls-2"
					d="M54.58,124.54l-8.22,12.27,25,.11-8.23-18-6.85,11.24Z"
				/>
				<Circle className="cls-1" cx="49.78" cy="118.66" r="3.76" />
			</G>
		</G>
	</SVG>
);
