import { makeStyles } from '@material-ui/core/styles';

import React, { useEffect, useState } from 'react';

import {
OuterBoxPaper,
PinkAddCircleButton,
PopUp,
SearchInput,
WhiteButton,
WhitePaper,
WithoutIndicatorTab,
} from '../../components';
import ToggleBtn from './components/components/ToggleBtn';
import ProgressPage from './pages/ProgressPage';
import Timeline from './pages/Timeline';
import CreateDayCare from './components/CreateDayCare';
import { Box, Tabs } from '@material-ui/core';
import CancelDayCareAppointments from './components/CancelDayCareAppointments';
const useStyles = makeStyles(theme => ({
paper1: { background: '#6c64643d' },
paper2: {
// marginTop: 33,
background: '#F4F4F4',
},
grid: { marginTop: 4 },
// grid1: { marginTop: 30 },
header: { fontWeight: 'bold' },
centerGrid: {
display: 'flex',
alignItems: 'center',
},
bottomCss: {
padding: 0,
[theme.breakpoints.down('md')]: {
height: '100%',
},
},
}));
function a11yProps(index) {
return {
id: `simple-tab-${index}`,
'aria-controls': `simple-tabpanel-${index}`,
};
}

const DayCare = () => {

const classes = useStyles();
const today = new Date();
const [yourdate, setYourdate] = useState(
new Date(today.getFullYear(), today.getMonth(), today.getDate(), 9),
);
const [toggle, setToggle] = useState(false);
const [actionIndex, setActionIndex] = useState(0);
const [openPopUp, setOpenPopUp] = useState(false);
const handlePopUpClick = () => {
setOpenPopUp(!openPopUp);
};
const handleActionIndex = (event, value) => {
setActionIndex(value);
if (value === 0) {
 setToggle(false);
} else {
setToggle(true);
}
};

useEffect(() => {
handleNavigate(new Date());
}, [toggle]);
const handleNavigate = date => {
setYourdate(date);
};
const RightContainer = props => {
return (
<>
<WhiteButton
variant="contained"
color="primary"
onClick={() => {
handlePopUpClick();
}}
style={{
boxShadow: 'none',
border: '1px solid #00000029',
marginRight: 20,
fontSize: '0.9rem',
}}
>
Cancelled / Deferred
</WhiteButton>
<SearchInput
style={{ width: 250 }}
// onChange={e => handleChange(e.target.value)}
placeholder="Search by Name"
/>
<Tabs
value={actionIndex}
onChange={handleActionIndex}
// variant="scrollable"
// scrollButtons="on"
aria-label="full width tabs example"
TabIndicatorProps={{
style: {
// background: '#FF3399',
height: 0,
},
}}
style={{ marginLeft: 20, alignItems: 'center' }}
>
<WithoutIndicatorTab {...a11yProps(0)} label="Progress" />
<WithoutIndicatorTab {...a11yProps(1)} label="Timeline" />
</Tabs>
</>
);
};
const BottomContainer = () => {
return <>{toggle ? <Timeline yourdate={yourdate} /> : <ProgressPage />}</>;
};
const [openCreateDayCare, setOpenCreateDayCare] = useState(false);
const handleCreateDaycarePopup = value => {
setOpenCreateDayCare(!openCreateDayCare);
};
const addObjInDayCare = field => {};
return (
<>
<Box display="flex">
<Box flex="1 1 auto">
<OuterBoxPaper
title={"Today's Daycare Schedule"}
hideCloseIcon={true}
rightContainer={RightContainer()}
bottomComponent={BottomContainer()}
bottomHeight={'78vh'}
bottomCss={classes.bottomCss}
/>
</Box>
{openCreateDayCare && (
<Box
style={{
width: 400,
flex: '0 0 auto',
}}
>
<CreateDayCare
popperOPen={handleCreateDaycarePopup}
addObjInDayCare={addObjInDayCare}
/>
</Box>
)}
</Box>
{!openCreateDayCare && (
<PinkAddCircleButton
onClick={handleCreateDaycarePopup}
title={'Book DayCare'}
size="small"
style={{
width: 140,
borderRadius: 50,
position: 'fixed',
bottom: 40,
right: 40,
}}
/>
)}
<PopUp
open={openPopUp}
handleClick={handlePopUpClick}
render={
<>
<CancelDayCareAppointments
handleClose={() => {
handlePopUpClick();
}}
/>
{/* // <BroadcastingDetails
// Data={data[editIndex]}
// handleClose={() => {
// handlePopUpClick();
 // }}
// /> */}
</>
}
/>
</>
);
};
export default DayCare;