import React from "react";
import MhSwitcher from "../../common/fields/MhSwitcher";
import TimezoneList from "../../common/fields/TimezoneList";
import MhSelect from "../../common/fields/MhSelect";
import { isProActive } from "../../../Helpers";
import { langString } from "../../../Helpers";

const ConfigTab = ({ formData, setFormData }) => {

	const handleChange = (name, value) => {
		setFormData({ ...formData, [name]: value });
	};

	//timezones
	const Timezones = TimezoneList();

	const {
		enable_recurring_meeting,
		meeting_timezone,
		enable_should_register,
		join_before_host,
		auto_record,
		allow_attendee_camera,
		allow_attendee_mic,
		enable_lobby,
		hide_sidebar,
		hide_header_footer
	} = formData;

	return (
		<div>
			<div className="mhub-col-lg-12">
				<MhSwitcher
					label={langString('recurring_meeting')}
					description={langString('enable_recurring')}
					checked={enable_recurring_meeting}
					onChange={(name, value) => handleChange(name, value)}
					name="enable_recurring_meeting"
					disabled={true}
					isUpcomming={true}
				/>
			</div>

			<div className="mhub-col-lg-12">
				<MhSelect
					label={langString('timezone')}
					description={langString('meeting_timezone')}
					options={Timezones}
					value={meeting_timezone}
					onChange={(name, value) => handleChange(name, value)}
					name="meeting_timezone"
				/>
			</div>

			<div className="mhub-col-lg-12">
				<MhSwitcher
					label={langString('should_register')}
					description={langString('should_register_help')}
					checked={enable_should_register}
					onChange={(name, value) => handleChange(name, value)}
					name="enable_should_register"
					disabled={true}
					isUpcomming={true}
				/>
			</div>

			<div className="mhub-col-lg-12">
				<MhSwitcher
					label="Enable Lobby"
					description="Enable lobby feature where attendees wait for host approval to join"
					checked={enable_lobby}
					onChange={(name, value) => handleChange(name, value)}
					name="enable_lobby"
				/>
			</div>

			<div className="mhub-col-lg-12">
				<MhSwitcher
					label={langString('join_before_host')}
					description={langString('join_before_host_hint')}
					checked={join_before_host}
					onChange={(name, value) => handleChange(name, value)}
					name="join_before_host"
				/>
			</div>

			<div className="mhub-col-lg-12">
				<MhSwitcher
					label="Allow Attendee Camera"
					description="Allow meeting attendees to turn on their cameras"
					checked={allow_attendee_camera}
					onChange={(name, value) => handleChange(name, value)}
					name="allow_attendee_camera"
					disabled={!isProActive()}
					isLocked={!isProActive()}
				/>
			</div>

			<div className="mhub-col-lg-12">
				<MhSwitcher
					label="Allow Attendee Microphone"
					description="Allow meeting attendees to unmute their microphones"
					checked={allow_attendee_mic}
					onChange={(name, value) => handleChange(name, value)}
					name="allow_attendee_mic"
					disabled={!isProActive()}
					isLocked={!isProActive()}
				/>
			</div>

			<div className="mhub-col-lg-12">
				<MhSwitcher
					label={langString('auto_record')}
					description="Automatically record Microsoft Teams meetings when they start"
					checked={auto_record}
					onChange={(name, value) => handleChange(name, value)}
					name="auto_record"
					disabled={!isProActive()}
					isLocked={!isProActive()}
				/>
			</div>

			<div className="mhub-col-lg-12">
				<MhSwitcher
					label={langString('hide_sidebar')}
					description={langString('hide_sidebar_help')}
					name="hide_sidebar"
					checked={hide_sidebar}
					onChange={(name, value) => handleChange(name, value)}
				/>
			</div>

			<div className="mhub-col-lg-12">
				<MhSwitcher
					label={langString('hide_header_footer')}
					description={langString('hide_header_footer_help')}
					name="hide_header_footer"
					checked={hide_header_footer}
					onChange={(name, value) => handleChange(name, value)}
				/>
			</div>
		</div>
	);
};

export default ConfigTab;