import { useContext, useEffect, useRef, useState } from 'react';
import useDarkMode from '../../hooks/useDarkMode';
import ThemeContext from '../../contexts/themeContext';
import { useFormik } from 'formik';
import FormGroup from '../../components/bootstrap/forms/FormGroup';

import PageWrapper from '../../layout/PageWrapper/PageWrapper'
import Page from '../../layout/Page/Page';
import Button, { } from '../../components/bootstrap/Button'
import Card, { CardActions, CardBody, CardHeader, CardLabel, CardSubTitle, CardTitle } from '../../components/bootstrap/Card';

import Select from '../../components/bootstrap/forms/Select';
import Option from '../../components/bootstrap/Option';

type TListTab = 'Read' | 'Listen';

interface ITranslationProps {
	id: number;
	language: string;
	file_name: string;
}

const RhapsodydailyPage = () => {
	const { mobileDesign } = useContext(ThemeContext);
	
  const [translations, setTranslations] = useState<[]>([]);
  const [pdfsrc, setPdfsrc] = useState('');

	// BEGIN :: List Tab
		const LIST_TAB: { [key: string]: TListTab } = {
			READ: 'Read',
			LISTEN: 'Listen',
		};
		const [activeListTab, setActiveListTab] = useState(LIST_TAB.READ);
		const handleActiveListTab = (tabName: TListTab) => {
			setActiveListTab(tabName);
		};
		const getStatusActiveListTabColor = (tabName: TListTab): 'primary' | 'light' => {
			if (activeListTab === tabName) return 'primary';
			return 'light';
		};
	// END :: List Tab

		useEffect(() => {

			fetch('https://mediathek.tniglobal.org/api/monthlyAvailableTranslations')
			.then((response) => response.json())
			.then((data) => {
				console.log(data);
				setTranslations(data.data)
				
			})
			.catch((err) => {
				console.log(err.message);
			});

			return () => {};
			// eslint-disable-next-line react-hooks/exhaustive-deps
		}, []);

		const languageSelect = useFormik({
			initialValues: {
				selectedTranslation: '',
			},
			onSubmit: (values) => {
				//setPdfsrc(`https://mediathek.tniglobal.org/read/${values.selectedTranslation}`)
				//alert(values.selectedTranslation);
			},
		});
 
		const { themeStatus } = useDarkMode();

	return (
		<PageWrapper title="Rhapsodydaily">
			<Page container='fluid'>
				
				<Card className='pt-3 pb-5'>
					<CardHeader>
						<CardLabel icon='BurstMode' iconColor='secondary'>
							<CardTitle> Today's date </CardTitle>
							<CardSubTitle> Current year </CardSubTitle>
						</CardLabel>
						<CardActions>
							<span> Rhapsody daily articles</span>
						</CardActions>
					</CardHeader>

					<div className="mt-4 mb-5 w-50 mx-auto bg-light btn-group" role="group" aria-label="Basic mixed styles example">
						{Object.keys(LIST_TAB).map((key) => (
							<Button type="button" className="btn"
								key={key}
								color={getStatusActiveListTabColor(LIST_TAB[key])}
								onClick={() => handleActiveListTab(LIST_TAB[key])}>
								{LIST_TAB[key]}
							</Button>
						))}
					</div>

					<CardBody className=''>
						<div>
							{activeListTab === LIST_TAB.READ && 
								<div className='mt-4'>

									<div className='row'>
										<div className='col-9'>
											<FormGroup id='selectedTranslation' isFloating label='Please select your translation'	className=''>
												<Select	ariaLabel='Service select' placeholder='Please select...'	size='lg'
													value={languageSelect.values.selectedTranslation}	onChange={languageSelect.handleChange}>
													{translations.map((translation: object) => (
														<Option key={translation['id' as keyof typeof translation]} 
															value={translation['language' as keyof typeof translation]}
														>
															{translation['language' as keyof typeof translation]}
														</Option>
													))}
												</Select>
											</FormGroup>
										</div>

										<div className='col-3 d-grid d-flex align-items-center'>
											<Button size="sm" onClick={languageSelect.handleSubmit} color='secondary'>	Submit </Button>
										</div>
									</div>
								</div>
							}
							{activeListTab === LIST_TAB.LISTEN && 
								<div> Here you can place the content for the Listen Tab</div>
							}
						</div>
					</CardBody>
				</Card>

			</Page>
		</PageWrapper>
	);
};

export default RhapsodydailyPage;