import React from "react";
import PropTypes from 'prop-types';
import { Link } from 'react-router-dom';
import SettingIcons from './SettingIcons';
const { __ } = wp.i18n;
import { langString } from "../../Helpers";
import { useMhubAdmin } from "../../App/MhubAdminContext";

function SettingsCard({ title, description, isUpcoming, settingsType }) {
	const { connectionStatuses } = useMhubAdmin();
	const getIcon = () => {
		switch (settingsType) {
			case 'jitsi':
				return SettingIcons.jitsi;
			case 'zoom':
				return SettingIcons.zoom;
			case 'webex':
				return SettingIcons.webex;
			case 'google_meet':
				return SettingIcons.google_meet;
			case 'msteams':
				return SettingIcons.msteams;
			default:
				break;
		}
	};

	console.log(mhubMeetingsData.oauthData);

	return (
		<div className="settings-card">
			<div className="card-top">
				<div className="card-left">
					{getIcon()}
					<h3 className="card-title">{title}</h3>
					<p className="card-description">{description}</p>
				</div>


				<div className="card-right">
					{settingsType === 'jitsi' && 'connected' == connectionStatuses.jitsi && <p className="account-status">{langString('account_connected')}</p>}
					{settingsType === 'zoom' && 'connected' == connectionStatuses.zoom_oauth && <p className="account-status">{langString('account_connected')}</p>}
					{settingsType === 'webex' && 'connected' == connectionStatuses.webex && <p className="account-status">{langString('account_connected')}</p>}
					{settingsType === 'google_meet' && 'connected' == connectionStatuses.google_meet && <p className="account-status">{langString('account_connected')}</p>}
					{settingsType === 'msteams' && 'connected' == connectionStatuses.msteams && <p className="account-status">{langString('account_connected')}</p>}
				</div>
			</div>
			<div className="card-bottom">
				{isUpcoming ? (
					<span className="upcoming">{langString('upcoming')}</span>
				) : (
					<Link to={`/${settingsType}`} className="settings-button">
						{langString('configure')}
					</Link>
				)}
			</div>
		</div>
	);
}

SettingsCard.propTypes = {
	title: PropTypes.string.isRequired,
	description: PropTypes.string.isRequired,
	isUpcoming: PropTypes.bool,
	settingsType: PropTypes.string.isRequired,
};

export default SettingsCard;
