import {Button, Col, Dropdown, DropdownButton, Form, Row} from "react-bootstrap";
import React  from "react";

type DatasetFormType = {
	inputText: string;
	selectedOption: string;
	file: File | null;
};

type AddDatasetFormProps = {
	Submit: (e: React.MouseEvent<HTMLButtonElement>) => void;
	DatasetForm: DatasetFormType;
	setForm: React.Dispatch<React.SetStateAction<DatasetFormType>>;
};


const AddDatasetForm = ({ Submit, DatasetForm, setForm }: AddDatasetFormProps) => {



	const handleInputChange = (e: React.ChangeEvent<HTMLInputElement>):void => {
		setForm({ ...DatasetForm, inputText: e.target.value });
	};

	const handleDropdownChange = (option: string | null): void => {
		if (option) {
			setForm({ ...DatasetForm, selectedOption: option });
		}
	};

	const handleFileChange = (e: React.ChangeEvent<HTMLInputElement>) => {
		setForm({ ...DatasetForm, file: e.target.files ? e.target.files[0] : null });
	};

	return (
	<Form>
		<Row>
			<h2 className="fw-bold text-center mb-3">Add Dataset</h2>
		</Row>
		<Row>
			<Col>
				<Form.Group className="mb-3 fw-bold" controlId="formInputText">
					<Form.Label>Dataset id: no underscore, no duplicates, not empty</Form.Label>
					<Form.Control type="text"
						  		placeholder=""
						  		value={DatasetForm.inputText}
					  			onChange={handleInputChange}></Form.Control>
				</Form.Group>
			</Col>
		</Row>
		<Row>
			<Col>
				<Form.Group className="mb-3 fw-bold">
					<Form.Label>Choose Kind of Dataset</Form.Label>
					<DropdownButton
						id="dropdown-basic-button"
						title={DatasetForm.selectedOption || "Select an Option"}
						onSelect={handleDropdownChange}
						className="w-100"
					>
						<Dropdown.Item eventKey="Sections">Sections</Dropdown.Item>
						<Dropdown.Item eventKey="Rooms">Rooms</Dropdown.Item>
						</DropdownButton>
				</Form.Group>
			</Col>
		</Row>
		<Row>
			<Col>
				<Form.Group className="mb-3 fw-bold" controlId="formFile">
				<Form.Label>Upload Dataset .zip file</Form.Label>
					<Form.Control
						type="file"
						accept=".zip"
						onChange={handleFileChange}
						required
					/>
				</Form.Group>
			</Col>
		</Row>
		<Row>
			<Col>
				<Button variant="primary" type="submit" onClick={Submit}>
				Submit
				</Button>
			</Col>
		</Row>
	</Form>
	);
};

export default AddDatasetForm