import { __ } from '@wordpress/i18n';

import LianaMigration from '../shared/LianaMigration';

type DashboardBoxProps = {
	title: string;
	description: string;
	url: string;
	isPro?: boolean;
	renderIcon?: () => JSX.Element;
};

const DashboardBox = ( props: DashboardBoxProps ) => {
	return (
		<div className="gs-dashboard-box">
			<a href={ props.url } className="gs-dashboard-box__link">
				<span className="screen-reader-text">{ props.title }</span>
			</a>
			<div className="gs-dashboard-box__inner">
				<div className="gs-dashboard-box__header">
					<div className="gs-dashboard-box__icon">
						{ props.renderIcon ? props.renderIcon() : null }
					</div>
					<h3 className="gs-dashboard-box__title">{ props.title }</h3>
					{ props.isPro ? (
						<span className="gs-dashboard-box__badge">
							{ __( 'Pro', 'liana-with-growthstack' ) }
						</span>
					) : null }
				</div>
				<div className="gs-dashboard-box__content">
					<p className="gs-dashboard-box__description">
						{ props.description }
					</p>
				</div>
			</div>
		</div>
	);
};

type DashboardProps = {
	endpointDashboard: string;
	assetsFolder: string;
	migrationEndpoint: string;
	migrationStatus: string;
	urlAnalytics: string;
	urlABTesting: string;
	urlPersonalization: string;
	urlForms: string;
	urlSettings: string;
	urlSupport: string;
};

export default function Dashboard( props: DashboardProps ) {
	const {
		migrationEndpoint,
		migrationStatus,
		urlAnalytics,
		urlABTesting,
		urlPersonalization,
		urlForms,
		urlSettings,
		urlSupport,
	} = props;

	return (
		<>
			<LianaMigration
				endpoint={ migrationEndpoint }
				status={ migrationStatus }
			/>
			<div className="gs-header-box">
				<div className="gs-header-box__main">
					<h2>{ __( 'Dashboard', 'liana-with-growthstack' ) }</h2>
				</div>
			</div>
			<div className="gs-dashboard-boxes">
				<DashboardBox
					title={ __( 'Analytics', 'liana-with-growthstack' ) }
					description={ __(
						'GrowthStack will gather 1st party anonymous analytics of your site. This is data that you own and is gathered from bigger audience than 3rd party analytics requiring cookie consent.',
						'liana-with-growthstack'
					) }
					url={ urlAnalytics }
					renderIcon={ () => (
						<svg
							xmlns="http://www.w3.org/2000/svg"
							fill="none"
							viewBox="0 0 18 19"
						>
							<path
								fill="#000"
								fillOpacity={ 0.01 }
								d="M0 .761h17.5v17.5H0z"
							/>
							<path
								fill="#353A40"
								d="M1.64 2.363v12.031c0 .479.342.82.82.82h14.22c.444 0 .82.377.82.82a.81.81 0 0 1-.82.821H2.46A2.45 2.45 0 0 1 0 14.395V2.362a.81.81 0 0 1 .82-.82c.445 0 .82.376.82.82Zm14.527 3.862-4.683 4.649a.749.749 0 0 1-1.128 0l-2.7-2.7-2.7 2.7c-.342.342-.854.342-1.162 0a.749.749 0 0 1 0-1.128l3.281-3.281c.137-.171.342-.24.581-.24a.8.8 0 0 1 .581.24l2.7 2.7 4.068-4.068c.307-.341.82-.341 1.162 0a.805.805 0 0 1 0 1.128Z"
							/>
						</svg>
					) }
				/>
				<DashboardBox
					title={ __( 'A/B Testing', 'liana-with-growthstack' ) }
					isPro={ true }
					description={ __(
						'Make data-driven decisions on content creation and call to action optimization. With GrowthStack you can easily run A/B tests on your pages without needing analysts or developers to set up the tests.',
						'liana-with-growthstack'
					) }
					url={ urlABTesting }
					renderIcon={ () => (
						<svg
							xmlns="http://www.w3.org/2000/svg"
							fill="none"
							viewBox="0 0 26 21"
						>
							<path
								fill="#fff"
								stroke="currentColor"
								d="M12.5 2H23a2.5 2.5 0 0 1 2.5 2.5v12A2.5 2.5 0 0 1 23 19H12.5V2Z"
							/>
							<path
								fill="currentColor"
								d="M19.023 10.507h-1.621l-.009-.68h1.472c.243 0 .456-.042.637-.124a.963.963 0 0 0 .422-.351.981.981 0 0 0 .154-.554c0-.235-.045-.425-.136-.571a.753.753 0 0 0-.409-.326 1.945 1.945 0 0 0-.694-.105H17.59V13.5h-.848V7.102h2.096c.328 0 .621.033.879.1.258.065.476.168.655.308.181.138.319.314.413.528.093.213.14.47.14.769 0 .263-.067.502-.202.716-.135.21-.322.384-.562.518a2.202 2.202 0 0 1-.835.26l-.304.206Zm-.04 2.993h-1.915l.479-.69h1.437c.27 0 .498-.047.685-.14.19-.094.336-.226.436-.396.1-.173.149-.376.149-.61 0-.238-.043-.443-.128-.616a.881.881 0 0 0-.4-.4c-.181-.094-.415-.14-.703-.14h-1.208l.009-.682h1.652l.18.246c.308.027.569.115.783.264.213.146.376.334.487.562.115.229.172.48.172.756 0 .399-.088.736-.264 1.011-.173.273-.418.48-.734.624-.316.14-.688.211-1.116.211ZM0 4.5a3 3 0 0 1 3-3h9v18H3a3 3 0 0 1-3-3v-12Z"
							/>
							<path
								fill="#fff"
								d="M7.111 7.668 4.993 13.5h-.866l2.44-6.398h.558l-.014.566ZM8.887 13.5 6.764 7.668l-.013-.566h.558L9.757 13.5h-.87Zm-.11-2.369v.695H5.182v-.695h3.595Z"
							/>
						</svg>
					) }
				/>
				<DashboardBox
					title={ __( 'Personalization', 'liana-with-growthstack' ) }
					description={ __(
						'You can increase conversions and improve the user experience by segmenting your visitors and automatically targeting content based on their needs.',
						'liana-with-growthstack'
					) }
					url={ urlPersonalization }
					renderIcon={ () => (
						<svg
							xmlns="http://www.w3.org/2000/svg"
							width={ 19 }
							height={ 19 }
							fill="none"
							{ ...props }
						>
							<path
								fill="#000"
								fillOpacity={ 0.01 }
								d="M.66.761h17.5v17.5H.66z"
							/>
							<path
								fill="#353A40"
								d="M.66 14.668a.81.81 0 0 1 .82-.82h2.017a2.772 2.772 0 0 1 2.632-1.915c1.196 0 2.256.82 2.597 1.914h8.614c.444 0 .82.376.82.82a.81.81 0 0 1-.82.821H8.726a2.718 2.718 0 0 1-2.597 1.914c-1.23 0-2.29-.786-2.632-1.914H1.48c-.478 0-.82-.342-.82-.82Zm4.375 0a1.08 1.08 0 0 0 1.094 1.094c.58 0 1.093-.479 1.093-1.094 0-.581-.512-1.094-1.093-1.094-.616 0-1.094.513-1.094 1.094Zm6.562-5.469a1.08 1.08 0 0 0 1.094 1.094c.581 0 1.094-.479 1.094-1.094 0-.581-.513-1.094-1.094-1.094-.615 0-1.094.513-1.094 1.094Zm1.094-2.734c1.196 0 2.256.82 2.598 1.914h2.05c.445 0 .82.376.82.82a.81.81 0 0 1-.82.82h-2.05a2.718 2.718 0 0 1-2.598 1.914c-1.23 0-2.29-.786-2.632-1.914H1.48c-.478 0-.82-.342-.82-.82a.81.81 0 0 1 .82-.82h8.58a2.772 2.772 0 0 1 2.631-1.914ZM7.222 4.824c.581 0 1.094-.479 1.094-1.094 0-.58-.513-1.094-1.094-1.094-.615 0-1.093.513-1.093 1.094a1.08 1.08 0 0 0 1.093 1.094ZM9.82 2.91h7.52c.444 0 .82.376.82.82a.81.81 0 0 1-.82.82H9.82a2.718 2.718 0 0 1-2.598 1.915c-1.23 0-2.29-.787-2.631-1.914H1.48C1 4.55.66 4.209.66 3.73a.81.81 0 0 1 .82-.821h3.11A2.772 2.772 0 0 1 7.223.996c1.197 0 2.256.82 2.598 1.914Z"
							/>
						</svg>
					) }
				/>
				<DashboardBox
					title={ __( 'Forms', 'liana-with-growthstack' ) }
					description={ __(
						'Connecting forms on WordPress with Liana’s email and automation tools. Manage all your forms at one place.',
						'liana-with-growthstack'
					) }
					url={ urlForms }
					renderIcon={ () => (
						<svg
							xmlns="http://www.w3.org/2000/svg"
							width={ 18 }
							height={ 19 }
							fill="none"
						>
							<path
								fill="#000"
								fillOpacity={ 0.01 }
								d="M.33.761h17.5v17.5H.33z"
							/>
							<path
								fill="#353A40"
								d="M1.97 9.472h6.29V5.918H1.97v3.554Zm0 1.641v3.555c0 .307.24.547.547.547H8.26v-4.102H1.97Zm7.93 4.102h5.742c.274 0 .547-.24.547-.547v-3.555H9.9v4.102Zm6.29-5.743V5.918H9.9v3.554h6.29ZM2.516 1.542h13.126c1.196 0 2.187.992 2.187 2.188v10.938a2.18 2.18 0 0 1-2.187 2.187H2.517A2.16 2.16 0 0 1 .33 14.668V3.73a2.18 2.18 0 0 1 2.187-2.187Z"
							/>
						</svg>
					) }
				/>
				<DashboardBox
					title={ __( 'Settings', 'liana-with-growthstack' ) }
					description={ __(
						'Configure GrowthStack settings and connect your Liana account.',
						'liana-with-growthstack'
					) }
					url={ urlSettings }
					renderIcon={ () => (
						<svg
							xmlns="http://www.w3.org/2000/svg"
							width={ 19 }
							height={ 19 }
							fill="none"
						>
							<path
								fill="#000"
								fillOpacity={ 0.01 }
								d="M.66.761h17.5v17.5H.66z"
							/>
							<path
								fill="#353A40"
								d="M9.41.449c.581 0 1.128.068 1.675.17.273.07.752.206 1.025.684.069.137.103.274.137.41l.342 1.334c.034.17.376.376.58.307l1.3-.376c.136-.034.273-.068.41-.068.546 0 .923.342 1.093.547a8.737 8.737 0 0 1 1.71 2.94c.102.273.205.751-.103 1.196-.069.136-.171.239-.274.341l-.957.957c-.17.137-.17.513 0 .65l.957.957c.103.102.206.205.274.342.273.444.17.922.102 1.196a8.738 8.738 0 0 1-1.709 2.94c-.17.204-.546.546-1.093.546-.137 0-.274-.034-.41-.068l-1.3-.41c-.204-.035-.546.136-.58.341l-.342 1.333c-.034.137-.069.274-.137.41-.273.48-.752.616-1.025.684a8.988 8.988 0 0 1-1.675.137 9.359 9.359 0 0 1-1.71-.137c-.273-.068-.751-.205-1.024-.683-.069-.137-.103-.274-.137-.41l-.342-1.334c-.034-.205-.376-.376-.547-.341l-1.299.41c-.136.034-.307.034-.444.068-.547 0-.923-.342-1.094-.547a8.738 8.738 0 0 1-1.709-2.94c-.068-.273-.17-.751.103-1.23a2.4 2.4 0 0 1 .273-.341l.991-.923c.137-.137.137-.513 0-.65l-.99-.957c-.103-.102-.206-.205-.274-.341-.274-.445-.171-.923-.103-1.197a8.738 8.738 0 0 1 1.71-2.94c.17-.204.546-.546 1.093-.546a2 2 0 0 1 .444.068l1.3.376c.17.069.512-.136.546-.307l.342-1.333c.034-.137.068-.274.137-.41C6.949.824 7.427.687 7.7.62A9.345 9.345 0 0 1 9.41.449ZM8.11 2.226l-.308 1.197C7.53 4.516 6.265 5.268 5.172 4.96l-1.197-.376A8.248 8.248 0 0 0 2.677 6.84l.922.854c.82.786.82 2.256 0 3.042l-.922.855c.307.82.751 1.572 1.298 2.255l1.197-.376c1.093-.307 2.358.445 2.631 1.538l.308 1.197c.82.17 1.743.17 2.598 0l.273-1.197c.274-1.093 1.538-1.845 2.632-1.538l1.196.376a8.247 8.247 0 0 0 1.3-2.255l-.89-.855c-.82-.786-.82-2.256 0-3.042l.89-.854a8.247 8.247 0 0 0-1.3-2.256l-1.196.376c-1.06.307-2.358-.445-2.632-1.538l-.273-1.197a6.644 6.644 0 0 0-2.598 0ZM7.77 9.2c0 .615.308 1.128.82 1.435.48.308 1.129.308 1.641 0 .479-.307.82-.82.82-1.435 0-.581-.341-1.094-.82-1.401-.512-.308-1.162-.308-1.64 0-.513.307-.82.82-.82 1.401Zm1.64 3.281c-1.195 0-2.255-.615-2.87-1.64-.581-.992-.581-2.256 0-3.282.615-.99 1.675-1.64 2.87-1.64 1.163 0 2.223.65 2.838 1.64.58 1.026.58 2.29 0 3.282-.615 1.025-1.675 1.64-2.837 1.64Z"
							/>
						</svg>
					) }
				/>
				<DashboardBox
					title={ __( 'Support', 'liana-with-growthstack' ) }
					description={ __(
						'Get help with GrowthStack and Liana’s services. See most common questions and contact support.',
						'liana-with-growthstack'
					) }
					url={ urlSupport }
					renderIcon={ () => (
						<svg
							xmlns="http://www.w3.org/2000/svg"
							width={ 16 }
							height={ 16 }
							viewBox="-0.75 -0.75 16 16"
						>
							<title>{ 'messages-bubble' }</title>
							<path
								fill="none"
								stroke="currentColor"
								strokeLinecap="round"
								strokeLinejoin="round"
								strokeWidth={ 1.5 }
								d="M7.25.604C3.413.604.302 3.174.302 6.344a5.28 5.28 0 0 0 2.054 4.072l-1.45 3.48 3.85-2.2a8.222 8.222 0 0 0 2.494.387c3.837 0 6.948-2.57 6.948-5.74S11.088.605 7.25.605Z"
							/>
						</svg>
					) }
				/>
			</div>
		</>
	);
}
